Merge branch 'material-web'
This commit is contained in:
Angelos Chalaris
128
docs/about.html
Normal file
128
docs/about.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>About - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
|
||||
<h2 class="category-name">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br />
|
||||
<h2 class="category-name">Maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="category-name">Past maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
|
||||
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 class="category-name">License</h2>
|
||||
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
|
||||
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
|
||||
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
|
||||
always credit us, but that is not mandatory.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -1,8 +1,22 @@
|
||||
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./mini.css"><title>Snippets Archive - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>function scrollToTop(){
|
||||
const c = document.querySelector('html').scrollTop;
|
||||
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./style.css"><title>Snippets Archive - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>const search = (node) => {
|
||||
let matchingTags = [];
|
||||
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if(data.includes(true)){
|
||||
x.style.display = '';
|
||||
matchingTags.push(x.getAttribute('tags').split(',')[0]);
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
|
||||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||||
})
|
||||
}
|
||||
function scrollToTop(){
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('html').scrollTo(0, c - c / 4);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
@ -21,13 +35,25 @@
|
||||
};
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if(window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
@ -46,26 +72,17 @@
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
else if (event.target.classList.contains('scroll-to-top')){
|
||||
scrollToTop();
|
||||
}
|
||||
else if (event.target.classList.contains('sublink-1')){
|
||||
if(event.target.getAttribute("href").includes('./')) return;
|
||||
event.preventDefault();
|
||||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
}
|
||||
}, false);
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><div id="splash"><h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</a></h1><p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/>that you can understand in 30 seconds or less.</p><p id="doc-link"><a href="./array" class="button">View collection</a></p></div><div class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><h2 class="index-section">Snippets Archive</h2><p style="text-align:justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="binarysearch.md" class="section double-padded">binarySearch</h3><div class="section double-padded"><p>Use recursion. Similar to <code>Array.indexOf()</code> that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or <code>Array.indexOf()</code>.</p><p>Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return <code>-1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><main class="col-centered"><span id="top"><br><br></span><h2 class="category-name">Snippets Archive</h2><p style="text-align:justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/><div class="card code-card"><div class="section card-content"><h4 id="binarysearch.md">binarySearch</h4><p>Use recursion. Similar to <code>Array.indexOf()</code> that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or <code>Array.indexOf()</code>.</p><p>Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return <code>-1</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>start <span class="token operator">></span> end<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> mid <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">((</span>start <span class="token operator">+</span> end<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">);</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator">></span> val<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">binarySearch</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start<span class="token punctuation">,</span> mid <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator"><</span> val<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">binarySearch</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> mid <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> end<span class="token punctuation">);</span>
|
||||
<span class="token keyword">return</span> mid<span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">binarySearch</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">],</span> <span class="token number">6</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">binarySearch</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">],</span> <span class="token number">6</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
||||
<span class="token function">binarySearch</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">],</span> <span class="token number">21</span><span class="token punctuation">);</span> <span class="token comment">// -1</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="cleanobj.md" class="section double-padded">cleanObj</h3><div class="section double-padded"><p>Removes any properties except the ones specified from a JSON object.</p><p>Use <code>Object.keys()</code> method to loop over given JSON object and deleting keys that are not included in given array. If you pass a special key,<code>childIndicator</code>, it will search deeply apply the function to inner objects, too.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">cleanObj</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> keysToKeep <span class="token operator">=</span> <span class="token punctuation">[],</span> childIndicator<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="cleanobj.md">cleanObj</h4><p>Removes any properties except the ones specified from a JSON object.</p><p>Use <code>Object.keys()</code> method to loop over given JSON object and deleting keys that are not included in given array. If you pass a special key,<code>childIndicator</code>, it will search deeply apply the function to inner objects, too.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">cleanObj</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> keysToKeep <span class="token operator">=</span> <span class="token punctuation">[],</span> childIndicator<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">).</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> childIndicator<span class="token punctuation">) {</span>
|
||||
<span class="token function">cleanObj</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">],</span> keysToKeep<span class="token punctuation">,</span> childIndicator<span class="token punctuation">);
|
||||
@ -75,14 +92,14 @@
|
||||
});</span>
|
||||
<span class="token keyword">return</span> obj<span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> testObj <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> children<span class="token punctuation">: {</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">} };</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token keyword">const</span> testObj <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> children<span class="token punctuation">: {</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">} };</span>
|
||||
<span class="token function">cleanObj</span><span class="token punctuation">(</span>testObj<span class="token punctuation">, [</span><span class="token string">'a'</span><span class="token punctuation">],</span> <span class="token string">'children'</span><span class="token punctuation">);</span> <span class="token comment">// { a: 1, children : { a: 1}}</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="collatz.md" class="section double-padded">collatz</h3><div class="section double-padded"><p>Applies the Collatz algorithm.</p><p>If <code>n</code> is even, return <code>n/2</code>. Otherwise, return <code>3n+1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">collatz</span> <span class="token operator">=</span> n <span class="token operator">=></span> <span class="token punctuation">(</span>n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> n <span class="token operator">/</span> <span class="token number">2</span> <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token operator">*</span> n <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">collatz</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">);</span> <span class="token comment">// 4</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="countvowels.md" class="section double-padded">countVowels</h3><div class="section double-padded"><p>Retuns <code>number</code> of vowels in provided string.</p><p>Use a regular expression to count the number of vowels <code>(A, E, I, O, U)</code> in a <code>string</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">countVowels</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[aeiou]/gi</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[]).</span>length<span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">countVowels</span><span class="token punctuation">(</span><span class="token string">'foobar'</span><span class="token punctuation">);</span> <span class="token comment">// 3</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="collatz.md">collatz</h4><p>Applies the Collatz algorithm.</p><p>If <code>n</code> is even, return <code>n/2</code>. Otherwise, return <code>3n+1</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">collatz</span> <span class="token operator">=</span> n <span class="token operator">=></span> <span class="token punctuation">(</span>n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> n <span class="token operator">/</span> <span class="token number">2</span> <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token operator">*</span> n <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">collatz</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">);</span> <span class="token comment">// 4</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="countvowels.md">countVowels</h4><p>Retuns <code>number</code> of vowels in provided string.</p><p>Use a regular expression to count the number of vowels <code>(A, E, I, O, U)</code> in a <code>string</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">countVowels</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[aeiou]/gi</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[]).</span>length<span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">countVowels</span><span class="token punctuation">(</span><span class="token string">'foobar'</span><span class="token punctuation">);</span> <span class="token comment">// 3</span>
|
||||
<span class="token function">countVowels</span><span class="token punctuation">(</span><span class="token string">'gym'</span><span class="token punctuation">);</span> <span class="token comment">// 0</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="factors.md" class="section double-padded">factors</h3><div class="section double-padded"><p>Returns the array of factors of the given <code>num</code>. If the second argument is set to <code>true</code> returns only the prime factors of <code>num</code>. If <code>num</code> is <code>1</code> or <code>0</code> returns an empty array. If <code>num</code> is less than <code>0</code> returns all the factors of <code>-int</code> together with their additive inverses.</p><p>Use <code>Array.from()</code>, <code>Array.map()</code> and <code>Array.filter()</code> to find all the factors of <code>num</code>. If given <code>num</code> is negative, use <code>Array.reduce()</code> to add the additive inverses to the array. Return all results if <code>primes</code> is <code>false</code>, else determine and return only the prime factors using <code>isPrime</code> and <code>Array.filter()</code>. Omit the second argument, <code>primes</code>, to return prime and non-prime factors by default.</p><p><strong>Note</strong>:- <em>Negative numbers are not considered prime.</em></p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">factors</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> primes <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="factors.md">factors</h4><p>Returns the array of factors of the given <code>num</code>. If the second argument is set to <code>true</code> returns only the prime factors of <code>num</code>. If <code>num</code> is <code>1</code> or <code>0</code> returns an empty array. If <code>num</code> is less than <code>0</code> returns all the factors of <code>-int</code> together with their additive inverses.</p><p>Use <code>Array.from()</code>, <code>Array.map()</code> and <code>Array.filter()</code> to find all the factors of <code>num</code>. If given <code>num</code> is negative, use <code>Array.reduce()</code> to add the additive inverses to the array. Return all results if <code>primes</code> is <code>false</code>, else determine and return only the prime factors using <code>isPrime</code> and <code>Array.filter()</code>. Omit the second argument, <code>primes</code>, to return prime and non-prime factors by default.</p><p><strong>Note</strong>:- <em>Negative numbers are not considered prime.</em></p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">factors</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> primes <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">isPrime</span> <span class="token operator">=</span> num <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> boundary <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>num<span class="token punctuation">));</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> boundary<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>num <span class="token operator">%</span> i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||||
@ -101,22 +118,22 @@
|
||||
}, []);</span>
|
||||
<span class="token keyword">return</span> primes <span class="token operator">?</span> array<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>isPrime<span class="token punctuation">) :</span> array<span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">factors</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">);</span> <span class="token comment">// [2,3,4,6,12]</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">factors</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">);</span> <span class="token comment">// [2,3,4,6,12]</span>
|
||||
<span class="token function">factors</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// [2,3]</span>
|
||||
<span class="token function">factors</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">12</span><span class="token punctuation">);</span> <span class="token comment">// [2, -2, 3, -3, 4, -4, 6, -6, 12, -12]</span>
|
||||
<span class="token function">factors</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// [2,3]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="fibonaccicountuntilnum.md" class="section double-padded">fibonacciCountUntilNum</h3><div class="section double-padded"><p>Returns the number of fibonnacci numbers up to <code>num</code>(<code>0</code> and <code>num</code> inclusive).</p><p>Use a mathematical formula to calculate the number of fibonacci numbers until <code>num</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fibonacciCountUntilNum</span> <span class="token operator">=</span> num <span class="token operator">=></span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="fibonaccicountuntilnum.md">fibonacciCountUntilNum</h4><p>Returns the number of fibonnacci numbers up to <code>num</code>(<code>0</code> and <code>num</code> inclusive).</p><p>Use a mathematical formula to calculate the number of fibonacci numbers until <code>num</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">fibonacciCountUntilNum</span> <span class="token operator">=</span> num <span class="token operator">=></span>
|
||||
Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">((</span>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">));</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">fibonacciCountUntilNum</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// 7</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="fibonacciuntilnum.md" class="section double-padded">fibonacciUntilNum</h3><div class="section double-padded"><p>Generates an array, containing the Fibonacci sequence, up until the nth term.</p><p>Create an empty array of the specific length, initializing the first two values (<code>0</code> and <code>1</code>). Use <code>Array.reduce()</code> to add values into the array, using the sum of the last two values, except for the first two. Uses a mathematical formula to calculate the length of the array required.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fibonacciUntilNum</span> <span class="token operator">=</span> num <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">fibonacciCountUntilNum</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// 7</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="fibonacciuntilnum.md">fibonacciUntilNum</h4><p>Generates an array, containing the Fibonacci sequence, up until the nth term.</p><p>Create an empty array of the specific length, initializing the first two values (<code>0</code> and <code>1</code>). Use <code>Array.reduce()</code> to add values into the array, using the sum of the last two values, except for the first two. Uses a mathematical formula to calculate the length of the array required.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">fibonacciUntilNum</span> <span class="token operator">=</span> num <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> n <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">((</span>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">));</span>
|
||||
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> n <span class="token punctuation">}).</span><span class="token function">reduce</span><span class="token punctuation">(
|
||||
(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> acc<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> acc<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">] :</span> i<span class="token punctuation">),
|
||||
[]
|
||||
);
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">fibonacciUntilNum</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// [ 0, 1, 1, 2, 3, 5, 8 ]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="howmanytimes.md" class="section double-padded">howManyTimes</h3><div class="section double-padded"><p>Returns the number of times <code>num</code> can be divided by <code>divisor</code> (integer or fractional) without getting a fractional answer. Works for both negative and positive integers.</p><p>If <code>divisor</code> is <code>-1</code> or <code>1</code> return <code>Infinity</code>. If <code>divisor</code> is <code>-0</code> or <code>0</code> return <code>0</code>. Otherwise, keep dividing <code>num</code> with <code>divisor</code> and incrementing <code>i</code>, while the result is an integer. Return the number of times the loop was executed, <code>i</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">howManyTimes</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> divisor<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">fibonacciUntilNum</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// [ 0, 1, 1, 2, 3, 5, 8 ]</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="howmanytimes.md">howManyTimes</h4><p>Returns the number of times <code>num</code> can be divided by <code>divisor</code> (integer or fractional) without getting a fractional answer. Works for both negative and positive integers.</p><p>If <code>divisor</code> is <code>-1</code> or <code>1</code> return <code>Infinity</code>. If <code>divisor</code> is <code>-0</code> or <code>0</code> return <code>0</code>. Otherwise, keep dividing <code>num</code> with <code>divisor</code> and incrementing <code>i</code>, while the result is an integer. Return the number of times the loop was executed, <code>i</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">howManyTimes</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> divisor<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>divisor <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> divisor <span class="token operator">=== -</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>divisor <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
@ -126,21 +143,21 @@
|
||||
}</span>
|
||||
<span class="token keyword">return</span> i<span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">howManyTimes</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">howManyTimes</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
||||
<span class="token function">howManyTimes</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">2.5</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
||||
<span class="token function">howManyTimes</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// 0</span>
|
||||
<span class="token function">howManyTimes</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// Infinity</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="httpdelete.md" class="section double-padded">httpDelete</h3><div class="section double-padded"><p>Makes a <code>DELETE</code> request to the passed URL.</p><p>Use <code>XMLHttpRequest</code> web api to make a <code>delete</code> request to the given <code>url</code>. Handle the <code>onload</code> event, by running the provided <code>callback</code> function. Handle the <code>onerror</code> event, by running the provided <code>err</code> function. Omit the third argument, <code>err</code> to log the request to the console's error stream by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpDelete</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> err <span class="token operator">=</span> console<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="httpdelete.md">httpDelete</h4><p>Makes a <code>DELETE</code> request to the passed URL.</p><p>Use <code>XMLHttpRequest</code> web api to make a <code>delete</code> request to the given <code>url</code>. Handle the <code>onload</code> event, by running the provided <code>callback</code> function. Handle the <code>onerror</code> event, by running the provided <code>err</code> function. Omit the third argument, <code>err</code> to log the request to the console's error stream by default.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpDelete</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> err <span class="token operator">=</span> console<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">();</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"DELETE"</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span>
|
||||
request<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span>request<span class="token punctuation">);</span>
|
||||
request<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">err</span><span class="token punctuation">(</span>request<span class="token punctuation">);</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">();
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">httpDelete</span><span class="token punctuation">(</span><span class="token string">'https://website.com/users/123'</span><span class="token punctuation">,</span> request <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">httpDelete</span><span class="token punctuation">(</span><span class="token string">'https://website.com/users/123'</span><span class="token punctuation">,</span> request <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>responseText<span class="token punctuation">);
|
||||
});</span> <span class="token comment">// 'Deletes a user from the database'</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="httpput.md" class="section double-padded">httpPut</h3><div class="section double-padded"><p>Makes a <code>PUT</code> request to the passed URL.</p><p>Use <code>XMLHttpRequest</code> web api to make a <code>put</code> request to the given <code>url</code>. Set the value of an <code>HTTP</code> request header with <code>setRequestHeader</code> method. Handle the <code>onload</code> event, by running the provided <code>callback</code> function. Handle the <code>onerror</code> event, by running the provided <code>err</code> function. Omit the last argument, <code>err</code> to log the request to the console's error stream by default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpPut</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> err <span class="token operator">=</span> console<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="httpput.md">httpPut</h4><p>Makes a <code>PUT</code> request to the passed URL.</p><p>Use <code>XMLHttpRequest</code> web api to make a <code>put</code> request to the given <code>url</code>. Set the value of an <code>HTTP</code> request header with <code>setRequestHeader</code> method. Handle the <code>onload</code> event, by running the provided <code>callback</code> function. Handle the <code>onerror</code> event, by running the provided <code>err</code> function. Omit the last argument, <code>err</code> to log the request to the console's error stream by default.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpPut</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> err <span class="token operator">=</span> console<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">();</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"PUT"</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">'Content-type'</span><span class="token punctuation">,</span><span class="token string">'application/json; charset=utf-8'</span><span class="token punctuation">);</span>
|
||||
@ -148,29 +165,29 @@
|
||||
request<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token function">err</span><span class="token punctuation">(</span>request<span class="token punctuation">);</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>data<span class="token punctuation">);
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token string">"fooBaz"</span><span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token string">"fooBaz"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>password<span class="token punctuation">);</span>
|
||||
<span class="token function">httpPut</span><span class="token punctuation">(</span><span class="token string">'https://website.com/users/123'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> request <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>responseText<span class="token punctuation">);
|
||||
});</span> <span class="token comment">// 'Updates a user's password in database'</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="isarmstrongnumber.md" class="section double-padded">isArmstrongNumber</h3><div class="section double-padded"><p>Checks if the given number is an Armstrong number or not.</p><p>Convert the given number into an array of digits. Use the exponent operator (<code>**</code>) to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return <code>true</code> otherwise <code>false</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isArmstrongNumber</span> <span class="token operator">=</span> digits <span class="token operator">=></span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="isarmstrongnumber.md">isArmstrongNumber</h4><p>Checks if the given number is an Armstrong number or not.</p><p>Convert the given number into an array of digits. Use the exponent operator (<code>**</code>) to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return <code>true</code> otherwise <code>false</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">isArmstrongNumber</span> <span class="token operator">=</span> digits <span class="token operator">=></span>
|
||||
<span class="token punctuation">(</span>arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> d<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token operator">**</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">==</span> digits<span class="token punctuation">)(
|
||||
(</span>digits <span class="token operator">+</span> <span class="token string">''</span><span class="token punctuation">).</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)
|
||||
);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isArmstrongNumber</span><span class="token punctuation">(</span><span class="token number">1634</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">isArmstrongNumber</span><span class="token punctuation">(</span><span class="token number">1634</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
<span class="token function">isArmstrongNumber</span><span class="token punctuation">(</span><span class="token number">56</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="issimilar.md" class="section double-padded">isSimilar</h3><div class="section double-padded"><p>Determines if the <code>pattern</code> matches with <code>str</code>.</p><p>Use <code>String.toLowerCase()</code> to convert both strings to lowercase, then loop through <code>str</code> and determine if it contains all characters of <code>pattern</code> and in the correct order. Adapted from <a href="https://github.com/forrestthewoods/lib_fts/blob/80f3f8c52db53428247e741b9efe2cde9667050c/code/fts_fuzzy_match.js#L18">here</a>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isSimilar</span> <span class="token operator">=</span> <span class="token punctuation">(</span>pattern<span class="token punctuation">,</span> str<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="issimilar.md">isSimilar</h4><p>Determines if the <code>pattern</code> matches with <code>str</code>.</p><p>Use <code>String.toLowerCase()</code> to convert both strings to lowercase, then loop through <code>str</code> and determine if it contains all characters of <code>pattern</code> and in the correct order. Adapted from <a href="https://github.com/forrestthewoods/lib_fts/blob/80f3f8c52db53428247e741b9efe2cde9667050c/code/fts_fuzzy_match.js#L18">here</a>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">isSimilar</span> <span class="token operator">=</span> <span class="token punctuation">(</span>pattern<span class="token punctuation">,</span> str<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">].</span><span class="token function">reduce</span><span class="token punctuation">(
|
||||
(</span>matchIndex<span class="token punctuation">,</span> char<span class="token punctuation">)</span> <span class="token operator">=></span> char<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">()</span> <span class="token operator">===</span> <span class="token punctuation">(</span>pattern<span class="token punctuation">[</span>matchIndex<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">).</span><span class="token function">toLowerCase</span><span class="token punctuation">()</span> <span class="token operator">?</span> matchIndex <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">:</span> matchIndex<span class="token punctuation">,</span> <span class="token number">0</span>
|
||||
<span class="token punctuation">)</span> <span class="token operator">===</span> pattern<span class="token punctuation">.</span>length <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isSimilar</span><span class="token punctuation">(</span><span class="token string">'rt'</span><span class="token punctuation">,</span><span class="token string">'Rohit'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">isSimilar</span><span class="token punctuation">(</span><span class="token string">'rt'</span><span class="token punctuation">,</span><span class="token string">'Rohit'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
<span class="token function">isSimilar</span><span class="token punctuation">(</span><span class="token string">'tr'</span><span class="token punctuation">,</span><span class="token string">'Rohit'</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="jsontodate.md" class="section double-padded">JSONToDate</h3><div class="section double-padded"><p>Converts a JSON object to a date.</p><p>Use <code>Date()</code>, to convert dates in JSON format to readable format (<code>dd/mm/yyyy</code>).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">JSONToDate</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="jsontodate.md">JSONToDate</h4><p>Converts a JSON object to a date.</p><p>Use <code>Date()</code>, to convert dates in JSON format to readable format (<code>dd/mm/yyyy</code>).</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">JSONToDate</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> dt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">().</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)));</span>
|
||||
<span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dt<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">()</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dt<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">()</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dt<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">()</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">JSONToDate</span><span class="token punctuation">(</span><span class="token regex">/Date(1489525200000)/</span><span class="token punctuation">);</span> <span class="token comment">// "14/3/2017"</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="levenshteindistance.md" class="section double-padded">levenshteinDistance</h3><div class="section double-padded"><p>Calculates the <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance</a> between two strings.</p><p>Calculates the number of changes (substitutions, deletions or additions) required to convert <code>string1</code> to <code>string2</code>. Can also be used to compare two strings as shown in the second example.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">levenshteinDistance</span> <span class="token operator">=</span> <span class="token punctuation">(</span>string1<span class="token punctuation">,</span> string2<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">JSONToDate</span><span class="token punctuation">(</span><span class="token regex">/Date(1489525200000)/</span><span class="token punctuation">);</span> <span class="token comment">// "14/3/2017"</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="levenshteindistance.md">levenshteinDistance</h4><p>Calculates the <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance</a> between two strings.</p><p>Calculates the number of changes (substitutions, deletions or additions) required to convert <code>string1</code> to <code>string2</code>. Can also be used to compare two strings as shown in the second example.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">levenshteinDistance</span> <span class="token operator">=</span> <span class="token punctuation">(</span>string1<span class="token punctuation">,</span> string2<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span><span class="token punctuation">(</span>string1<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> string2<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span><span class="token punctuation">(</span>string2<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> string1<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> matrix <span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span>string2<span class="token punctuation">.</span>length <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">).</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">).</span><span class="token function">map</span><span class="token punctuation">((</span>x<span class="token punctuation">,</span>i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>i<span class="token punctuation">]);</span>
|
||||
@ -187,10 +204,10 @@
|
||||
}</span>
|
||||
<span class="token keyword">return</span> matrix<span class="token punctuation">[</span>string2<span class="token punctuation">.</span>length<span class="token punctuation">][</span>string1<span class="token punctuation">.</span>length<span class="token punctuation">];
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">levenshteinDistance</span><span class="token punctuation">(</span><span class="token string">'30-seconds-of-code'</span><span class="token punctuation">,</span><span class="token string">'30-seconds-of-python-code'</span><span class="token punctuation">);</span> <span class="token comment">// 7</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">levenshteinDistance</span><span class="token punctuation">(</span><span class="token string">'30-seconds-of-code'</span><span class="token punctuation">,</span><span class="token string">'30-seconds-of-python-code'</span><span class="token punctuation">);</span> <span class="token comment">// 7</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">compareStrings</span> <span class="token operator">=</span> <span class="token punctuation">(</span>string1<span class="token punctuation">,</span>string2<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token number">100</span> <span class="token operator">-</span> <span class="token function">levenshteinDistance</span><span class="token punctuation">(</span>string1<span class="token punctuation">,</span>string2<span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>string1<span class="token punctuation">.</span>length<span class="token punctuation">,</span>string2<span class="token punctuation">.</span>length<span class="token punctuation">));</span>
|
||||
<span class="token function">compareStrings</span><span class="token punctuation">(</span><span class="token string">'30-seconds-of-code'</span><span class="token punctuation">,</span> <span class="token string">'30-seconds-of-python-code'</span><span class="token punctuation">);</span> <span class="token comment">// 99.72 (%)</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="quicksort.md" class="section double-padded">quickSort</h3><div class="section double-padded"><p>QuickSort an Array (ascending sort by default).</p><p>Use recursion. Use <code>Array.filter</code> and spread operator (<code>...</code>) to create an array that all elements with values less than the pivot come before the pivot, and all elements with values greater than the pivot come after it. If the parameter <code>desc</code> is truthy, return array sorts in descending order.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">quickSort</span> <span class="token operator">=</span> <span class="token punctuation">([</span>n<span class="token punctuation">,</span> <span class="token operator">...</span>nums<span class="token punctuation">],</span> desc<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="quicksort.md">quickSort</h4><p>QuickSort an Array (ascending sort by default).</p><p>Use recursion. Use <code>Array.filter</code> and spread operator (<code>...</code>) to create an array that all elements with values less than the pivot come before the pivot, and all elements with values greater than the pivot come after it. If the parameter <code>desc</code> is truthy, return array sorts in descending order.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">quickSort</span> <span class="token operator">=</span> <span class="token punctuation">([</span>n<span class="token punctuation">,</span> <span class="token operator">...</span>nums<span class="token punctuation">],</span> desc<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<span class="token function">isNaN</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span>
|
||||
<span class="token operator">?</span> <span class="token punctuation">[]
|
||||
: [</span>
|
||||
@ -198,12 +215,12 @@
|
||||
n<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span><span class="token function">quickSort</span><span class="token punctuation">(</span>nums<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>desc <span class="token operator">?</span> v <span class="token operator">></span> n <span class="token punctuation">:</span> v <span class="token operator"><=</span> n<span class="token punctuation">)),</span> desc<span class="token punctuation">)
|
||||
];</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">quickSort</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2,3,4]</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">quickSort</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2,3,4]</span>
|
||||
<span class="token function">quickSort</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">],</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// [4,3,2,1]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="removevowels.md" class="section double-padded">removeVowels</h3><div class="section double-padded"><p>Returns all the vowels in a <code>str</code> replaced by <code>repl</code>.</p><p>Use <code>String.replace()</code> with a regexp to replace all vowels in <code>str</code>. Omot <code>repl</code> to use a default value of <code>''</code>.</p><pre class="language-js"><span class="token keyword">const</span> removeVowels <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> repl <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[aeiou]/gi</span><span class="token punctuation">,</span>repl<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">removeVowels</span><span class="token punctuation">(</span><span class="token string">"foobAr"</span><span class="token punctuation">);</span> <span class="token comment">// "fbr"</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="removevowels.md">removeVowels</h4><p>Returns all the vowels in a <code>str</code> replaced by <code>repl</code>.</p><p>Use <code>String.replace()</code> with a regexp to replace all vowels in <code>str</code>. Omot <code>repl</code> to use a default value of <code>''</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> removeVowels <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> repl <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[aeiou]/gi</span><span class="token punctuation">,</span>repl<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">removeVowels</span><span class="token punctuation">(</span><span class="token string">"foobAr"</span><span class="token punctuation">);</span> <span class="token comment">// "fbr"</span>
|
||||
<span class="token function">removeVowels</span><span class="token punctuation">(</span><span class="token string">"foobAr"</span><span class="token punctuation">,</span><span class="token string">"*"</span><span class="token punctuation">);</span> <span class="token comment">// "f**b*r"</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="solverpn.md" class="section double-padded">solveRPN</h3><div class="section double-padded"><p>Solves the given mathematical expression in <a href="https://en.wikipedia.org/wiki/Reverse_Polish_notation">reverse polish notation</a>. Throws appropriate errors if there are unrecognized symbols or the expression is wrong. The valid operators are :- <code>+</code>,<code>-</code>,<code>*</code>,<code>/</code>,<code>^</code>,<code>**</code> (<code>^</code>&<code>**</code> are the exponential symbols and are same). This snippet does not supports any unary operators.</p><p>Use a dictionary, <code>OPERATORS</code> to specify each operator's matching mathematical operation. Use <code>String.replace()</code> with a regular expression to replace <code>^</code> with <code>**</code>, <code>String.split()</code> to tokenize the string and <code>Array.filter()</code> to remove empty tokens. Use <code>Array.forEach()</code> to parse each <code>symbol</code>, evaluate it as a numeric value or operator and solve the mathematical expression. Numeric values are converted to floating point numbers and pushed to a <code>stack</code>, while operators are evaluated using the <code>OPERATORS</code> dictionary and pop elements from the <code>stack</code> to apply operations.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">solveRPN</span> <span class="token operator">=</span> rpn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="solverpn.md">solveRPN</h4><p>Solves the given mathematical expression in <a href="https://en.wikipedia.org/wiki/Reverse_Polish_notation">reverse polish notation</a>. Throws appropriate errors if there are unrecognized symbols or the expression is wrong. The valid operators are :- <code>+</code>,<code>-</code>,<code>*</code>,<code>/</code>,<code>^</code>,<code>**</code> (<code>^</code>&<code>**</code> are the exponential symbols and are same). This snippet does not supports any unary operators.</p><p>Use a dictionary, <code>OPERATORS</code> to specify each operator's matching mathematical operation. Use <code>String.replace()</code> with a regular expression to replace <code>^</code> with <code>**</code>, <code>String.split()</code> to tokenize the string and <code>Array.filter()</code> to remove empty tokens. Use <code>Array.forEach()</code> to parse each <code>symbol</code>, evaluate it as a numeric value or operator and solve the mathematical expression. Numeric values are converted to floating point numbers and pushed to a <code>stack</code>, while operators are evaluated using the <code>OPERATORS</code> dictionary and pop elements from the <code>stack</code> to apply operations.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">solveRPN</span> <span class="token operator">=</span> rpn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token constant">OPERATORS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">'*'</span><span class="token punctuation">: (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">*</span> b<span class="token punctuation">,</span>
|
||||
<span class="token string">'+'</span><span class="token punctuation">: (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b<span class="token punctuation">,</span>
|
||||
@ -231,12 +248,12 @@
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>stack<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> stack<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">();</span>
|
||||
<span class="token keyword">else throw</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rpn<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is not a proper RPN. Please check it and try again`</span></span><span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">solveRPN</span><span class="token punctuation">(</span><span class="token string">'15 7 1 1 + - / 3 * 2 1 1 + + -'</span><span class="token punctuation">);</span> <span class="token comment">// 5</span>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">solveRPN</span><span class="token punctuation">(</span><span class="token string">'15 7 1 1 + - / 3 * 2 1 1 + + -'</span><span class="token punctuation">);</span> <span class="token comment">// 5</span>
|
||||
<span class="token function">solveRPN</span><span class="token punctuation">(</span><span class="token string">'2 3 ^'</span><span class="token punctuation">);</span> <span class="token comment">// 8</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="speechsynthesis.md" class="section double-padded">speechSynthesis</h3><div class="section double-padded"><p>Performs speech synthesis (experimental).</p><p>Use <code>SpeechSynthesisUtterance.voice</code> and <code>window.speechSynthesis.getVoices()</code> to convert a message to speech. Use <code>window.speechSynthesis.speak()</code> to play the message.</p><p>Learn more about the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance">SpeechSynthesisUtterance interface of the Web Speech API</a>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">speechSynthesis</span> <span class="token operator">=</span> message <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
</pre></div><div class="card code-card"><div class="section card-content"><h4 id="speechsynthesis.md">speechSynthesis</h4><p>Performs speech synthesis (experimental).</p><p>Use <code>SpeechSynthesisUtterance.voice</code> and <code>window.speechSynthesis.getVoices()</code> to convert a message to speech. Use <code>window.speechSynthesis.speak()</code> to play the message.</p><p>Learn more about the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance">SpeechSynthesisUtterance interface of the Web Speech API</a>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">speechSynthesis</span> <span class="token operator">=</span> message <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SpeechSynthesisUtterance</span><span class="token punctuation">(</span>message<span class="token punctuation">);</span>
|
||||
msg<span class="token punctuation">.</span>voice <span class="token operator">=</span> window<span class="token punctuation">.</span>speechSynthesis<span class="token punctuation">.</span><span class="token function">getVoices</span><span class="token punctuation">()[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
||||
window<span class="token punctuation">.</span>speechSynthesis<span class="token punctuation">.</span><span class="token function">speak</span><span class="token punctuation">(</span>msg<span class="token punctuation">);
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">speechSynthesis</span><span class="token punctuation">(</span><span class="token string">'Hello, World'</span><span class="token punctuation">);</span> <span class="token comment">// // plays the message</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div></div><button class="scroll-to-top">↑</button><br/><footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align:sub;padding-right:2px;padding-left:2px" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer></body></html>
|
||||
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">speechSynthesis</span><span class="token punctuation">(</span><span class="token string">'Hello, World'</span><span class="token punctuation">);</span> <span class="token comment">// // plays the message</span>
|
||||
</pre></div></main><footer class="col-full-width container"><div class="col-centered"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align:sub;padding-right:2px;padding-left:2px" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p><br/><p style="display:inline-block"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a href="./archive">Archive</a> <a href="./glossary">Glossary</a></p></div></footer><a class="scroll-to-top" href="#top"></a></div></body></html>
|
||||
@ -1,150 +0,0 @@
|
||||
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./mini.css"><title>Snippets for Beginners - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Stefan Feješ (stefanfejes.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>function scrollToTop(){
|
||||
const c = document.querySelector('html').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('html').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
if (duration <= 0) return;
|
||||
var difference = to - element.scrollTop;
|
||||
var perTick = difference / duration * 40;
|
||||
|
||||
setTimeout(function() {
|
||||
element.scrollTop = element.scrollTop + perTick;
|
||||
if (element.scrollTop === to) {
|
||||
window.location.href = "#"+id;
|
||||
return;
|
||||
}
|
||||
scrollTo(element, to, id, duration - 40);
|
||||
}, 40);
|
||||
};
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(textArea);
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function() {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(tst);
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
else if (event.target.classList.contains('scroll-to-top')){
|
||||
scrollToTop();
|
||||
}
|
||||
else if (event.target.classList.contains('sublink-1')){
|
||||
if(event.target.getAttribute("href").includes('./')) return;
|
||||
event.preventDefault();
|
||||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
}
|
||||
}, false);
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><div id="splash"><h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</a></h1><p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/>that you can understand in 30 seconds or less.</p><p id="doc-link"><a href="./array" class="button">View collection</a></p></div><div class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><h2 class="index-section">Snippets for Beginners</h2><p style="text-align:justify">The following section is aimed towards individuals who are at the start of their web developer journey. Each snippet in the next section is simple yet very educational for newcomers. This section is by no means a complete resource for learning modern JavaScript. However, it is enough to grasp some common concepts and use cases. We also strongly recommend checking out <a href="https://developer.mozilla.org/bm/docs/Web/JavaScript">MDN web docs</a> as a learning resource.</p><br/></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="allequal.md" class="section double-padded">allEqual</h3><div class="section double-padded"><p>Check if all elements are equal</p><p>Use <code>Array.every()</code> to check if all the elements of the array are the same as the first one.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">allEqual</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>val <span class="token operator">=></span> val <span class="token operator">===</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">allEqual</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]);</span> <span class="token comment">// false</span>
|
||||
<span class="token function">allEqual</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]);</span> <span class="token comment">// true</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="currenturl.md" class="section double-padded">currentURL</h3><div class="section double-padded"><p>Returns the current URL.</p><p>Use <code>window.location.href</code> to get current URL.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">currentURL</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">currentURL</span><span class="token punctuation">();</span> <span class="token comment">// 'https://google.com'</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="everynth.md" class="section double-padded">everyNth</h3><div class="section double-padded"><p>Returns every nth element in an array.</p><p>Use <code>Array.filter()</code> to create a new array that contains every nth element of a given array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">everyNth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> nth<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">((</span>e<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">%</span> nth <span class="token operator">===</span> nth <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">everyNth</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [ 2, 4, 6 ]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="factorial.md" class="section double-padded">factorial</h3><div class="section double-padded"><p>Calculates the factorial of a number.</p><p>Use recursion. If <code>n</code> is less than or equal to <code>1</code>, return <code>1</code>. Otherwise, return the product of <code>n</code> and the factorial of <code>n - 1</code>. Throws an exception if <code>n</code> is a negative number.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">factorial</span> <span class="token operator">=</span> n <span class="token operator">=></span>
|
||||
n <span class="token operator"><</span> <span class="token number">0</span>
|
||||
<span class="token operator">?</span> <span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">throw new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token string">'Negative numbers are not allowed!'</span><span class="token punctuation">);
|
||||
})()
|
||||
:</span> n <span class="token operator"><=</span> <span class="token number">1</span>
|
||||
<span class="token operator">?</span> <span class="token number">1</span>
|
||||
<span class="token punctuation">:</span> n <span class="token operator">*</span> <span class="token function">factorial</span><span class="token punctuation">(</span>n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">factorial</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">);</span> <span class="token comment">// 720</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="fibonacci.md" class="section double-padded">fibonacci</h3><div class="section double-padded"><p>Generates an array, containing the Fibonacci sequence, up until the nth term.</p><p>Create an empty array of the specific length, initializing the first two values (<code>0</code> and <code>1</code>). Use <code>Array.reduce()</code> to add values into the array, using the sum of the last two values, except for the first two.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fibonacci</span> <span class="token operator">=</span> n <span class="token operator">=></span>
|
||||
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> n <span class="token punctuation">}).</span><span class="token function">reduce</span><span class="token punctuation">(
|
||||
(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> acc<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> acc<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">] :</span> i<span class="token punctuation">),
|
||||
[]
|
||||
);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">fibonacci</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">);</span> <span class="token comment">// [0, 1, 1, 2, 3, 5]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="filternonunique.md" class="section double-padded">filterNonUnique</h3><div class="section double-padded"><p>Filters out the non-unique values in an array.</p><p>Use <code>Array.filter()</code> for an array containing only the unique values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">filterNonUnique</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>i <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">===</span> arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">));</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">filterNonUnique</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1,3,5]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="gcd.md" class="section double-padded">gcd</h3><div class="section double-padded"><p>Calculates the greatest common divisor between two or more numbers/arrays.</p><p>The inner <code>_gcd</code> function uses recursion. Base case is when <code>y</code> equals <code>0</code>. In this case, return <code>x</code>. Otherwise, return the GCD of <code>y</code> and the remainder of the division <code>x/y</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">gcd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">_gcd</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>y <span class="token operator">?</span> x <span class="token punctuation">:</span> <span class="token function">gcd</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> x <span class="token operator">%</span> y<span class="token punctuation">));</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">_gcd</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">));
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">gcd</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">);</span> <span class="token comment">// 4</span>
|
||||
<span class="token function">gcd</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">]);</span> <span class="token comment">// 4</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="getmeridiemsuffixofinteger.md" class="section double-padded">getMeridiemSuffixOfInteger</h3><div class="section double-padded"><p>Converts an integer to a suffixed string, adding <code>am</code> or <code>pm</code> based on its value.</p><p>Use the modulo operator (<code>%</code>) and conditional checks to transform an integer to a stringified 12-hour format with meridiem suffix.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">getMeridiemSuffixOfInteger</span> <span class="token operator">=</span> num <span class="token operator">=></span>
|
||||
num <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">||</span> num <span class="token operator">===</span> <span class="token number">24</span>
|
||||
<span class="token operator">?</span> <span class="token number">12</span> <span class="token operator">+</span> <span class="token string">'am'</span>
|
||||
<span class="token punctuation">:</span> num <span class="token operator">===</span> <span class="token number">12</span>
|
||||
<span class="token operator">?</span> <span class="token number">12</span> <span class="token operator">+</span> <span class="token string">'pm'</span>
|
||||
<span class="token punctuation">:</span> num <span class="token operator"><</span> <span class="token number">12</span>
|
||||
<span class="token operator">?</span> <span class="token punctuation">(</span>num <span class="token operator">%</span> <span class="token number">12</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'am'</span>
|
||||
<span class="token punctuation">: (</span>num <span class="token operator">%</span> <span class="token number">12</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'pm'</span><span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// "12am"</span>
|
||||
<span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">);</span> <span class="token comment">// "11am"</span>
|
||||
<span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">);</span> <span class="token comment">// "1pm"</span>
|
||||
<span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">);</span> <span class="token comment">// "1pm"</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="hasclass.md" class="section double-padded">hasClass</h3><div class="section double-padded"><p>Returns <code>true</code> if the element has the specified class, <code>false</code> otherwise.</p><p>Use <code>element.classList.contains()</code> to check if the element has the specified class.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hasClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>className<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hasClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">),</span> <span class="token string">'special'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="isdivisible.md" class="section double-padded">isDivisible</h3><div class="section double-padded"><p>Checks if the first numeric argument is divisible by the second one.</p><p>Use the modulo operator (<code>%</code>) to check if the remainder is equal to <code>0</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isDivisible</span> <span class="token operator">=</span> <span class="token punctuation">(</span>dividend<span class="token punctuation">,</span> divisor<span class="token punctuation">)</span> <span class="token operator">=></span> dividend <span class="token operator">%</span> divisor <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isDivisible</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="iseven.md" class="section double-padded">isEven</h3><div class="section double-padded"><p>Returns <code>true</code> if the given number is even, <code>false</code> otherwise.</p><p>Checks whether a number is odd or even using the modulo (<code>%</code>) operator. Returns <code>true</code> if the number is even, <code>false</code> if the number is odd.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> num <span class="token operator">=></span> num <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isEven</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="isprime.md" class="section double-padded">isPrime</h3><div class="section double-padded"><p>Checks if the provided integer is a prime number.</p><p>Check numbers from <code>2</code> to the square root of the given number. Return <code>false</code> if any of them divides the given number, else return <code>true</code>, unless the number is less than <code>2</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isPrime</span> <span class="token operator">=</span> num <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> boundary <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>num<span class="token punctuation">));</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> boundary<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>num <span class="token operator">%</span> i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> num <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">;
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isPrime</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="last.md" class="section double-padded">last</h3><div class="section double-padded"><p>Returns the last element in an array.</p><p>Use <code>arr.length - 1</code> to compute the index of the last element of the given array and returning it.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">last</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">];</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">last</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// 3</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="lcm.md" class="section double-padded">lcm</h3><div class="section double-padded"><p>Returns the least common multiple of two or more numbers.</p><p>Use the greatest common divisor (GCD) formula and the fact that <code>lcm(x,y) = x * y / gcd(x,y)</code> to determine the least common multiple. The GCD formula uses recursion.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">lcm</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">gcd</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>y <span class="token operator">?</span> x <span class="token punctuation">:</span> <span class="token function">gcd</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> x <span class="token operator">%</span> y<span class="token punctuation">));</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">_lcm</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>x <span class="token operator">*</span> y<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token function">gcd</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">);</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">_lcm</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">));
|
||||
};</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">lcm</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">);</span> <span class="token comment">// 84</span>
|
||||
<span class="token function">lcm</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// 60</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="maxn.md" class="section double-padded">maxN</h3><div class="section double-padded"><p>Returns the <code>n</code> maximum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in descending order).</p><p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in descending order. Use <code>Array.slice()</code> to get the specified number of elements. Omit the second argument, <code>n</code>, to get a one-element array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">maxN</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> b <span class="token operator">-</span> a<span class="token punctuation">).</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">maxN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [3]</span>
|
||||
<span class="token function">maxN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3,2]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="minn.md" class="section double-padded">minN</h3><div class="section double-padded"><p>Returns the <code>n</code> minimum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in ascending order).</p><p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in ascending order. Use <code>Array.slice()</code> to get the specified number of elements. Omit the second argument, <code>n</code>, to get a one-element array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">minN</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">).</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">minN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [1]</span>
|
||||
<span class="token function">minN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [1,2]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="nthelement.md" class="section double-padded">nthElement</h3><div class="section double-padded"><p>Returns the nth element of an array.</p><p>Use <code>Array.slice()</code> to get an array containing the nth element at the first place. If the index is out of bounds, return <code>undefined</code>. Omit the second argument, <code>n</code>, to get the first element of the array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">nthElement</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>n <span class="token operator">=== -</span><span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">) :</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span> n <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">))[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">nthElement</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">],</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 'b'</span>
|
||||
<span class="token function">nthElement</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">],</span> <span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// 'a'</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="offset.md" class="section double-padded">offset</h3><div class="section double-padded"><p>Moves the specified amount of elements to the end of the array.</p><p>Use <code>Array.slice()</code> twice to get the elements after the specified index and the elements before that. Use the spread operator(<code>...</code>) to combine the two into one array. If <code>offset</code> is negative, the elements will be moved from end to start.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">offset</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> offset<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>offset<span class="token punctuation">),</span> <span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> offset<span class="token punctuation">)];</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">offset</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3, 4, 5, 1, 2]</span>
|
||||
<span class="token function">offset</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">],</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [4, 5, 1, 2, 3]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="randomintegerinrange.md" class="section double-padded">randomIntegerInRange</h3><div class="section double-padded"><p>Returns a random integer in the specified range.</p><p>Use <code>Math.random()</code> to generate a random number and map it to the desired range, using <code>Math.floor()</code> to make it an integer.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">randomIntegerInRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>min<span class="token punctuation">,</span> max<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">))</span> <span class="token operator">+</span> min<span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">randomIntegerInRange</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="reversestring.md" class="section double-padded">reverseString</h3><div class="section double-padded"><p>Reverses a string.</p><p>Use the spread operator (<code>...</code>) and <code>Array.reverse()</code> to reverse the order of the characters in the string. Combine characters to get a string using <code>String.join('')</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">reverseString</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">].</span><span class="token function">reverse</span><span class="token punctuation">().</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token string">'foobar'</span><span class="token punctuation">);</span> <span class="token comment">// 'raboof'</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="sample.md" class="section double-padded">sample</h3><div class="section double-padded"><p>Returns a random element from an array.</p><p>Use <code>Math.random()</code> to generate a random number, multiply it by <code>length</code> and round it of to the nearest whole number using <code>Math.floor()</code>. This method also works with strings.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sample</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">)];</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sample</span><span class="token punctuation">([</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">]);</span> <span class="token comment">// 9</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="similarity.md" class="section double-padded">similarity</h3><div class="section double-padded"><p>Returns an array of elements that appear in both arrays.</p><p>Use <code>Array.filter()</code> to remove values that are not part of <code>values</code>, determined using <code>Array.includes()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">similarity</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>v <span class="token operator">=></span> values<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">similarity</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="sum.md" class="section double-padded">sum</h3><div class="section double-padded"><p>Returns the sum of two or more numbers/arrays.</p><p>Use <code>Array.reduce()</code> to add each value to an accumulator, initialized with a value of <code>0</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> acc <span class="token operator">+</span> val<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// 10</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="tail.md" class="section double-padded">tail</h3><div class="section double-padded"><p>Returns all elements in an array except for the first one.</p><p>Return <code>Array.slice(1)</code> if the array's <code>length</code> is more than <code>1</code>, otherwise, return the whole array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">tail</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">) :</span> arr<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">tail</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [2,3]</span>
|
||||
<span class="token function">tail</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">]);</span> <span class="token comment">// [1]</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="truncatestring.md" class="section double-padded">truncateString</h3><div class="section double-padded"><p>Truncates a string up to a specified length.</p><p>Determine if the string's <code>length</code> is greater than <code>num</code>. Return the string truncated to the desired length, with <code>'...'</code> appended to the end or the original string.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">truncateString</span> <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> num<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
str<span class="token punctuation">.</span>length <span class="token operator">></span> num <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> num <span class="token operator">></span> <span class="token number">3</span> <span class="token operator">?</span> num <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'...'</span> <span class="token punctuation">:</span> str<span class="token punctuation">;</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">truncateString</span><span class="token punctuation">(</span><span class="token string">'boomerang'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">);</span> <span class="token comment">// 'boom...'</span>
|
||||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div></div></div></div><button class="scroll-to-top">↑</button><br/><footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align:sub;padding-right:2px;padding-left:2px" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer></body></html>
|
||||
File diff suppressed because one or more lines are too long
79
docs/contributing.html
Normal file
79
docs/contributing.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Contributing - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">How to contribute</h2>
|
||||
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p><br/>
|
||||
<h3 class="category-name">1. Create</h3>
|
||||
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippet-template.md">snippet template</a>. Make sure to follow these simple guidelines:</p>
|
||||
<ul style="text-align: justify">
|
||||
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
|
||||
<li>Use the snippet description to explain what your snippet does and how it works.</li>
|
||||
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
|
||||
<li>Remember to provide an example of how your snippet works.</li>
|
||||
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
|
||||
<li>Never modify README.md or any of the HTML files.</li>
|
||||
</ul><br />
|
||||
<h3 class="category-name">2. Tag</h3>
|
||||
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemented function.</p><br />
|
||||
<h3 class="category-name">3. Test</h3>
|
||||
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p><br />
|
||||
<h3 class="category-name">4. Pull request</h3>
|
||||
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
76
docs/glossary.html
Normal file
76
docs/glossary.html
Normal file
File diff suppressed because one or more lines are too long
672
docs/index.html
672
docs/index.html
File diff suppressed because one or more lines are too long
188
docs/math.html
188
docs/math.html
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,354 +0,0 @@
|
||||
/*
|
||||
Definitions for contextual background elements, toasts and tooltips.
|
||||
*/
|
||||
$mark-back-color: #0277bd !default; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa !default; // Text color for <mark>
|
||||
$mark-font-size: 0.95em !default; // Font size for <mark>
|
||||
$mark-line-height: 1em !default; // Line height for <mark>
|
||||
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
|
||||
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
|
||||
$toast-name: 'toast' !default; // Class name for toast component
|
||||
$toast-back-color: #424242 !default; // Background color for toast component
|
||||
$toast-fore-color: #fafafa !default; // Text color for toast component
|
||||
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
|
||||
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
|
||||
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
$tooltip-back-color: #212121 !default; // Background color for tooltip component
|
||||
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
|
||||
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
|
||||
$modal-name: 'modal' !default; // Class name for modal dialog component
|
||||
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
|
||||
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
|
||||
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
|
||||
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
|
||||
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
|
||||
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
|
||||
$collapse-name: 'collapse' !default; // Class name for collapse component
|
||||
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
|
||||
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
|
||||
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
|
||||
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
|
||||
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
|
||||
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
|
||||
$collapse-border-color: #ddd !default; // Border color for collapse component
|
||||
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
|
||||
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$mark-back-color-var: '--mark-back-color' !default;
|
||||
$mark-fore-color-var: '--mark-fore-color' !default;
|
||||
$toast-back-color-var: '--toast-back-color' !default;
|
||||
$toast-fore-color-var: '--toast-fore-color' !default;
|
||||
$tooltip-back-color-var: '--tooltip-back-color' !default;
|
||||
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
|
||||
$modal-overlay-color-var: '--modal-overlay-color' !default;
|
||||
$modal-close-color-var: '--modal-close-color' !default;
|
||||
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
|
||||
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
|
||||
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
|
||||
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
|
||||
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
|
||||
$collapse-border-color-var: '--collapse-border-color' !default;
|
||||
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
|
||||
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $base-line-height: 1.5 !default; // Line height for most elements
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_contextual_mixins.scss` file to find this module's mixins.
|
||||
@import '_contextual_mixins';
|
||||
/* Contextual module CSS variable definitions */
|
||||
:root {
|
||||
#{$mark-back-color-var}: $mark-back-color;
|
||||
#{$mark-fore-color-var}: $mark-fore-color;
|
||||
}
|
||||
// Default styling for mark. Use mixins for alternate styles.
|
||||
mark {
|
||||
background: var(#{$mark-back-color-var});
|
||||
color: var(#{$mark-fore-color-var});
|
||||
font-size: $mark-font-size;
|
||||
line-height: $mark-line-height;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
&.#{$mark-inline-block-name} {
|
||||
display: inline-block;
|
||||
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
|
||||
font-size: 1em;
|
||||
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
|
||||
line-height: $base-line-height;
|
||||
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
|
||||
}
|
||||
}
|
||||
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
|
||||
@if $_include-toast {
|
||||
:root {
|
||||
#{$toast-back-color-var}: $toast-back-color;
|
||||
#{$toast-fore-color-var}: $toast-fore-color;
|
||||
}
|
||||
.#{$toast-name} {
|
||||
position: fixed;
|
||||
bottom: calc(var(#{$universal-margin-var}) * 3);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1111;
|
||||
color: var(#{$toast-fore-color-var});
|
||||
background: var(#{$toast-back-color-var});
|
||||
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
|
||||
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for tooltips.
|
||||
@if $_include-tooltip {
|
||||
:root {
|
||||
#{$tooltip-back-color-var}: $tooltip-back-color;
|
||||
#{$tooltip-fore-color-var}: $tooltip-fore-color;
|
||||
}
|
||||
.#{$tooltip-name} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
transition: all 0.3s;
|
||||
// Remember to keep this index a lower value than the one used for stickies.
|
||||
z-index: 1010; // Deals with certain problems when combined with cards and tables.
|
||||
left: 50%;
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
bottom: 75%;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
top: 75%;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
&:before { // This is the little tooltip triangle
|
||||
content: '';
|
||||
background: transparent;
|
||||
border: var(#{$universal-margin-var}) solid transparent;
|
||||
// Newer browsers will center the tail properly
|
||||
left: calc(50% - var(#{$universal-margin-var}));
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: $tooltip-back-color;
|
||||
}
|
||||
&:after { // This is the actual tooltip's text block
|
||||
content: attr(aria-label);
|
||||
color: var(#{$tooltip-fore-color-var});
|
||||
background: var(#{$tooltip-back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for modal dialogs.
|
||||
@if $_include-modal {
|
||||
:root {
|
||||
#{$modal-overlay-color-var}: $modal-overlay-color;
|
||||
#{$modal-close-color-var}: $modal-close-color;
|
||||
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
|
||||
}
|
||||
[type="checkbox"].#{$modal-name} {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
& + div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(#{$modal-overlay-color-var});
|
||||
& .card {
|
||||
margin: 0 auto;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
& .#{$modal-close-name} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $modal-close-size;
|
||||
height: $modal-close-size;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:before {
|
||||
display: block;
|
||||
content: '\00D7';
|
||||
color: var(#{$modal-close-color-var});
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-size: $modal-close-size;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$modal-close-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + div {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
z-index: 1200;
|
||||
& .card {
|
||||
& .#{$modal-close-name} {
|
||||
z-index: 1211;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for collapse.
|
||||
@if $_include-collapse {
|
||||
:root {
|
||||
#{$collapse-label-back-color-var}: $collapse-label-back-color;
|
||||
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
|
||||
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
|
||||
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
|
||||
#{$collapse-border-color-var}: $collapse-border-color;
|
||||
#{$collapse-content-back-color-var} : $collapse-content-back-color;
|
||||
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
|
||||
}
|
||||
.#{$collapse-name} {
|
||||
width: calc(100% - 2 * var(#{$universal-margin-var}));
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: var(#{$universal-margin-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
& > [type="radio"], & > [type="checkbox"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
& > label {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
height: $collapse-label-height;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
color: var(#{$collapse-label-fore-color-var});
|
||||
background: var(#{$collapse-label-back-color-var});
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
&:hover, &:focus {
|
||||
background: var(#{$collapse-label-hover-back-color-var});
|
||||
}
|
||||
+ div {
|
||||
flex-basis: auto;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
transition: max-height 0.3s;
|
||||
max-height: 1px; // for transition
|
||||
}
|
||||
}
|
||||
> :checked + label {
|
||||
background: var(#{$collapse-selected-label-back-color-var});
|
||||
// border: 0.0625rem solid #bdbdbd; // var it
|
||||
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
||||
& + div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
background: var(#{$collapse-content-back-color-var});
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
border-top: 0;
|
||||
padding: var(#{$universal-padding-var});
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
max-height: $collapse-content-max-height;
|
||||
}
|
||||
}
|
||||
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
|
||||
border-top: 0;
|
||||
}
|
||||
& > label:first-of-type {
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
|
||||
}
|
||||
& > label:last-of-type:not(:first-of-type) {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
|
||||
}
|
||||
& > label:last-of-type:first-of-type {
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
}
|
||||
& > :checked:last-of-type:not(:first-of-type) + label {
|
||||
border-radius: 0;
|
||||
}
|
||||
& > :checked:last-of-type + label + div {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
// Contextual module's mixin definitions are here. For the module itself
|
||||
// check `_contextual.scss`.
|
||||
// Mark color variant mixin:
|
||||
// $mark-alt-name: The name of the class used for the <mark> variant.
|
||||
// $mark-alt-back-color: Background color for <mark> variant.
|
||||
// $mark-alt-fore-color: Text color for <mark> variant.
|
||||
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
|
||||
$mark-alt-fore-color : $mark-fore-color) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-back-color != $mark-back-color {
|
||||
#{$mark-back-color-var}: $mark-alt-back-color;
|
||||
}
|
||||
@if $mark-alt-fore-color != $mark-fore-color{
|
||||
#{$mark-fore-color-var}: $mark-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mark size variant mixin:
|
||||
// $mark-alt-name: The name of the class used for the <mark> variant.
|
||||
// $mark-alt-padding: The padding of the <mark> variant.
|
||||
// $mark-alt-border-radius: The border radius of the <mark> variant.
|
||||
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
|
||||
mark.#{$mark-alt-name} {
|
||||
padding: $mark-alt-padding;
|
||||
border-radius: $mark-alt-border-radius;
|
||||
}
|
||||
}
|
||||
@ -1,304 +0,0 @@
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
|
||||
// TODO: Add fluid type and test thoroughly
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
|
||||
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
|
||||
$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
|
||||
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
|
||||
$base-line-height: 1.5 !default; // Line height for most elements
|
||||
$base-font-size: 1rem !default; // Font sizing for all elements
|
||||
$_body-margin: 0 !default; // [Hidden] Margin for body
|
||||
$fore-color: #111 !default; // Text & foreground color
|
||||
$secondary-fore-color: #444 !default; // Secondary text & foreground color
|
||||
$back-color: #f8f8f8 !default; // Background color
|
||||
$secondary-back-color: #f0f0f0 !default; // Secondary background color
|
||||
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
|
||||
$pre-color: #1565c0 !default; // <pre> sidebar color
|
||||
$border-color: #aaa !default; // Border color
|
||||
$secondary-border-color: #ddd !default; // Secondary border color
|
||||
$heading-line-height: 1.2 !default; // Line height for headings
|
||||
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
|
||||
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
|
||||
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
|
||||
$universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
$universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
$universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
$small-font-size: 0.75em !default; // Font sizing for <small> elements
|
||||
$heading-font-weight: 500 !default; // Font weight for headings
|
||||
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
|
||||
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
|
||||
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
|
||||
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
|
||||
$code-font-size: 0.85em; // Font size for <code>, <kbd>
|
||||
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
|
||||
$sup-top: -0.5em !default; // <sup> top
|
||||
$sub-bottom: -0.25em !default; // <sub> bottom
|
||||
$a-link-color: #0277bd !default; // Color for <a>:link
|
||||
$a-visited-color: #01579b !default; // Color for <a>:visited
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$fore-color-var: '--fore-color' !default;
|
||||
$secondary-fore-color-var: '--secondary-fore-color' !default;
|
||||
$back-color-var: '--back-color' !default;
|
||||
$secondary-back-color-var: '--secondary-back-color' !default;
|
||||
$blockquote-color-var: '--blockquote-color' !default;
|
||||
$pre-color-var: '--pre-color' !default;
|
||||
$border-color-var: '--border-color' !default;
|
||||
$secondary-border-color-var: '--secondary-border-color' !default;
|
||||
$heading-ratio-var: '--heading-ratio' !default;
|
||||
$universal-margin-var: '--universal-margin' !default;
|
||||
$universal-padding-var: '--universal-padding' !default;
|
||||
$universal-border-radius-var: '--universal-border-radius' !default;
|
||||
$universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
$a-link-color-var: '--a-link-color' !default;
|
||||
$a-visited-color-var: '--a-visited-color' !default;
|
||||
/* Core module CSS variable definitions */
|
||||
:root {
|
||||
#{$fore-color-var}: $fore-color;
|
||||
#{$secondary-fore-color-var}: $secondary-fore-color;
|
||||
#{$back-color-var}: $back-color;
|
||||
#{$secondary-back-color-var}: $secondary-back-color;
|
||||
#{$blockquote-color-var}: $blockquote-color;
|
||||
#{$pre-color-var}: $pre-color;
|
||||
#{$border-color-var}: $border-color;
|
||||
#{$secondary-border-color-var}: $secondary-border-color;
|
||||
#{$heading-ratio-var}: $heading-ratio;
|
||||
#{$universal-margin-var}: $universal-margin;
|
||||
#{$universal-padding-var}: $universal-padding;
|
||||
#{$universal-border-radius-var}: $universal-border-radius;
|
||||
#{$a-link-color-var} : $a-link-color;
|
||||
#{$a-visited-color-var} : $a-visited-color;
|
||||
@if $universal-box-shadow != none {
|
||||
#{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
a, b, del, em, i, ins, q, span, strong, u {
|
||||
font-size: 1em; // Fix for elements inside headings not displaying properly.
|
||||
}
|
||||
|
||||
@if $_apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $_body-margin;
|
||||
color: var(#{$fore-color-var});
|
||||
background: var(#{$back-color-var});
|
||||
}
|
||||
|
||||
// Correct display for Edge & Firefox.
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Show overflow in Edge.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
display: block;
|
||||
@if $subheading-top-margin != 0 {
|
||||
margin-top: $subheading-top-margin;
|
||||
}
|
||||
@if $subheading-font-size != $small-font-size {
|
||||
font-size: $subheading-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h3 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h4 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: calc(1rem / var(#{$heading-ratio-var}));
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding-left: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: var(#{$universal-margin-var});
|
||||
height: $__1px;
|
||||
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
|
||||
}
|
||||
|
||||
blockquote { // Doesn't have a back color by default, can be added manually.
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: calc(3 * var(#{$universal-padding-var}));
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 6*$__1px solid var(#{$blockquote-color-var});
|
||||
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(0rem - var(#{$universal-padding-var}));
|
||||
left: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: $blockquote-quotation-size;
|
||||
font-weight: 700;
|
||||
content: "\201c";
|
||||
color: var(#{$blockquote-color-var});
|
||||
}
|
||||
&[cite]:after{
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-size;
|
||||
font-weight: 700;
|
||||
content: "\a— " attr(cite);
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
code, kbd, pre, samp {
|
||||
font-family: #{$code-font-family}; // Display fix should be applied manually!
|
||||
font-size: $code-font-size;
|
||||
}
|
||||
|
||||
code { // No border color by default and fore color is the default for text, can be altered manually.
|
||||
background: var(#{$secondary-back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
kbd { // No border color by default, can be altered manually.
|
||||
background: var(#{$fore-color-var});
|
||||
color: var(#{$back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
pre { // Fore color is the default, can be altered manually.
|
||||
overflow: auto; // Responsiveness
|
||||
background: var(#{$secondary-back-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 4*$__1px solid var(#{$pre-color-var});
|
||||
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent elements from affecting the line height in all browsers.
|
||||
sup, sub, code, kbd {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
small, sup, sub, figcaption {
|
||||
font-size: $small-element-font-size;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
figcaption {
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:link{
|
||||
color: var(#{$a-link-color-var});
|
||||
}
|
||||
&:visited {
|
||||
color: var(#{$a-visited-color-var});
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -1,317 +0,0 @@
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$input-group-name: 'input-group' !default; // Class name for input groups.
|
||||
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
|
||||
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
|
||||
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
|
||||
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
|
||||
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
|
||||
$button-group-name: 'button-group' !default; // Class name for button groups.
|
||||
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
|
||||
$form-back-color: #f0f0f0 !default; // Background color for forms.
|
||||
$form-fore-color: #111 !default; // Text color for forms.
|
||||
$form-border-color: #ddd !default; // Border color for forms.
|
||||
$input-back-color: #f8f8f8 !default; // Background color for input elements.
|
||||
$input-fore-color: #111 !default; // Text color for input elements.
|
||||
$input-border-color: #ddd !default; // Border color for input elements.
|
||||
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
|
||||
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
|
||||
$button-back-color: #e2e2e2 !default; // Background color for buttons.
|
||||
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
|
||||
$button-fore-color: #212121 !default; // Text color for buttons.
|
||||
$button-border-color: transparent !default; // Border color for buttons.
|
||||
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
|
||||
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$form-back-color-var: '--form-back-color' !default;
|
||||
$form-fore-color-var: '--form-fore-color' !default;
|
||||
$form-border-color-var: '--form-border-color' !default;
|
||||
$input-back-color-var: '--input-back-color' !default;
|
||||
$input-fore-color-var: '--input-fore-color' !default;
|
||||
$input-border-color-var: '--input-border-color' !default;
|
||||
$input-focus-color-var: '--input-focus-color' !default;
|
||||
$input-invalid-color-var: '--input-invalid-color' !default;
|
||||
$button-back-color-var: '--button-back-color' !default;
|
||||
$button-hover-back-color-var: '--button-hover-back-color' !default;
|
||||
$button-fore-color-var: '--button-fore-color' !default;
|
||||
$button-border-color-var: '--button-border-color' !default;
|
||||
$button-hover-border-color-var: '--button-hover-border-color' !default;
|
||||
$button-group-border-color-var: '--button-group-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $base-font-size: 1rem !default; // Font sizing for all elements
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
||||
@import 'input_control_mixins';
|
||||
/* Input_control module CSS variable definitions */
|
||||
:root {
|
||||
#{$form-back-color-var}: $form-back-color;
|
||||
#{$form-fore-color-var}: $form-fore-color;
|
||||
#{$form-border-color-var}: $form-border-color;
|
||||
#{$input-back-color-var}: $input-back-color;
|
||||
#{$input-fore-color-var}: $input-fore-color;
|
||||
#{$input-border-color-var}: $input-border-color;
|
||||
#{$input-focus-color-var}: $input-focus-color;
|
||||
#{$input-invalid-color-var}: $input-invalid-color;
|
||||
#{$button-back-color-var}: $button-back-color;
|
||||
#{$button-hover-back-color-var}: $button-hover-back-color;
|
||||
#{$button-fore-color-var}: $button-fore-color;
|
||||
#{$button-border-color-var}: $button-border-color;
|
||||
#{$button-hover-border-color-var}: $button-hover-border-color;
|
||||
#{$button-group-border-color-var}: $button-group-border-color;
|
||||
}
|
||||
// Base form styling
|
||||
form { // Text color is the default, this can be changed manually.
|
||||
background: var(#{$form-back-color-var});
|
||||
color: var(#{$form-fore-color-var});
|
||||
border: $__1px solid var(#{$form-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
// Fieldset styling
|
||||
fieldset {
|
||||
// Apply always to overwrite defaults for all of the below.
|
||||
border: $__1px solid var(#{$form-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 4);
|
||||
padding: var(#{$universal-padding-var});
|
||||
}
|
||||
// Legend styling.
|
||||
legend {
|
||||
// Edge fixes.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// Actual styling.
|
||||
font-weight: $bold-font-weight;
|
||||
padding: calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Label syling. - Basically just padding, but there might be more in the future.
|
||||
label {
|
||||
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
|
||||
}
|
||||
// Input group styling.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
// Fluid input groups
|
||||
@if $_include-fluid-input-group {
|
||||
&.#{$input-group-fluid-name} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
& > input {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
// On mobile
|
||||
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// Vertical input groups
|
||||
&.#{$input-group-vertical-name} {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
& > input {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// Common textual input styling. - Avoid using box-shadow with these.
|
||||
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
||||
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
|
||||
box-sizing: border-box;
|
||||
// Background, color and border should not be unassigned, as the browser defaults will apply.
|
||||
background: var(#{$input-back-color-var});
|
||||
color: var(#{$input-fore-color-var});
|
||||
border: $__1px solid var(#{$input-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 2);
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
|
||||
&:hover, &:focus {
|
||||
border-color: var(#{$input-focus-color-var});
|
||||
box-shadow: none;
|
||||
}
|
||||
&:invalid, &:focus:invalid{
|
||||
border-color: var(#{$input-invalid-color-var});
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: var(#{$secondary-back-color-var});
|
||||
}
|
||||
}
|
||||
// Fix for select and option elements overflowing their parent container.
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
option {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// Styling for checkboxes and radio buttons.
|
||||
[type="checkbox"], [type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
vertical-align: text-bottom;
|
||||
padding: 0; // Remove padding added from previous styles.
|
||||
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
|
||||
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
|
||||
&:checked:before {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
[type="checkbox"] {
|
||||
&:checked:before {
|
||||
content: '\2713';
|
||||
font-family: sans-serif;
|
||||
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
top: calc(0rem - var(#{$universal-padding-var}));
|
||||
left: calc(var(#{$universal-padding-var}) / 4);
|
||||
}
|
||||
}
|
||||
[type="radio"] {
|
||||
border-radius: 100%;
|
||||
&:checked:before {
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
|
||||
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
|
||||
background: var(#{$input-fore-color-var});
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
:placeholder-shown {
|
||||
color: var(#{$input-fore-color-var});
|
||||
}
|
||||
::-ms-placeholder {
|
||||
color: var(#{$input-fore-color-var});
|
||||
opacity: 0.54;
|
||||
}
|
||||
// Definitions for the button and button-like elements.
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Reset for Firefox focusing on button elements.
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// Fixes for Android 4, iOS and Safari.
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
// Other fixes.
|
||||
button {
|
||||
overflow: visible; // Show the overflow in IE.
|
||||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
}
|
||||
// Default styling
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: var(#{$button-back-color-var});
|
||||
color: var(#{$button-fore-color-var});
|
||||
border: $__1px solid var(#{$button-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
background: var(#{$button-hover-back-color-var});
|
||||
border-color: var(#{$button-hover-border-color-var});
|
||||
}
|
||||
}
|
||||
// Disabled styling for input and button elements.
|
||||
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
|
||||
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Button group styling.
|
||||
.#{$button-group-name} {
|
||||
display: flex;
|
||||
border: $__1px solid var(#{$button-group-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
|
||||
& > .#{$button-class-name}, & > [role="button"] {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
& > :not(:first-child) {
|
||||
border-left: $__1px solid var(#{$button-group-border-color-var});
|
||||
}
|
||||
// Responsiveness for button groups
|
||||
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
|
||||
flex-direction: column;
|
||||
& > :not(:first-child) {
|
||||
border: 0; // Reapply to remove the left border from elements.
|
||||
border-top: $__1px solid var(#{$button-group-border-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
// Input_control module's mixin definitions are here. For the module itself
|
||||
// check `_input_control.scss`.
|
||||
// Button color variant mixin:
|
||||
// $button-alt-name: The name of the class used for the button variant.
|
||||
// $button-alt-back-color: Background color for button variant.
|
||||
// $button-alt-hover-back-color: Background color for button variant (hover).
|
||||
// $button-alt-fore-color: Text color for button variant.
|
||||
// $button-alt-border-color: Border color for button variant.
|
||||
// $button-alt-hover-border-color: Border color for button variant (hover).
|
||||
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
|
||||
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
|
||||
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
|
||||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
@if $button-alt-back-color != $button-back-color {
|
||||
#{$button-back-color-var}: $button-alt-back-color;
|
||||
}
|
||||
@if $button-alt-fore-color != $button-fore-color{
|
||||
#{$button-fore-color-var}: $button-alt-fore-color;
|
||||
}
|
||||
@if $button-alt-border-color != $button-border-color{
|
||||
#{$button-border-color-var}: $button-alt-border-color;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
@if $button-alt-hover-back-color != $button-hover-back-color{
|
||||
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
|
||||
}
|
||||
@if $button-alt-hover-border-color != $button-hover-border-color{
|
||||
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Button size variant mixin:
|
||||
// $button-alt-name: The name of the class used for the button variant.
|
||||
// $button-alt-padding: The padding of the button variant.
|
||||
// $button-alt-margin The margin of the button variant.
|
||||
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
|
||||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
padding: $button-alt-padding;
|
||||
margin: $button-alt-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,199 +0,0 @@
|
||||
/*
|
||||
Definitions for the grid system, cards and containers.
|
||||
*/
|
||||
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
|
||||
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
|
||||
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
|
||||
$grid-container-name: 'container' !default; // Class name for the grid system container.
|
||||
$grid-row-name: 'row' !default; // Class name for the grid system rows.
|
||||
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
|
||||
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
|
||||
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
|
||||
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
|
||||
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
|
||||
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
|
||||
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
|
||||
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
|
||||
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
|
||||
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
|
||||
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
|
||||
$card-name: 'card' !default; // Class name for the cards.
|
||||
$card-section-name: 'section' !default; // Class name for the cards' sections.
|
||||
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
|
||||
$card-normal-width: 320px !default; // Width for normal cards.
|
||||
$card-section-media-height: 200px !default; // Height for cards' media sections.
|
||||
$card-fore-color: #111 !default; // Text color for the cards.
|
||||
$card-back-color: #f8f8f8 !default; // Background color for the cards.
|
||||
$card-border-color: #ddd !default; // Border color for the cards.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$card-fore-color-var: '--card-fore-color' !default;
|
||||
$card-back-color-var: '--card-back-color' !default;
|
||||
$card-border-color-var: '--card-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_layout_mixins.scss` file to find this module's mixins.
|
||||
@import 'layout_mixins';
|
||||
// Fluid grid system container definition.
|
||||
.#{$grid-container-name} {
|
||||
margin: 0 auto;
|
||||
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
// Grid row definition.
|
||||
.#{$grid-row-name} {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
// Inline mixin, used to generate class definitions for each grid step.
|
||||
@mixin generate-grid-size ($size-prefix){
|
||||
@if $_include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$size-prefix} {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $_include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
// Offest definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
|
||||
@if ($i - 1) == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Reordering definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// Definitions for smaller screens.
|
||||
@include generate-grid-size($grid-small-prefix);
|
||||
// Definitions for medium screens.
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
@include generate-grid-size($grid-medium-prefix);
|
||||
}
|
||||
// Definitions for large screens.
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
@include generate-grid-size($grid-large-prefix);
|
||||
}
|
||||
/* Card component CSS variable definitions */
|
||||
:root {
|
||||
#{$card-back-color-var}: $card-back-color;
|
||||
#{$card-fore-color-var}: $card-fore-color;
|
||||
#{$card-border-color-var}: $card-border-color;
|
||||
}
|
||||
// Card styling
|
||||
.#{$card-name} {
|
||||
// New syntax
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// Actual styling for the cards
|
||||
background: var(#{$card-back-color-var});
|
||||
color: var(#{$card-fore-color-var});
|
||||
border: $__1px solid var(#{$card-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
overflow: hidden; // Hide overflow from section borders
|
||||
// Responsiveness (if the screen is larger than card, set max-width)
|
||||
@media screen and (min-width: #{$card-normal-width}) {
|
||||
max-width: $card-normal-width;
|
||||
}
|
||||
// Card sections
|
||||
& > .#{$card-section-name} {
|
||||
// Reapply background and foreground colors, so that mixins can be applied properly.
|
||||
background: var(#{$card-back-color-var});
|
||||
color: var(#{$card-fore-color-var});
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-radius: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-bottom: $__1px solid var(#{$card-border-color-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
width: 100%;
|
||||
// Card media sections
|
||||
&.#{$card-section-media-name} {
|
||||
height: $card-section-media-height;
|
||||
padding: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
// Card sections - last
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
// Layout (card) module's mixin definitions are here. For the module itself
|
||||
// check `_layout.scss`.
|
||||
// Mixin for alternate card sizes:
|
||||
// $card-alt-size-name: The name of the class used for the alternate size card.
|
||||
// $card-alt-size-width: The width of the alternate size card.
|
||||
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
|
||||
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media screen and (min-width: #{$card-alt-size-width}) {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate cards (card color variants):
|
||||
// $card-alt-name: The name of the class used for the alternate card.
|
||||
// $card-alt-back-color: The background color of the alternate card.
|
||||
// $card-alt-fore-color: The text color of the alternate card.
|
||||
// $card-alt-border-color: The border style of the alternate card.
|
||||
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
|
||||
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
|
||||
.#{$card-name}.#{$card-alt-name} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
#{$card-back-color-var}: $card-alt-back-color;
|
||||
}
|
||||
@if $card-alt-fore-color != $card-fore-color {
|
||||
#{$card-fore-color-var}: $card-alt-fore-color;
|
||||
}
|
||||
@if $card-alt-border-color != $card-border-color {
|
||||
#{$card-border-color-var}: $card-alt-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants):
|
||||
// $card-section-alt-name: The name of the class used for the alternate card section.
|
||||
// $card-section-alt-back-color: The background color of the alternate card section.
|
||||
// $card-section-alt-fore-color: The text color of the alternate card section.
|
||||
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
|
||||
$card-section-alt-fore-color : $card-fore-color) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
@if $card-section-alt-back-color != $card-back-color {
|
||||
#{$card-back-color-var}: $card-section-alt-back-color;
|
||||
}
|
||||
@if $card-section-alt-fore-color != $card-fore-color {
|
||||
#{$card-fore-color-var}: $card-section-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section padding variants):
|
||||
// $card-section-alt-name: The name of the class used for the alternate card section.
|
||||
// $card-section-alt-padding: The padding of the alternate card section.
|
||||
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
@ -1,315 +0,0 @@
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$header-height: 3.1875rem !default; // Height of the header element.
|
||||
$header-back-color: #f8f8f8 !default; // Background color for the header element.
|
||||
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
|
||||
$header-fore-color: #444 !default; // Text color for the header element.
|
||||
$header-border-color: #ddd !default; // Border color for the header element.
|
||||
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
|
||||
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
|
||||
$nav-fore-color: #444 !default; // Text color for the nav element.
|
||||
$nav-border-color: #ddd !default; // Border color for the nav element.
|
||||
$nav-link-color: #0277bd !default; // Color for link in the nav element.
|
||||
$footer-fore-color: #444 !default; // Text color for the footer element.
|
||||
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
|
||||
$footer-border-color: #ddd !default; // Border color for the footer element.
|
||||
$footer-link-color: #0277bd !default; // Color for link in the footer element.
|
||||
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
|
||||
$drawer-border-color: #ddd !default; // Border color for the drawer component.
|
||||
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
|
||||
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
|
||||
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
|
||||
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
|
||||
$header-logo-name: 'logo' !default; // Class name for the header logo element.
|
||||
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
|
||||
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
|
||||
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
|
||||
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
|
||||
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
|
||||
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
|
||||
$drawer-name: 'drawer' !default; // Class name for the drawer component.
|
||||
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
|
||||
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
|
||||
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
|
||||
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
|
||||
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
|
||||
$drawer-width: 320px !default; // Width of the drawer component.
|
||||
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
|
||||
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
|
||||
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$header-fore-color-var: '--header-fore-color' !default;
|
||||
$header-back-color-var: '--header-back-color' !default;
|
||||
$header-hover-back-color-var: '--header-hover-back-color' !default;
|
||||
$header-border-color-var: '--header-border-color' !default;
|
||||
$nav-fore-color-var: '--nav-fore-color' !default;
|
||||
$nav-back-color-var: '--nav-back-color' !default;
|
||||
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
|
||||
$nav-border-color-var: '--nav-border-color' !default;
|
||||
$nav-link-color-var: '--nav-link-color' !default;
|
||||
$footer-fore-color-var: '--footer-fore-color' !default;
|
||||
$footer-back-color-var: '--footer-back-color' !default;
|
||||
$footer-border-color-var: '--footer-border-color' !default;
|
||||
$footer-link-color-var: '--footer-link-color' !default;
|
||||
$drawer-back-color-var: '--drawer-back-color' !default;
|
||||
$drawer-border-color-var: '--drawer-border-color' !default;
|
||||
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
|
||||
$drawer-close-color-var: '--drawer-close-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
/* Navigation module CSS variable definitions */
|
||||
:root {
|
||||
#{$header-back-color-var}: $header-back-color;
|
||||
#{$header-hover-back-color-var}: $header-hover-back-color;
|
||||
#{$header-fore-color-var}: $header-fore-color;
|
||||
#{$header-border-color-var}: $header-border-color;
|
||||
#{$nav-back-color-var}: $nav-back-color;
|
||||
#{$nav-hover-back-color-var}: $nav-hover-back-color;
|
||||
#{$nav-fore-color-var}: $nav-fore-color;
|
||||
#{$nav-border-color-var}: $nav-border-color;
|
||||
#{$nav-link-color-var}: $nav-link-color;
|
||||
#{$footer-fore-color-var}: $footer-fore-color;
|
||||
#{$footer-back-color-var}: $footer-back-color;
|
||||
#{$footer-border-color-var}: $footer-border-color;
|
||||
#{$footer-link-color-var}: $footer-link-color;
|
||||
#{$drawer-back-color-var}: $drawer-back-color;
|
||||
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
|
||||
#{$drawer-border-color-var}: $drawer-border-color;
|
||||
#{$drawer-close-color-var}: $drawer-close-color;
|
||||
}
|
||||
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
|
||||
header {
|
||||
height: $header-height;
|
||||
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
|
||||
color: var(#{$header-fore-color-var});
|
||||
@if $_header-only-bottom-border {
|
||||
border-bottom: $__1px solid var(#{$header-border-color-var});
|
||||
}
|
||||
@else {
|
||||
border: $__1px solid var(#{$header-border-color-var});
|
||||
}
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) 0;
|
||||
// Responsiveness for smaller displays, scrolls horizontally.
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// Fix for responsive header, using the grid system's row and column alignment.
|
||||
&.#{$grid-row-name} {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
// Header logo styling.
|
||||
.#{$header-logo-name} {
|
||||
color: var(#{$header-fore-color-var});
|
||||
font-size: $header-logo-font-size;
|
||||
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
|
||||
text-decoration: none;
|
||||
}
|
||||
// Link styling.
|
||||
button, [type="button"], .#{$button-class-name}, [role="button"] {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
|
||||
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
|
||||
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
|
||||
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
|
||||
text-align: center;
|
||||
color: var(#{$header-fore-color-var});
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
@if $_header-links-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$header-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
nav {
|
||||
background: var(#{$nav-back-color-var});
|
||||
color: var(#{$nav-fore-color-var});
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
* {
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
a, a:visited {
|
||||
display: block;
|
||||
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background: var(#{$nav-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
// Subcategories in navigation.
|
||||
@for $i from 1 through $nav-sublink-depth {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
position: relative;
|
||||
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
|
||||
top: -#{$__1px};
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Footer styling.
|
||||
footer {
|
||||
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
|
||||
color: var(#{$footer-fore-color-var});
|
||||
@if $_footer-only-top-border {
|
||||
border-top: $__1px solid var(#{$footer-border-color-var});
|
||||
}
|
||||
@else {
|
||||
border: $__1px solid var(#{$footer-border-color-var});
|
||||
}
|
||||
// margin: $footer-margin;
|
||||
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
|
||||
font-size: $footer-font-size;
|
||||
a, a:visited {
|
||||
color: var(#{$footer-link-color-var});
|
||||
}
|
||||
}
|
||||
// Definitions for sticky headers and footers.
|
||||
header.#{$sticky-name} {
|
||||
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
top: 0;
|
||||
}
|
||||
footer.#{$sticky-name} {
|
||||
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
bottom: 0;
|
||||
}
|
||||
// Responsive drawer component.
|
||||
.#{$drawer-toggle-name} {
|
||||
&:before { // No color specified, should use the color of its surroundings!
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"].#{$drawer-name} {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
+ * {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: var(#{$drawer-back-color-var});
|
||||
border: $__1px solid var(#{$drawer-border-color-var});
|
||||
border-radius: 0; // Set to 0 to override the value from `nav`.
|
||||
margin: 0; // Set to 0 to override the value from `nav`.
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
z-index: 1110;
|
||||
@if $_drawer-right {
|
||||
right: -$drawer-width;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
@else {
|
||||
left: -$drawer-width;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
& .#{$drawer-close-name} {
|
||||
position: absolute;
|
||||
top: var(#{$universal-margin-var});
|
||||
right: var(#{$universal-margin-var});
|
||||
z-index: 1111;
|
||||
width: $drawer-close-size;
|
||||
height: $drawer-close-size;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: 0; // Fixes the offset from label
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:before { // Transparent background unless hovered over. Does not block text behind it.
|
||||
display: block;
|
||||
content: '\00D7';
|
||||
color: var(#{$drawer-close-color-var});
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-close-size;
|
||||
line-height: 1; // Setting to 1 seems to center the 'X' properly.
|
||||
text-align: center;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$drawer-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$drawer-width}) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:checked + * {
|
||||
@if $_drawer-right {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) + * {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
& .#{$drawer-close-name} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
$progress-back-color: #ddd !default; // Background color of <progress>.
|
||||
$progress-fore-color: #555 !default; // Foreground color of <progress>.
|
||||
$progress-height: 0.75rem !default; // Height of <progress>.
|
||||
$progress-max-value: 1000 !default; // Arithmetic max value of <progress> - use integer values.
|
||||
$progress-inline-name: 'inline' !default; // Class name for inline <progress> elements.
|
||||
$progress-inline-width: 60% !default; // Width of inline <progress> elements.
|
||||
$_include-spinner-donut: true !default; // [Hidden] Should spinner donuts be included? (boolean)
|
||||
$spinner-donut-name: 'spinner' !default; // Class name for spinner donuts
|
||||
$spinner-donut-size: 1.25rem !default; // Size of the spinner donuts
|
||||
$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
|
||||
$spinner-donut-back-color: #ddd !default; // Background color for spinner donuts
|
||||
$spinner-donut-fore-color: #555 !default; // Foreground color for spinner donuts
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$progress-back-color-var: '--progress-back-color' !default;
|
||||
$progress-fore-color-var: '--progress-fore-color' !default;
|
||||
$spinner-donut-back-color-var: '--spinner-back-color' !default;
|
||||
$spinner-donut-fore-color-var: '--spinner-fore-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_progress_mixins.scss` file to find this module's mixins.
|
||||
@import '_progress_mixins';
|
||||
/* Progess module CSS variable definitions */
|
||||
:root {
|
||||
#{$progress-back-color-var}: $progress-back-color;
|
||||
#{$progress-fore-color-var}: $progress-fore-color;
|
||||
}
|
||||
// Default styling for progress. Use mixins for alternate styles
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in some browsers.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: $progress-height;
|
||||
width: calc(100% - 2 * var(#{$universal-margin-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: 0; // Removes default border
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: var(#{$progress-back-color-var});
|
||||
color: var(#{$progress-fore-color-var});
|
||||
// Foreground color on webkit browsers
|
||||
&::-webkit-progress-value {
|
||||
background: var(#{$progress-fore-color-var});
|
||||
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
// Background color on webkit browser
|
||||
&::-webkit-progress-bar {
|
||||
background: var(#{$progress-back-color});
|
||||
}
|
||||
// Foreground color on Firefox
|
||||
&::-moz-progress-bar {
|
||||
background: var(#{$progress-fore-color-var});
|
||||
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
&[value="#{$progress-max-value}"] {
|
||||
&::-webkit-progress-value {
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
}
|
||||
&.#{$progress-inline-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
|
||||
width: $progress-inline-width;
|
||||
}
|
||||
}
|
||||
// Style for donut spinner
|
||||
@if $_include-spinner-donut {
|
||||
:root {
|
||||
#{$spinner-donut-back-color-var}: $spinner-donut-back-color;
|
||||
#{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
|
||||
}
|
||||
// Donut spinner animation
|
||||
@keyframes spinner-donut-anim {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
.#{$spinner-donut-name} {
|
||||
display: inline-block;
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
|
||||
border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
|
||||
border-radius: 50%;
|
||||
width: $spinner-donut-size;
|
||||
height: $spinner-donut-size;
|
||||
animation: spinner-donut-anim 1.2s linear infinite;
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
// Progress module's mixin definitions are here. For the module itself
|
||||
// check `progress.scss`.
|
||||
// Progress color variant mixin:
|
||||
// $progress-alt-name: The name of the class used for the <progress> variant.
|
||||
// $progress-alt-fore-color: Foregound color for <progress> variant.
|
||||
// $progress-alt-back-color: Background color for <progress> variant.
|
||||
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
|
||||
$progress-alt-back-color : $progress-back-color) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-fore-color != $progress-fore-color{
|
||||
#{$progress-fore-color-var}: $progress-alt-fore-color;
|
||||
}
|
||||
@if $progress-alt-back-color != $progress-back-color {
|
||||
#{$progress-back-color-var}: $progress-alt-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Spinner donut color variant mixin:
|
||||
// $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
|
||||
// $spinner-donut-alt-fore-color: Text color for spinner donut variant.
|
||||
// $spinner-donut-alt-back-color: Background color for spinner donut variant.
|
||||
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
|
||||
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
|
||||
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
|
||||
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
|
||||
#{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
|
||||
}
|
||||
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
|
||||
#{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,321 +0,0 @@
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
// The tables use the common table elements and syntax.
|
||||
/*
|
||||
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
|
||||
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view.
|
||||
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
|
||||
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
|
||||
$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
|
||||
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
|
||||
$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
|
||||
$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
|
||||
$table-scrollable-height: 400px !default; // Height for table scrollable view.
|
||||
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
|
||||
$table-striped-name: 'striped' !default; // Class name for striped table.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
*/
|
||||
$table-mobile-breakpoint: 768px !default;
|
||||
$table-max-height: 400px !default;
|
||||
$table-caption-font-size: 1.5rem !default;
|
||||
$table-mobile-card-label: 'data-label' !default;
|
||||
$table-mobile-label-font-weight: 600 !default;
|
||||
|
||||
$table-border-color: #aaa !default;
|
||||
$table-border-separator-color: #666 !default;
|
||||
|
||||
$_include-horizontal-table: true !default;
|
||||
$table-horizontal-name: 'horizontal' !default;
|
||||
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$table-border-color-var: '--table-border-color' !default;
|
||||
$table-border-separator-color-var: '--table-border-separator-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
/* Table module CSS variable definitions. */
|
||||
:root {
|
||||
#{$table-border-color-var}: $table-border-color;
|
||||
#{$table-border-separator-color-var}: $table-border-separator-color;
|
||||
}
|
||||
// Desktop view.
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
padding: var(#{$universal-padding-var});
|
||||
padding-top: 0;
|
||||
@if not($_include-horizontal-table) {
|
||||
overflow: auto;
|
||||
max-height: $table-max-height;
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
margin: calc(2 * var(#{$universal-margin-var})) 0;
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
@if not($_include-horizontal-table) {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
|
||||
border-bottom: $__1px solid var(#{$table-border-separator-color-var}); // var This
|
||||
@if not($_include-horizontal-table) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: calc(0 - var(#{$universal-margin-var})); // might be useless
|
||||
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
padding: 0; // Apply always to overwrite default.
|
||||
@if not($_include-horizontal-table) {
|
||||
flex-flow: row wrap;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
|
||||
@if not($_include-horizontal-table) {
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
background: #e6e6e6; // use vars
|
||||
color: #111; // vars
|
||||
}
|
||||
td {
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
border-top: $__1px solid var(#{$table-border-color-var});
|
||||
}
|
||||
@if not($_include-horizontal-table) {
|
||||
tbody tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for horizntal tables
|
||||
@if $_include-horizontal-table {
|
||||
table:not(.#{$table-horizontal-name}) {
|
||||
overflow: auto;
|
||||
max-height: $table-max-height;
|
||||
thead, tbody {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
tr {
|
||||
flex-flow: row wrap;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
th, td {
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tbody tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name} {
|
||||
border: 0;
|
||||
thead, tbody {
|
||||
border: 0;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
tbody {
|
||||
overflow: auto;
|
||||
justify-content: space-between;
|
||||
flex: 1 0 0;
|
||||
margin-left: calc( 4 * var(#{$universal-margin-var}));
|
||||
padding-bottom: calc(var(#{$universal-padding-var}) / 4);
|
||||
}
|
||||
tr {
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: $__1px solid var(#{$table-border-color-var});
|
||||
&:not(:first-child){
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
border-left: $__1px solid var(#{$table-border-color-var});
|
||||
border-right: $__1px solid var(#{$table-border-separator-color-var});
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
border-top: $__1px solid var(#{$table-border-color-var});
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-right: 1px solid #aaa;
|
||||
&:first-child{
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
thead tr:first-child th {
|
||||
&:first-child{
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mobile
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
|
||||
@if $_include-horizontal-table {
|
||||
table, table.#{$table-horizontal-name} {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
thead, th {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
th, td {
|
||||
width: auto;
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
border: 0;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
thead, th {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
border: 0;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,791 +0,0 @@
|
||||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v3.0.0-alpha.2
|
||||
*/
|
||||
|
||||
$fore-color-var: '--f-col';
|
||||
$secondary-fore-color-var: '--f-col2';
|
||||
$back-color-var: '--b-col';
|
||||
$secondary-back-color-var: '--b-col2';
|
||||
$blockquote-color-var: '--blq-col';
|
||||
$pre-color-var: '--pre-col';
|
||||
$border-color-var: '--br-col';
|
||||
$secondary-border-color-var: '--br-col2';
|
||||
$heading-ratio-var: '--h-ratio';
|
||||
$universal-margin-var: '--u-m';
|
||||
$universal-padding-var: '--u-p';
|
||||
$universal-border-radius-var: '--u-br-r';
|
||||
$universal-box-shadow-var: '--u-bx-shd';
|
||||
$a-link-color-var: '--a-l-col';
|
||||
$a-visited-color-var: '--a-v-col';
|
||||
|
||||
$code-font-size: 0.8125em;
|
||||
|
||||
@import 'core';
|
||||
|
||||
$grid-container-name: 'container';
|
||||
$grid-row-name: 'row';
|
||||
$grid-row-parent-layout-prefix:'cols';
|
||||
$grid-column-prefix: 'col';
|
||||
$grid-column-offset-suffix: 'o';
|
||||
$grid-order-normal-suffix: 'n';
|
||||
$grid-order-first-suffix: 'f';
|
||||
$grid-order-last-suffix: 'l';
|
||||
$grid-small-prefix: 'sm';
|
||||
$grid-medium-prefix: 'md';
|
||||
$grid-large-prefix: 'lg';
|
||||
|
||||
$card-fore-color-var: '--cd-f-col';
|
||||
$card-back-color-var: '--cd-b-col';
|
||||
$card-border-color-var: '--cd-br-col';
|
||||
|
||||
$_include-parent-layout: false;
|
||||
|
||||
@import 'layout';
|
||||
|
||||
/*
|
||||
Custom elements for card elements.
|
||||
*/
|
||||
|
||||
$card-fluid-name: 'fluid'; // Class name for fluid cards.
|
||||
$card-fluid-width: 100%; // Width for fluid cards.
|
||||
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
|
||||
|
||||
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
|
||||
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
|
||||
@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
|
||||
|
||||
.#{$card-name} {
|
||||
box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 32, 64, 0.1);
|
||||
}
|
||||
|
||||
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
|
||||
padding: calc(3 * var(#{$universal-padding-var}));
|
||||
}
|
||||
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-double-padded-name} > p {
|
||||
margin: var(#{$universal-margin-var}) calc(var(#{$universal-margin-var}) / 2);
|
||||
}
|
||||
|
||||
.#{$card-name} + .#{$card-name} {
|
||||
margin-top: calc(5 * var(#{$universal-margin-var}));
|
||||
}
|
||||
|
||||
$form-back-color-var: '--frm-b-col';
|
||||
$form-fore-color-var: '--frm-f-col';
|
||||
$form-border-color-var: '--frm-br-col';
|
||||
$input-back-color-var: '--in-b-col';
|
||||
$input-fore-color-var: '--in-f-col';
|
||||
$input-border-color-var: '--in-br-col';
|
||||
$input-focus-color-var: '--in-fc-col';
|
||||
$input-invalid-color-var: '--in-inv-col';
|
||||
$button-back-color-var: '--btn-b-col';
|
||||
$button-hover-back-color-var: '--btn-h-b-col';
|
||||
$button-fore-color-var: '--btn-f-col';
|
||||
$button-border-color-var: '--btn-br-col';
|
||||
$button-hover-border-color-var: '--btn-h-br-col';
|
||||
$button-group-border-color-var: '--btn-grp-br-col';
|
||||
|
||||
|
||||
$_include-fluid-input-group: true;
|
||||
|
||||
@import 'input_control';
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
$button-primary-name: 'primary'; // Class name for primary button color variant.
|
||||
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
|
||||
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
|
||||
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
|
||||
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
|
||||
|
||||
|
||||
$header-fore-color-var: '--hd-f-col';
|
||||
$header-back-color-var: '--hd-b-col';
|
||||
$header-hover-back-color-var: '--hd-hv-b-col';
|
||||
$header-border-color-var: '--hd-br-col';
|
||||
$nav-fore-color-var: '--nv-f-col';
|
||||
$nav-back-color-var: '--nv-b-col';
|
||||
$nav-hover-back-color-var: '--nv-hv-b-col';
|
||||
$nav-border-color-var: '--nv-br-col';
|
||||
$nav-link-color-var: '--nv-ln-col';
|
||||
$footer-fore-color-var: '--ft-f-col';
|
||||
$footer-back-color-var: '--ft-b-col';
|
||||
$footer-border-color-var: '--ft-br-col';
|
||||
$footer-link-color-var: '--ft-ln-col';
|
||||
$drawer-back-color-var: '--dr-b-col';
|
||||
$drawer-border-color-var: '--dr-br-col';
|
||||
$drawer-hover-back-color-var: '--dr-hv-b-col';
|
||||
$drawer-close-color-var: '--dr-cl-col';
|
||||
|
||||
|
||||
$nav-sublink-depth: 1;
|
||||
|
||||
$_drawer-right: false;
|
||||
|
||||
@import 'navigation';
|
||||
|
||||
$mark-back-color: #424242;
|
||||
$mark-font-size: 0.5em;
|
||||
|
||||
$toast-back-color: #212121;
|
||||
|
||||
$mark-back-color-var: '--mrk-b-col';
|
||||
$mark-fore-color-var: '--mrk-f-col';
|
||||
$toast-back-color-var: '--tst-b-col';
|
||||
$toast-fore-color-var: '--tst-f-col';
|
||||
$tooltip-back-color-var: '--tltp-b-col';
|
||||
$tooltip-fore-color-var: '--tltp-f-col';
|
||||
$modal-overlay-color-var: '--mdl-ov-col';
|
||||
$modal-close-color-var: '--mdl-cl-col';
|
||||
$modal-close-hover-back-color-var: '--mdl-cl-h-col';
|
||||
$collapse-label-back-color-var: '--clps-lbl-b-col';
|
||||
$collapse-label-fore-color-var: '--clps-lbl-f-col';
|
||||
$collapse-label-hover-back-color-var: '--clps-lbl-h-b-col';
|
||||
$collapse-selected-label-back-color-var: '--clps-sel-lbl-b-col';
|
||||
$collapse-border-color-var: '--clps-br-col';
|
||||
$collapse-content-back-color-var: '--clps-cnt-b-col';
|
||||
$collapse-selected-label-border-color-var: '--clps-sel-lbl-br-col';
|
||||
|
||||
$_include-modal: false;
|
||||
$_include-tooltip: false;
|
||||
$_include-collapse: false;
|
||||
|
||||
@import 'contextual';
|
||||
|
||||
div,main,nav{
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.#{$toast-name} {
|
||||
bottom: calc(var(#{$universal-margin-var}) / 2);
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
mark {
|
||||
position: relative;
|
||||
top: -0.25rem;
|
||||
left: 0.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Custom elements for contextual background elements, toasts and tooltips.
|
||||
*/
|
||||
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
|
||||
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
|
||||
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
|
||||
|
||||
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
|
||||
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
|
||||
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
|
||||
|
||||
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
|
||||
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
|
||||
$mark-tag-border-radius: 1em;
|
||||
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
||||
|
||||
// Website-specific styles
|
||||
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
|
||||
font-family: Menlo, Consolas, monospace !important;
|
||||
}
|
||||
pre {
|
||||
border: 0.0625rem solid var(#{$secondary-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
}
|
||||
|
||||
.search {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
header h1.logo {
|
||||
margin-top: -0.8rem;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: top 0.3s;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
h1 a, h1 a:link, h1 a:visited {
|
||||
text-decoration:none;
|
||||
color: #111;
|
||||
&:hover, &:focus {
|
||||
text-decoration:none;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
header #title {
|
||||
position:relative;
|
||||
top: -1rem;
|
||||
@media screen and (max-width: 768px) { display: none; }
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
header h1 small {
|
||||
display:block;
|
||||
font-size: 0.875rem;
|
||||
color: #888;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
label#menu-toggle {
|
||||
position: absolute;
|
||||
left: 0rem;
|
||||
top: 0rem;
|
||||
width: 3.4375rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
#{$collapse-label-back-color-var}: $collapse-label-back-color;
|
||||
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
|
||||
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
|
||||
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
|
||||
#{$collapse-border-color-var}: $collapse-border-color;
|
||||
#{$collapse-content-back-color-var} : $collapse-content-back-color;
|
||||
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
|
||||
}
|
||||
label.#{$collapse-name} {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.3s;
|
||||
color: var(#{$collapse-label-fore-color-var});
|
||||
background: var(#{$collapse-label-back-color-var});
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
&:hover, &:focus {
|
||||
background: var(#{$collapse-label-hover-back-color-var});
|
||||
}
|
||||
+ pre {
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
max-height: 1px;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transition: max-height 0.3s;
|
||||
}
|
||||
&.toggled {
|
||||
background: var(#{$collapse-selected-label-back-color-var});
|
||||
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
+ pre {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
border-top: 0;
|
||||
padding: calc(2 * var(#{$universal-padding-var}));
|
||||
max-height: $collapse-content-max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.primary.clipboard-copy {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
> img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #222;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.8;
|
||||
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
|
||||
-webkit-hypens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: calc(2 * var(#{$universal-padding-var}));
|
||||
overflow: auto;
|
||||
margin: var(#{$universal-margin-var}) 0;
|
||||
}
|
||||
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #7a8490;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted,
|
||||
.token.function {
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
|
||||
.token.number,
|
||||
.token.class-name {
|
||||
color: #832ed2;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #067e36;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
color: #097cab;
|
||||
}
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
button.scroll-to-top {
|
||||
border-radius: 100%;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 2rem;
|
||||
background: var(#{$back-color-var});
|
||||
box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
|
||||
&:hover, &:focus {
|
||||
background: var(#{$secondary-back-color-var});
|
||||
}
|
||||
}
|
||||
|
||||
.#{$card-name}#disclaimer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1100;
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
@media screen and (min-width: 768px){
|
||||
width: 60vw;
|
||||
left: 20vw;
|
||||
bottom: 1rem;
|
||||
}
|
||||
@media screen and (min-width: 1280px){
|
||||
width: 40vw;
|
||||
left: 30vw;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
button#disclaimer-close{
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: -0.5rem;
|
||||
font-size: 0.85rem;
|
||||
background: 0;
|
||||
}
|
||||
|
||||
// New styles for landing page
|
||||
|
||||
#splash {
|
||||
height: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
#logo {
|
||||
margin-top: 0;
|
||||
margin-left: -0.5rem;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2;
|
||||
img {
|
||||
vertical-align: top;
|
||||
height: 4.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
text-align: center;
|
||||
padding: 0.5rem 25%;
|
||||
}
|
||||
#doc-link {
|
||||
text-align: center;
|
||||
margin-left: -0.5rem;
|
||||
> a {
|
||||
background: transparent;
|
||||
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
|
||||
transition: all 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(17, 17, 17, 0.95);
|
||||
color: #e86957;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
#logo {
|
||||
font-size: 1.75rem;
|
||||
img {
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.25rem 17.5%;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
#doc-link {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 383px) {
|
||||
#logo {
|
||||
font-size: 1.5rem;
|
||||
img {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.125rem 5%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 479px) {
|
||||
#tagline #tagline-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
h2.index-section {
|
||||
border-left: 0.3125rem solid #de4a6d;
|
||||
padding-left: 0.625rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#license-icon {
|
||||
text-align: center;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: calc(50% - 40px);
|
||||
}
|
||||
> svg {
|
||||
border: 0.03125rem solid #444;
|
||||
border-radius: 100%;
|
||||
padding: 0.5rem;
|
||||
fill: #444;
|
||||
}
|
||||
}
|
||||
|
||||
#license {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#in-numbers {
|
||||
background: #111; //#3f88c5; //#e15554;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #fff;
|
||||
svg {
|
||||
fill: #fff;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: -24px;
|
||||
left: 22px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
margin-top: 0;
|
||||
font-size: 0.625rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#snippet-count,
|
||||
#contrib-count,
|
||||
#commit-count,
|
||||
#star-count {
|
||||
font-size: 1rem;
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul#links {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
li + li {
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pick:not(.selected) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card.pick {
|
||||
transition: all 0.6s;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.card.pick + .card.pick {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pick.selected {
|
||||
overflow: visible;
|
||||
button.next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -1rem;
|
||||
> svg {
|
||||
margin-right: -0.0625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pick-slider {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.previous {
|
||||
left: -1%;
|
||||
> svg {
|
||||
margin-left: -0.125rem;
|
||||
}
|
||||
}
|
||||
button.next {
|
||||
right: -1%;
|
||||
> svg {
|
||||
margin-left: 0.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
button.previous,
|
||||
button.next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 100%;
|
||||
background: #f8f8f8;
|
||||
border: 0.03125rem solid #ddd;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: all 0.3s;
|
||||
z-index: 2000;
|
||||
> svg {
|
||||
fill: #888;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #aaa;
|
||||
> svg {
|
||||
fill: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.contributor {
|
||||
height: calc(100% - 1rem);
|
||||
justify-content: left;
|
||||
> .section.media {
|
||||
height: auto;
|
||||
}
|
||||
> .section.button {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--a-l-col);
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.fluid.contribution-guideline {
|
||||
overflow: visible;
|
||||
margin-top: 3rem;
|
||||
padding-bottom: 0.25rem;
|
||||
h3 {
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-guideline + .contribution-guideline {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: -2.75rem;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: #ddd;
|
||||
border: 0.03125rem solid #d0d0d0;
|
||||
border-radius: 100%;
|
||||
left: calc(50% - 0.1875rem);
|
||||
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: - 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-number {
|
||||
position: absolute;
|
||||
top: -1.125rem;
|
||||
left: calc(50% - 1.125rem);
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
border: 0.03125 solid #ddd;
|
||||
width: 2.25rem;
|
||||
text-align: center;
|
||||
height: 2.25rem;
|
||||
border-radius: 100%;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
label.button.drawer-toggle {
|
||||
background: transparent;
|
||||
color: #111;
|
||||
&:hover, &:focus {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
nav .input-group.vertical {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 0.0625rem solid var(--nv-br-col);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
176
docs/object.html
176
docs/object.html
File diff suppressed because one or more lines are too long
869
docs/scss/style.scss
Normal file
869
docs/scss/style.scss
Normal file
@ -0,0 +1,869 @@
|
||||
$base-font-size: 16px;
|
||||
$base-line-height: 1.5;
|
||||
$__1px: (1px/$base-font-size) * 1rem;
|
||||
$base-font-family: 'Roboto, Helvetica, sans-serif';
|
||||
$code-font-family: 'Roboto Mono, Menlo, Consolas, monospace';
|
||||
$code-font-size: 0.875em;
|
||||
$_body-margin: 0;
|
||||
$heading-line-height: 1.2;
|
||||
$fore-color-var: '--fore-color';
|
||||
$fore-color: #212121;
|
||||
$back-color-var: '--back-color';
|
||||
$back-color: #fff;
|
||||
$border-color-var: '--border-color';
|
||||
$border-color: #eee;
|
||||
$a-link-color-var: '--a-link-color';
|
||||
$a-link-color: #0277bd;
|
||||
$a-visited-color-var: '--a-visited-color';
|
||||
$a-visited-color: #01579b;
|
||||
$code-fore-color-var: '--code-fore-color';
|
||||
$code-fore-color: #8e24aa;
|
||||
$code-back-color-var: '--code-back-color';
|
||||
$code-back-color: #f0f0f0;
|
||||
$code-selected-color-var: '--code-selected-color';
|
||||
$code-selected-color: #37474f;
|
||||
$pre-fore-color-var: '--pre-fore-color';
|
||||
$pre-fore-color: #e57373;
|
||||
$pre-back-color-var: '--pre-back-color';
|
||||
$pre-back-color: #263238;
|
||||
$token-color-a-var: '--token-color-a'; // Comments
|
||||
$token-color-a: #7f99a5;
|
||||
$token-color-b-var: '--token-color-b'; // Punctuation
|
||||
$token-color-b: #bdbdbd;
|
||||
$token-color-c-var: '--token-color-c'; // Functions
|
||||
$token-color-c: #64b5f6;
|
||||
$token-color-d-var: '--token-color-d'; // Numbers
|
||||
$token-color-d: #ff8f00;
|
||||
$token-color-e-var: '--token-color-e'; // Strings
|
||||
$token-color-e: #c5e1a5;
|
||||
$token-color-f-var: '--token-color-f'; // Keywords
|
||||
$token-color-f: #ce93d8;
|
||||
$token-color-g-var: '--token-color-g'; // Regular expressions
|
||||
$token-color-g: #26c6da;
|
||||
$token-color-h-var: '--token-color-h'; // Variables
|
||||
$token-color-h: #e57373;
|
||||
$collapse-color-var: '--collapse-color';
|
||||
$collapse-color: #607d8b;
|
||||
$copy-button-color-var: '--copy-button-color';
|
||||
$copy-button-color: #1e88e5;
|
||||
$copy-button-hover-color-var: '--copy-button-hover-color';
|
||||
$copy-button-hover-color: #2196f3;
|
||||
$scrolltop-button-color-var: '--scrolltop-button-color';
|
||||
$scrolltop-button-color: #26a69a;
|
||||
$scrolltop-button-hover-color-var: '--scrolltop-button-hover-color';
|
||||
$scrolltop-button-hover-color: #4db6ac;
|
||||
$beginner-color-var: '--beginner-color';
|
||||
$beginner-color: #7cb342;
|
||||
$intermediate-color-var: '--intermediate-color';
|
||||
$intermediate-color: #ffb300;
|
||||
$advanced-color-var: '--advanced-color';
|
||||
$advanced-color: #e53935;
|
||||
$header-fore-color-var: '--header-fore-color';
|
||||
$header-fore-color: #fff;
|
||||
$header-back-color-var: '--header-back-color';
|
||||
$header-back-color: #202124;
|
||||
$nav-fore-color-var: '--nav-fore-color';
|
||||
$nav-fore-color: #f0f0f0;
|
||||
$nav-back-color-var: '--nav-back-color';
|
||||
$nav-back-color: #202124;
|
||||
$nav-link-border-color-var: '--nav-link-border-color';
|
||||
$nav-link-border-color: #455a64;
|
||||
$nav-link-fore-color-var: '--nav-link-fore-color';
|
||||
$nav-link-fore-color: #e0e0e0;
|
||||
$nav-link-hover-color-var: '--nav-link-hover-color';
|
||||
$nav-link-hover-color: #2b2c30;
|
||||
$search-fore-color-var: '--search-fore-color';
|
||||
$search-fore-color: #fafafa;
|
||||
$search-back-color-var: '--search-back-color';
|
||||
$search-back-color: #111;
|
||||
$search-border-color-var: '--search-border-color';
|
||||
$search-border-color: #9e9e9e;
|
||||
$search-hover-border-color-var: '--search-hover-border-color';
|
||||
$search-hover-border-color: #26a69a;
|
||||
$footer-fore-color-var: '--footer-fore-color';
|
||||
$footer-fore-color: #616161;
|
||||
$footer-back-color-var: '--footer-back-color';
|
||||
$footer-back-color: #e0e0e0;
|
||||
$universal-margin-var: '--universal-margin';
|
||||
$universal-margin: 0.5rem;
|
||||
$universal-padding-var: '--universal-padding';
|
||||
$universal-padding: 0.5rem;
|
||||
$universal-border-radius-var: '--universal-border-radius';
|
||||
$universal-border-radius: 0.125rem;
|
||||
// =================
|
||||
$secondary-fore-color-var: '--secondary-fore-color'; // No use yet
|
||||
$secondary-fore-color: #444;
|
||||
$secondary-back-color-var: '--secondary-back-color'; // No use yet
|
||||
$secondary-back-color: #f0f0f0;
|
||||
$tertiary-fore-color-var: '--tertiary-fore-color'; // No use yet
|
||||
$tertiary-fore-color: #222;
|
||||
|
||||
// Load external fonts - progressive loading should help alleviate performance issues
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Mono Light Italic'), local('RobotoMono-LightItalic'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
font-display: swap;
|
||||
}
|
||||
// Set up variables for everything
|
||||
:root {
|
||||
#{$fore-color-var}: $fore-color;
|
||||
#{$back-color-var}: $back-color;
|
||||
#{$border-color-var}: $border-color;
|
||||
#{$secondary-fore-color-var}: $secondary-fore-color;
|
||||
#{$tertiary-fore-color-var}: $tertiary-fore-color;
|
||||
#{$secondary-back-color-var}: $secondary-back-color;
|
||||
#{$universal-margin-var}: $universal-margin;
|
||||
#{$universal-padding-var}: $universal-padding;
|
||||
#{$universal-border-radius-var}: $universal-border-radius;
|
||||
#{$a-link-color-var} : $a-link-color;
|
||||
#{$a-visited-color-var} : $a-visited-color;
|
||||
#{$code-fore-color-var}: $code-fore-color;
|
||||
#{$code-back-color-var}: $code-back-color;
|
||||
#{$code-selected-color-var}: $code-selected-color;
|
||||
#{$pre-fore-color-var}: $pre-fore-color;
|
||||
#{$pre-back-color-var}: $pre-back-color;
|
||||
#{$token-color-a-var}: $token-color-a;
|
||||
#{$token-color-b-var}: $token-color-b;
|
||||
#{$token-color-c-var}: $token-color-c;
|
||||
#{$token-color-d-var}: $token-color-d;
|
||||
#{$token-color-e-var}: $token-color-e;
|
||||
#{$token-color-f-var}: $token-color-f;
|
||||
#{$token-color-g-var}: $token-color-g;
|
||||
#{$token-color-h-var}: $token-color-h;
|
||||
#{$collapse-color-var}: $collapse-color;
|
||||
#{$copy-button-color-var}: $copy-button-color;
|
||||
#{$copy-button-hover-color-var}: $copy-button-hover-color;
|
||||
#{$scrolltop-button-color-var}: $scrolltop-button-color;
|
||||
#{$scrolltop-button-hover-color-var}: $scrolltop-button-hover-color;
|
||||
#{$beginner-color-var}: $beginner-color;
|
||||
#{$intermediate-color-var}: $intermediate-color;
|
||||
#{$advanced-color-var}: $advanced-color;
|
||||
#{$header-fore-color-var}: $header-fore-color;
|
||||
#{$header-back-color-var}: $header-back-color;
|
||||
#{$nav-fore-color-var}: $nav-fore-color;
|
||||
#{$nav-back-color-var}: $nav-back-color;
|
||||
#{$footer-fore-color-var}: $footer-fore-color;
|
||||
#{$footer-back-color-var}: $footer-back-color;
|
||||
#{$nav-link-fore-color-var}: $nav-link-fore-color;
|
||||
#{$nav-link-border-color-var}: $nav-link-border-color;
|
||||
#{$nav-link-hover-color-var}: $nav-link-hover-color;
|
||||
#{$search-fore-color-var}: $search-fore-color;
|
||||
#{$search-back-color-var}: $search-back-color;
|
||||
#{$search-border-color-var}: $search-border-color;
|
||||
#{$search-hover-border-color-var}: $search-hover-border-color;
|
||||
}
|
||||
// Set up some basic styling for everything
|
||||
html {
|
||||
font-size: $base-font-size;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
// Apply fixes and defaults as necessary for modern browsers only
|
||||
a, b, del, em, i, ins, q, span, strong, u {
|
||||
font-size: 1em; // Fix for elements inside headings not displaying properly.
|
||||
}
|
||||
body {
|
||||
margin: $_body-margin;
|
||||
color: var(#{$fore-color-var});
|
||||
background: var(#{$back-color-var});
|
||||
overflow-x: hidden;
|
||||
}
|
||||
// Correct display for Edge & Firefox.
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
// Abbreviations
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
// Show overflow in Edge.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
// Style headings according to material design guidelines
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
|
||||
}
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 2.125rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
// Style textual elements
|
||||
p {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
ol, ul {
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding-left: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
b, strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
// Actual styling using variables
|
||||
line-height: 1.25em;
|
||||
margin: var(#{$universal-margin-var});
|
||||
height: $__1px;
|
||||
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
|
||||
}
|
||||
// Style code
|
||||
code, kbd, pre {
|
||||
font-size: $code-font-size;
|
||||
}
|
||||
code, kbd, pre, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
|
||||
font-family: #{$code-font-family};
|
||||
}
|
||||
sup, sub, code, kbd {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(#{$code-back-color-var});
|
||||
color: var(#{$code-fore-color-var});
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
}
|
||||
/* === Unused so far ===
|
||||
kbd {
|
||||
background: var(#{$fore-color-var});
|
||||
color: var(#{$back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
*/
|
||||
pre {
|
||||
overflow: auto; // Responsiveness
|
||||
background: var(#{$pre-back-color-var});
|
||||
color: var(#{$pre-fore-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: 0;
|
||||
}
|
||||
|
||||
code[class*="language-"], pre[class*="language-"] {
|
||||
color: var(#{$pre-fore-color-var});
|
||||
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.8;
|
||||
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
|
||||
-webkit-hypens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: calc(2 * var(#{$universal-padding-var}));
|
||||
overflow: auto;
|
||||
margin: var(#{$universal-margin-var}) 0;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
background: var(#{$code-selected-color-var});
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
background: var(#{$code-selected-color-var});
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token {
|
||||
&.comment, &.prolog, &.doctype, &.cdata {
|
||||
color: var(#{$token-color-a-var});
|
||||
}
|
||||
&.punctuation {
|
||||
color: var(#{$token-color-b-var});
|
||||
}
|
||||
&.property, &.tag, &.boolean, &.constant, &.symbol, &.deleted, &.function {
|
||||
color: var(#{$token-color-c-var});
|
||||
}
|
||||
&.number, &.class-name {
|
||||
color: var(#{$token-color-d-var});
|
||||
}
|
||||
&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted {
|
||||
color: var(#{$token-color-e-var});
|
||||
}
|
||||
&.operator, &.entity, &.url, &.atrule, &.attr-value, &.keyword, &.interpolation-punctuation {
|
||||
color: var(#{$token-color-f-var});
|
||||
}
|
||||
&.regex {
|
||||
color: var(#{$token-color-g-var});
|
||||
}
|
||||
&.important, &.variable {
|
||||
color: var(#{$token-color-h-var});
|
||||
}
|
||||
&.italic, &.comment {
|
||||
font-style: italic;
|
||||
}
|
||||
&.important, &.bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
.language-css .token.string, .style .token.string {
|
||||
color: var(#{$token-color-f-var});
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:link{
|
||||
color: var(#{$a-link-color-var});
|
||||
}
|
||||
&:visited {
|
||||
color: var(#{$a-visited-color-var});
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Github Corner styles - Do not alter
|
||||
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
|
||||
|
||||
/*
|
||||
blockquote {}
|
||||
sup {}
|
||||
sub {}
|
||||
figure {}
|
||||
figcaption {}
|
||||
*/
|
||||
|
||||
// ===================================================
|
||||
// Layout
|
||||
// ===================================================
|
||||
$grid-medium-breakpoint: 768px;
|
||||
$grid-large-breakpoint: 1280px;
|
||||
// Grid container
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-column-gap: calc(0.5 * var(#{$universal-margin-var}));
|
||||
&.card-container {
|
||||
position: absolute;
|
||||
padding-top: 3.5rem;
|
||||
height: calc(100vh - 3.5rem);
|
||||
}
|
||||
}
|
||||
// Generic centered column
|
||||
.col-centered {
|
||||
grid-column: span 12;
|
||||
max-width: 100%;
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
grid-column: 2/12;
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
grid-column: 3/11;
|
||||
}
|
||||
}
|
||||
// 25% width - For the 'in numbers' section
|
||||
.col-quarter {
|
||||
grid-column: span 3;
|
||||
}
|
||||
// 100% width
|
||||
.col-full-width {
|
||||
grid-column: span 12;
|
||||
}
|
||||
// For the contributors section
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
.flex-item {
|
||||
flex: 0 0 auto;
|
||||
max-width: 50%;
|
||||
flex-basis: 50%;
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
max-width: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// ===================================================
|
||||
// Cards
|
||||
// ===================================================
|
||||
h2.category-name {
|
||||
text-align: center;
|
||||
}
|
||||
.card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: var(#{$universal-margin-var});
|
||||
border-radius: calc(4 * var(#{$universal-border-radius-var}));
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
h4 {
|
||||
text-align: center;
|
||||
padding-bottom: calc(0.75 * var(#{$universal-padding-var}));
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
border-bottom: $__1px solid var(#{$border-color-var});
|
||||
}
|
||||
&.code-card {
|
||||
margin-top: calc(5 * var(#{$universal-margin-var}));
|
||||
background: var(#{$pre-back-color-var});
|
||||
.section.card-content{
|
||||
background: var(#{$back-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
.collapse {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-family: #{$code-font-family};
|
||||
text-transform: uppercase;
|
||||
background: var(#{$pre-back-color-var});
|
||||
color: var(#{$collapse-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var})) calc(2.25 * var(#{$universal-padding-var}));
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-position: 0.25rem 0.9375rem;
|
||||
background-repeat: no-repeat;
|
||||
+ pre.card-examples {
|
||||
position: absolute;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
&.toggled{
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
padding-bottom: calc(0.125 * var(#{$universal-padding-var}));
|
||||
+ pre.card-examples {
|
||||
position: relative;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
pre.section {
|
||||
&.card-code {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&.card-examples {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 calc(4 * var(#{$universal-border-radius-var})) calc(4 * var(#{$universal-border-radius-var}));
|
||||
padding-top: 0;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.5625rem;
|
||||
border-left: $__1px solid var(#{$collapse-color-var});
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.copy-button-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.copy-button {
|
||||
background: var(#{$copy-button-color-var});
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: -1.75rem;
|
||||
right: 0;
|
||||
margin: calc(2 * var(#{$universal-margin-var}));
|
||||
padding: calc(2.5 * var(#{$universal-padding-var}));
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
&:hover, &:focus {
|
||||
background-color: var(#{$copy-button-hover-color-var});
|
||||
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&:before {
|
||||
background: var(#{$back-color-var});
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
right: -0.25rem;
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: calc(2.5 * var(#{$universal-padding-var}));
|
||||
border-radius: 50%;
|
||||
border: 0.25rem solid var(#{$back-color-var});
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.corner {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: -2.125rem;
|
||||
width: 6.5rem;
|
||||
height: 3.25rem;
|
||||
padding-top: 2rem;
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(#{$back-color-var});
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1);
|
||||
&.beginner {
|
||||
background: var(#{$beginner-color-var});
|
||||
}
|
||||
&.intermediate {
|
||||
background: var(#{$intermediate-color-var});
|
||||
}
|
||||
&.advanced {
|
||||
background: var(#{$advanced-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ===================================================
|
||||
// Toast
|
||||
// ===================================================
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: calc(var(#{$universal-margin-var}) * 2);
|
||||
margin-bottom: 0;
|
||||
font-size: 0.8125rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1111;
|
||||
color: var(#{$back-color-var});
|
||||
background: var(#{$fore-color-var});
|
||||
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
|
||||
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 2);
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
// ===================================================
|
||||
// Navigation
|
||||
// ===================================================
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
height: 3.5rem;
|
||||
position: fixed;
|
||||
width: 110%;
|
||||
top: 0;
|
||||
left: -5%;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.5);
|
||||
z-index: 5;
|
||||
background: var(#{$header-back-color-var});
|
||||
transition: top 0.3s ease;
|
||||
h1 {
|
||||
&.logo {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
font-size: 1.625rem;
|
||||
text-align: center;
|
||||
// transition: top 0.3s ease;
|
||||
}
|
||||
a, a:link, a:visited {
|
||||
color: var(#{$header-fore-color-var});
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: var(#{$header-back-color-var});
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 3.5rem;
|
||||
padding: 0.375rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#title {
|
||||
position: relative;
|
||||
top: -1.125rem;
|
||||
@media screen and (max-width: 768px) { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 3.5rem;
|
||||
left: -320px;
|
||||
width: 320px;
|
||||
transition: left 0.3s ease;
|
||||
z-index: 1100;
|
||||
height: calc(100vh - 3.5rem);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
background: var(#{$nav-back-color-var});
|
||||
border: 0;
|
||||
overflow-y: auto;
|
||||
@media screen and (max-width: 320px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
width: 33vw;
|
||||
left: -33vw;
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
width: 25vw;
|
||||
left: -25vw;
|
||||
}
|
||||
&.col-nav {
|
||||
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
|
||||
left: 0;
|
||||
// Also apply the main content style to the footer
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
+ main.col-centered, + main.col-centered + footer.col-full-width {
|
||||
grid-column: 5/13;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
+ main.col-centered {
|
||||
grid-column: 4/12;
|
||||
padding-left: 8vw;
|
||||
}
|
||||
+ main.col-centered + footer.col-full-width {
|
||||
grid-column: 4/13;
|
||||
}
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
padding-left: 0;
|
||||
color: var(#{$nav-fore-color-var});
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(0.5 * var(#{$universal-margin-var}));
|
||||
margin-left: var(#{$universal-margin-var});
|
||||
margin-bottom: 0;
|
||||
padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var}));
|
||||
border-left: $__1px solid var(#{$nav-link-border-color-var});
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: var(#{$nav-link-hover-color-var});
|
||||
}
|
||||
+ a {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:link, &:visited {
|
||||
color: var(#{$nav-link-fore-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
color: var(#{$search-fore-color-var});
|
||||
background: var(#{$search-back-color-var});
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-bottom: $__1px solid var(#{$search-border-color-var});
|
||||
width: 100%;
|
||||
margin-bottom: var(#{$universal-margin-var});
|
||||
padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})) var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
transition: all 0.3s ease;
|
||||
&:hover, &:focus {
|
||||
border-bottom: $__1px solid var(#{$search-hover-border-color-var});
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 $__1px 0 0 var(#{$search-hover-border-color-var});
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.875rem 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255, 0.08);
|
||||
}
|
||||
&.toggled {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
color: var(#{$footer-fore-color-var});
|
||||
background: var(#{$footer-back-color-var});
|
||||
padding-top: calc(2 * var(#{$universal-padding-var}));
|
||||
padding-bottom: calc(3 * var(#{$universal-padding-var}));
|
||||
margin-top: calc(6 * var(#{$universal-margin-var}));
|
||||
* {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
a, a:link, a:visited {
|
||||
color: var(#{$fore-color-var});
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1.3125rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 1100;
|
||||
height: 2.75rem;
|
||||
width: 2.75rem;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
background: var(#{$scrolltop-button-color-var});
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
transition: all 0.3s ease;
|
||||
&:hover, &:focus {
|
||||
background-color: var(#{$scrolltop-button-hover-color-var});
|
||||
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// About page
|
||||
.card.contributor > .section.button {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
display: block;
|
||||
transition: all 0.3s ease;
|
||||
&:link, &:visited {
|
||||
color: var(#{$fore-color-var});
|
||||
&:hover {
|
||||
color: var(#{$a-link-color-var});
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
164
docs/string.html
164
docs/string.html
File diff suppressed because one or more lines are too long
1
docs/style.css
Normal file
1
docs/style.css
Normal file
File diff suppressed because one or more lines are too long
112
docs/type.html
112
docs/type.html
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
310
scripts/web.js
310
scripts/web.js
@ -34,28 +34,29 @@ if (
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
// Compile the mini.css framework and custom CSS styles, using `node-sass`.
|
||||
// Compile the SCSS file, using `node-sass`.
|
||||
const sass = require('node-sass');
|
||||
sass.render(
|
||||
{
|
||||
file: path.join('docs', 'mini', 'flavor.scss'),
|
||||
outFile: path.join('docs', 'mini.css'),
|
||||
file: path.join('docs', 'scss', 'style.scss'),
|
||||
outFile: path.join('docs', 'style.css'),
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
function(err, result) {
|
||||
if (!err) {
|
||||
fs.writeFile(path.join('docs', 'mini.css'), result.css, function(err2) {
|
||||
if (!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
|
||||
else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
|
||||
fs.writeFile(path.join('docs', 'style.css'), result.css, function(err2) {
|
||||
if (!err2) console.log(`${chalk.green('SUCCESS!')} style.css file generated!`);
|
||||
else console.log(`${chalk.red('ERROR!')} During style.css file generation: ${err}`);
|
||||
});
|
||||
} else {
|
||||
console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
|
||||
console.log(`${chalk.red('ERROR!')} During style.css file generation: ${err}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
// Set variables for paths
|
||||
const snippetsPath = './snippets',
|
||||
archivedSnippetsPath = './snippets_archive',
|
||||
glossarySnippetsPath = './glossary',
|
||||
staticPartsPath = './static-parts',
|
||||
docsPath = './docs';
|
||||
// Set variables for script
|
||||
@ -97,6 +98,9 @@ let snippets = {},
|
||||
archivedStartPart = '',
|
||||
archivedEndPart = '',
|
||||
archivedOutput = '',
|
||||
glossaryStartPart = '',
|
||||
glossaryEndPart = '',
|
||||
glossaryOutput = '',
|
||||
indexStaticFile = '',
|
||||
pagesOutput = [],
|
||||
tagDbData = {};
|
||||
@ -105,6 +109,7 @@ console.time('Webber');
|
||||
// Synchronously read all snippets and sort them as necessary (case-insensitive)
|
||||
snippets = util.readSnippets(snippetsPath);
|
||||
archivedSnippets = util.readSnippets(archivedSnippetsPath);
|
||||
glossarySnippets = util.readSnippets(glossarySnippetsPath);
|
||||
|
||||
// Load static parts for all pages
|
||||
try {
|
||||
@ -123,7 +128,11 @@ try {
|
||||
);
|
||||
archivedEndPart = fs.readFileSync(path.join(staticPartsPath, 'archived-page-end.html'), 'utf8');
|
||||
|
||||
indexStaticFile = fs.readFileSync(path.join(staticPartsPath, 'index.html'), 'utf8');
|
||||
glossaryStartPart = fs.readFileSync(
|
||||
path.join(staticPartsPath, 'glossary-page-start.html'),
|
||||
'utf8'
|
||||
);
|
||||
glossaryEndPart = fs.readFileSync(path.join(staticPartsPath, 'glossary-page-end.html'), 'utf8');
|
||||
} catch (err) {
|
||||
// Handle errors (hopefully not!)
|
||||
console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`);
|
||||
@ -131,148 +140,6 @@ try {
|
||||
}
|
||||
// Load tag data from the database
|
||||
tagDbData = util.readTags();
|
||||
// Create the output for the index.html file (only locally or on Travis CRON or custom job)
|
||||
if (
|
||||
!util.isTravisCI() ||
|
||||
(util.isTravisCI() &&
|
||||
(process.env['TRAVIS_EVENT_TYPE'] === 'cron' || process.env['TRAVIS_EVENT_TYPE'] === 'api'))
|
||||
) {
|
||||
try {
|
||||
// Shuffle the array of snippets, pick 3
|
||||
let indexDailyPicks = '';
|
||||
let shuffledSnippets = util.shuffle(Object.keys(snippets)).slice(0, 3);
|
||||
const dailyPicks = Object.keys(snippets)
|
||||
.filter(key => shuffledSnippets.includes(key))
|
||||
.reduce((obj, key) => {
|
||||
obj[key] = snippets[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
// Generate the html for the picked snippets
|
||||
for (let snippet of Object.entries(dailyPicks))
|
||||
indexDailyPicks +=
|
||||
'<div class="card fluid pick">' +
|
||||
md
|
||||
.render(`\n${snippets[snippet[0]]}`)
|
||||
.replace(/<h3/g, `<h3 id="${snippet[0].toLowerCase()}" class="section double-padded"`)
|
||||
.replace(
|
||||
/<\/h3>/g,
|
||||
`${snippet[1].includes('advanced') ? '<mark class="tag">advanced</mark>' : ''}</h3>`
|
||||
)
|
||||
.replace(/<\/h3>/g, '</h3><div class="section double-padded">')
|
||||
.replace(
|
||||
/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
|
||||
(match, p1) =>
|
||||
`<pre class="language-js">${Prism.highlight(
|
||||
unescapeHTML(p1),
|
||||
Prism.languages.javascript
|
||||
)}</pre>`
|
||||
)
|
||||
.replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
|
||||
'<button class="primary clipboard-copy">📋 Copy to clipboard</button>' +
|
||||
'</div></div>';
|
||||
// Select the first snippet from today's picks
|
||||
indexDailyPicks = indexDailyPicks.replace('card fluid pick', 'card fluid pick selected');
|
||||
// Optimize punctuation nodes
|
||||
indexDailyPicks = util.optimizeNodes(
|
||||
indexDailyPicks,
|
||||
/<span class="token punctuation">([^\0<]*?)<\/span>([\n\r\s]*)<span class="token punctuation">([^\0]*?)<\/span>/gm,
|
||||
(match, p1, p2, p3) => `<span class="token punctuation">${p1}${p2}${p3}</span>`
|
||||
);
|
||||
// Optimize operator nodes
|
||||
indexDailyPicks = util.optimizeNodes(
|
||||
indexDailyPicks,
|
||||
/<span class="token operator">([^\0<]*?)<\/span>([\n\r\s]*)<span class="token operator">([^\0]*?)<\/span>/gm,
|
||||
(match, p1, p2, p3) => `<span class="token operator">${p1}${p2}${p3}</span>`
|
||||
);
|
||||
// Optimize keyword nodes
|
||||
indexDailyPicks = util.optimizeNodes(
|
||||
indexDailyPicks,
|
||||
/<span class="token keyword">([^\0<]*?)<\/span>([\n\r\s]*)<span class="token keyword">([^\0]*?)<\/span>/gm,
|
||||
(match, p1, p2, p3) => `<span class="token keyword">${p1}${p2}${p3}</span>`
|
||||
);
|
||||
// Put the daily picks into the page
|
||||
indexStaticFile = indexStaticFile.replace('$daily-picks', indexDailyPicks);
|
||||
// Use the Github API to get the needed data
|
||||
const githubApi = 'api.github.com';
|
||||
const headers = util.isTravisCI()
|
||||
? { 'User-Agent': '30-seconds-of-code', Authorization: 'token ' + process.env['GH_TOKEN'] }
|
||||
: { 'User-Agent': '30-seconds-of-code' };
|
||||
// Test the API's rate limit (keep for various reasons)
|
||||
https.get({ host: githubApi, path: '/rate_limit?', headers: headers }, res => {
|
||||
res.on('data', function(chunk) {
|
||||
console.log(`Remaining requests: ${JSON.parse(chunk).resources.core.remaining}`);
|
||||
});
|
||||
});
|
||||
// Send requests and wait for responses, write to the page
|
||||
https.get(
|
||||
{
|
||||
host: githubApi,
|
||||
path: '/repos/chalarangelo/30-seconds-of-code/commits?per_page=1',
|
||||
headers: headers
|
||||
},
|
||||
resCommits => {
|
||||
https.get(
|
||||
{
|
||||
host: githubApi,
|
||||
path: '/repos/chalarangelo/30-seconds-of-code/contributors?per_page=1',
|
||||
headers: headers
|
||||
},
|
||||
resContributors => {
|
||||
https.get(
|
||||
{
|
||||
host: githubApi,
|
||||
path: '/repos/chalarangelo/30-seconds-of-code/stargazers?per_page=1',
|
||||
headers: headers
|
||||
},
|
||||
resStars => {
|
||||
let commits = resCommits.headers.link
|
||||
.split('&')
|
||||
.slice(-1)[0]
|
||||
.replace(/[^\d]/g, ''),
|
||||
contribs = resContributors.headers.link
|
||||
.split('&')
|
||||
.slice(-1)[0]
|
||||
.replace(/[^\d]/g, ''),
|
||||
stars = resStars.headers.link
|
||||
.split('&')
|
||||
.slice(-1)[0]
|
||||
.replace(/[^\d]/g, '');
|
||||
indexStaticFile = indexStaticFile
|
||||
.replace(/\$snippet-count/g, Object.keys(snippets).length)
|
||||
.replace(/\$commit-count/g, commits)
|
||||
.replace(/\$contrib-count/g, contribs)
|
||||
.replace(/\$star-count/g, stars);
|
||||
indexStaticFile = minify(indexStaticFile, {
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
decodeEntities: false,
|
||||
minifyCSS: true,
|
||||
minifyJS: true,
|
||||
keepClosingSlash: true,
|
||||
processConditionalComments: true,
|
||||
removeAttributeQuotes: false,
|
||||
removeComments: true,
|
||||
removeEmptyAttributes: false,
|
||||
removeOptionalTags: false,
|
||||
removeScriptTypeAttributes: false,
|
||||
removeStyleLinkTypeAttributes: false,
|
||||
trimCustomFragments: true
|
||||
});
|
||||
// Generate 'index.html' file
|
||||
fs.writeFileSync(path.join(docsPath, 'index.html'), indexStaticFile);
|
||||
console.log(`${chalk.green('SUCCESS!')} index.html file generated!`);
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.log(`${chalk.red('ERROR!')} During index.html generation: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Create the output for individual category pages
|
||||
try {
|
||||
@ -290,23 +157,24 @@ try {
|
||||
: a.localeCompare(b)
|
||||
)) {
|
||||
output +=
|
||||
'<h3>' +
|
||||
'<h4>' +
|
||||
md
|
||||
.render(`${util.capitalize(tag, true)}\n`)
|
||||
.replace(/<p>/g, '')
|
||||
.replace(/<\/p>/g, '') +
|
||||
'</h3>';
|
||||
'</h4>';
|
||||
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
|
||||
output += md
|
||||
.render(`[${taggedSnippet[0]}](./${tag}#${taggedSnippet[0].toLowerCase()})\n`)
|
||||
.render(`[${taggedSnippet[0]}](./${tag == 'array' ?'index' : tag}#${taggedSnippet[0].toLowerCase()})\n`)
|
||||
.replace(/<p>/g, '')
|
||||
.replace(/<\/p>/g, '')
|
||||
.replace(/<a/g, `<a class="sublink-1" tags="${taggedSnippet[1].join(',')}"`);
|
||||
.replace(/<a/g, `<a tags="${taggedSnippet[1].join(',')}"`)
|
||||
;
|
||||
output += '\n';
|
||||
}
|
||||
output +=
|
||||
'</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eceef2; padding: 0;">';
|
||||
output += '<a id="top"> </a>';
|
||||
'</nav><main class="col-centered">';
|
||||
output += '<span id="top"><br/><br/></span>';
|
||||
// Loop over tags and snippets to create the list of snippets
|
||||
for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))]
|
||||
.filter(v => v)
|
||||
@ -321,25 +189,28 @@ try {
|
||||
let localOutput = output
|
||||
.replace(/\$tag/g, util.capitalize(tag))
|
||||
.replace(new RegExp(`./${tag}#`, 'g'), '#');
|
||||
if (tag === 'array') localOutput = localOutput.replace(new RegExp(`./index#`, 'g'), '#');
|
||||
localOutput += md
|
||||
.render(`## ${util.capitalize(tag, true)}\n`)
|
||||
.replace(/<h2>/g, '<h2 style="text-align:center;">');
|
||||
.replace(/<h2>/g, '<h2 class="category-name">');
|
||||
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
|
||||
localOutput +=
|
||||
'<div class="card fluid">' +
|
||||
'<div class="card code-card">' +
|
||||
`<div class="corner ${taggedSnippet[1].includes('advanced') ? 'advanced' : taggedSnippet[1].includes('beginner') ? 'beginner' : 'intermediate'}">${taggedSnippet[1].includes('advanced') ? 'advanced' : taggedSnippet[1].includes('beginner') ? 'beginner' : 'intermediate'}</div>` +
|
||||
md
|
||||
.render(`\n${snippets[taggedSnippet[0] + '.md']}`)
|
||||
.replace(
|
||||
/<h3/g,
|
||||
`<h3 id="${taggedSnippet[0].toLowerCase()}" class="section double-padded"`
|
||||
`<div class="section card-content"><h4 id="${taggedSnippet[0].toLowerCase()}"`
|
||||
)
|
||||
.replace(
|
||||
/<\/h3>/g,
|
||||
`${
|
||||
taggedSnippet[1].includes('advanced') ? '<mark class="tag">advanced</mark>' : ''
|
||||
}</h3>`
|
||||
'</h4>'
|
||||
)
|
||||
.replace(
|
||||
/<pre><code class="language-js">/m,
|
||||
'</div><div class="copy-button-container"><button class="copy-button"></button></div><pre><code class="language-js">'
|
||||
)
|
||||
.replace(/<\/h3>/g, '</h3><div class="section double-padded">')
|
||||
.replace(
|
||||
/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
|
||||
(match, p1) =>
|
||||
@ -348,9 +219,9 @@ try {
|
||||
Prism.languages.javascript
|
||||
)}</pre>`
|
||||
)
|
||||
.replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
|
||||
'<button class="primary clipboard-copy">📋 Copy to clipboard</button>' +
|
||||
'</div></div>';
|
||||
.replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
|
||||
.replace(/<\/pre>\s+<pre class="/g, '</pre><label class="collapse">examples</label><pre class="section card-examples ') +
|
||||
'</div>';
|
||||
// Add the ending static part
|
||||
localOutput += `\n${endPart + '\n'}`;
|
||||
// Optimize punctuation nodes
|
||||
@ -391,8 +262,8 @@ try {
|
||||
removeStyleLinkTypeAttributes: false,
|
||||
trimCustomFragments: true
|
||||
});
|
||||
fs.writeFileSync(path.join(docsPath, page.tag + '.html'), page.content);
|
||||
console.log(`${chalk.green('SUCCESS!')} ${page.tag}.html file generated!`);
|
||||
fs.writeFileSync(path.join(docsPath, (page.tag == 'array' ? 'index' : page.tag) + '.html'), page.content);
|
||||
console.log(`${chalk.green('SUCCESS!')} ${page.tag == 'array' ? 'index' : page.tag}.html file generated!`);
|
||||
});
|
||||
} catch (err) {
|
||||
// Handle errors (hopefully not!)
|
||||
@ -400,6 +271,7 @@ try {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
/*
|
||||
// Create the output for the beginner.html file
|
||||
try {
|
||||
// Add the static part
|
||||
@ -482,6 +354,7 @@ try {
|
||||
console.log(`${chalk.red('ERROR!')} During beginner.html generation: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
*/
|
||||
|
||||
// Create the output for the archive.html file
|
||||
try {
|
||||
@ -501,13 +374,21 @@ try {
|
||||
// Generate archived snippets from md files
|
||||
for (let snippet of Object.entries(filteredArchivedSnippets))
|
||||
archivedOutput +=
|
||||
'<div class="row">' +
|
||||
'<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">' +
|
||||
'<div class="card fluid">' +
|
||||
'<div class="card code-card">' +
|
||||
md
|
||||
.render(`\n${filteredArchivedSnippets[snippet[0]]}`)
|
||||
.replace(/<h3/g, `<h3 id="${snippet[0].toLowerCase()}" class="section double-padded"`)
|
||||
.replace(/<\/h3>/g, '</h3><div class="section double-padded">')
|
||||
.render(`\n${filteredArchivedSnippets[snippet[0]]}`)
|
||||
.replace(
|
||||
/<h3/g,
|
||||
`<div class="section card-content"><h4 id="${snippet[0].toLowerCase()}"`
|
||||
)
|
||||
.replace(
|
||||
/<\/h3>/g,
|
||||
'</h4>'
|
||||
)
|
||||
.replace(
|
||||
/<pre><code class="language-js">/m,
|
||||
'</div><div class="copy-button-container"><button class="copy-button"></button></div><pre><code class="language-js">'
|
||||
)
|
||||
.replace(
|
||||
/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
|
||||
(match, p1) =>
|
||||
@ -516,9 +397,9 @@ try {
|
||||
Prism.languages.javascript
|
||||
)}</pre>`
|
||||
)
|
||||
.replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
|
||||
'<button class="primary clipboard-copy">📋 Copy to clipboard</button>' +
|
||||
'</div></div></div></div>';
|
||||
.replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
|
||||
.replace(/<\/pre>\s+<pre class="/g, '</pre><label class="collapse">examples</label><pre class="section card-examples ') +
|
||||
'</div>';
|
||||
|
||||
// Optimize punctuation nodes
|
||||
archivedOutput = util.optimizeNodes(
|
||||
@ -566,5 +447,80 @@ try {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Create the output for the glossary.html file
|
||||
try {
|
||||
// Add the static part
|
||||
glossaryOutput += `${glossaryStartPart + '\n'}`;
|
||||
|
||||
// Filter README.md from folder
|
||||
const excludeFiles = ['README.md'];
|
||||
|
||||
const filteredGlossarySnippets = Object.keys(glossarySnippets)
|
||||
.filter(key => !excludeFiles.includes(key))
|
||||
.reduce((obj, key) => {
|
||||
obj[key] = glossarySnippets[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
// Generate glossary snippets from md files
|
||||
for (let snippet of Object.entries(filteredGlossarySnippets))
|
||||
glossaryOutput +=
|
||||
'<div class="card code-card"><div class="section card-content">' +
|
||||
md
|
||||
.render(`\n${filteredGlossarySnippets[snippet[0]]}`)
|
||||
.replace(
|
||||
/<h3/g,
|
||||
`<h4 id="${snippet[0].toLowerCase()}"`
|
||||
)
|
||||
.replace(
|
||||
/<\/h3>/g,
|
||||
'</h4>'
|
||||
) +
|
||||
'</div></div>';
|
||||
|
||||
glossaryOutput += `${glossaryEndPart}`;
|
||||
|
||||
// Generate and minify 'glossary.html' file
|
||||
const minifiedGlossaryOutput = minify(glossaryOutput, {
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
decodeEntities: false,
|
||||
minifyCSS: true,
|
||||
minifyJS: true,
|
||||
keepClosingSlash: true,
|
||||
processConditionalComments: true,
|
||||
removeAttributeQuotes: false,
|
||||
removeComments: true,
|
||||
removeEmptyAttributes: false,
|
||||
removeOptionalTags: false,
|
||||
removeScriptTypeAttributes: false,
|
||||
removeStyleLinkTypeAttributes: false,
|
||||
trimCustomFragments: true
|
||||
});
|
||||
|
||||
fs.writeFileSync(path.join(docsPath, 'glossary.html'), minifiedGlossaryOutput);
|
||||
console.log(`${chalk.green('SUCCESS!')} glossary.html file generated!`);
|
||||
} catch (err) {
|
||||
console.log(`${chalk.red('ERROR!')} During glossary.html generation: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Copy about.html
|
||||
try {
|
||||
fs.copyFileSync(path.join(staticPartsPath, 'about.html'), path.join(docsPath, 'about.html'));
|
||||
console.log(`${chalk.green('SUCCESS!')} about.html file copied!`);
|
||||
} catch (err) {
|
||||
console.log(`${chalk.red('ERROR!')} During about.html copying: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
// Copy contributing.html
|
||||
try {
|
||||
fs.copyFileSync(path.join(staticPartsPath, 'contributing.html'), path.join(docsPath, 'contributing.html'));
|
||||
console.log(`${chalk.green('SUCCESS!')} contributing.html file copied!`);
|
||||
} catch (err) {
|
||||
console.log(`${chalk.red('ERROR!')} During contributing.html copying: ${err}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Log the time taken
|
||||
console.timeEnd('Webber');
|
||||
|
||||
128
static-parts/about.html
Normal file
128
static-parts/about.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>About - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
|
||||
<h2 class="category-name">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br />
|
||||
<h2 class="category-name">Maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="category-name">Past maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
|
||||
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 class="category-name">License</h2>
|
||||
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
|
||||
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
|
||||
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
|
||||
always credit us, but that is not mandatory.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,7 +1,18 @@
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="scroll-to-top">↑</button>
|
||||
<br/>
|
||||
<footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>. <br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@ -9,12 +9,12 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Snippets Archive - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
@ -22,11 +22,25 @@
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
<script>
|
||||
const search = (node) => {
|
||||
let matchingTags = [];
|
||||
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if(data.includes(true)){
|
||||
x.style.display = '';
|
||||
matchingTags.push(x.getAttribute('tags').split(',')[0]);
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
|
||||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||||
})
|
||||
}
|
||||
function scrollToTop(){
|
||||
const c = document.querySelector('html').scrollTop;
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('html').scrollTo(0, c - c / 4);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
@ -45,13 +59,25 @@
|
||||
};
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if(window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
@ -70,30 +96,19 @@
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
else if (event.target.classList.contains('scroll-to-top')){
|
||||
scrollToTop();
|
||||
}
|
||||
else if (event.target.classList.contains('sublink-1')){
|
||||
if(event.target.getAttribute("href").includes('./')) return;
|
||||
event.preventDefault();
|
||||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<div id="splash">
|
||||
<h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</a></h1>
|
||||
<p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
|
||||
<p id="doc-link"><a href="./array" class="button">View collection</a></p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Snippets Archive</h2>
|
||||
<p style="text-align: justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Snippets Archive</h2>
|
||||
<p style="text-align: justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br />
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Snippets for Beginners - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
@ -84,7 +84,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<div id="splash">
|
||||
<h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</a></h1>
|
||||
<p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
|
||||
|
||||
79
static-parts/contributing.html
Normal file
79
static-parts/contributing.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Contributing - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">How to contribute</h2>
|
||||
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p><br/>
|
||||
<h3 class="category-name">1. Create</h3>
|
||||
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippet-template.md">snippet template</a>. Make sure to follow these simple guidelines:</p>
|
||||
<ul style="text-align: justify">
|
||||
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
|
||||
<li>Use the snippet description to explain what your snippet does and how it works.</li>
|
||||
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
|
||||
<li>Remember to provide an example of how your snippet works.</li>
|
||||
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
|
||||
<li>Never modify README.md or any of the HTML files.</li>
|
||||
</ul><br />
|
||||
<h3 class="category-name">2. Tag</h3>
|
||||
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemented function.</p><br />
|
||||
<h3 class="category-name">3. Test</h3>
|
||||
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p><br />
|
||||
<h3 class="category-name">4. Pull request</h3>
|
||||
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
18
static-parts/glossary-page-end.html
Normal file
18
static-parts/glossary-page-end.html
Normal file
@ -0,0 +1,18 @@
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
114
static-parts/glossary-page-start.html
Normal file
114
static-parts/glossary-page-start.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Glossary - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
<script>
|
||||
const search = (node) => {
|
||||
let matchingTags = [];
|
||||
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if(data.includes(true)){
|
||||
x.style.display = '';
|
||||
matchingTags.push(x.getAttribute('tags').split(',')[0]);
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
|
||||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||||
})
|
||||
}
|
||||
function scrollToTop(){
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
if (duration <= 0) return;
|
||||
var difference = to - element.scrollTop;
|
||||
var perTick = difference / duration * 40;
|
||||
|
||||
setTimeout(function() {
|
||||
element.scrollTop = element.scrollTop + perTick;
|
||||
if (element.scrollTop === to) {
|
||||
window.location.href = "#"+id;
|
||||
return;
|
||||
}
|
||||
scrollTo(element, to, id, duration - 40);
|
||||
}, 40);
|
||||
};
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if(window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(textArea);
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function() {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(tst);
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Glossary</h2>
|
||||
<p style="text-align: justify">Developers use a lot of terminology daily. Every once in a while, you might find a term you do not know. We know how frustrating that can get, so we provide you with a handy glossary of frequently used web development terms.</p><br />
|
||||
@ -1,273 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<title>30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<div id="splash">
|
||||
<h1 id="logo"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</h1>
|
||||
<p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
|
||||
<p id="doc-link"><a href="./array" class="button">View collection</a></p>
|
||||
</div>
|
||||
<div id="in-numbers">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-code" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
|
||||
<p><span id="snippet-count">$snippet-count</span><br/>snippets</p>
|
||||
</div>
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 16 16" class="octicon octicon-organization" aria-hidden="true"><path fill-rule="evenodd" d="M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088A6.78 6.78 0 0 1 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4z"/></svg>
|
||||
<p><span id="contrib-count">$contrib-count</span><br/>contributors</p>
|
||||
</div>
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 10 16" class="octicon octicon-git-branch" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
|
||||
<p><span id="commit-count">$commit-count</span><br/>commits</p>
|
||||
</div>
|
||||
<div class="col-sm-3 no-padding" style="text-align: center">
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-star" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
|
||||
<p><span id="star-count">$star-count</span><br/>stars</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<div class="card fluid">
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-2 col-lg-3 no-padding" id="license-icon"><svg version="1.1" width="64" height="64" viewBox="0 0 14 16" class="octicon octicon-law" aria-hidden="true"><path fill-rule="evenodd" d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"/></svg>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-10 col-lg-9 no-padding" style="padding:0"><p style="text-align: justify" id="license">In order for <strong>30 seconds of code</strong> to be as accessible and useful as possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0 License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can always credit us, but that is not mandatory.</p></div>
|
||||
</div>
|
||||
</div><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Today's picks</h2>
|
||||
<p>Our sophisticated robot helpers pick new snippets from our collection daily, so that you can discover new snippets to enhance your projects:</p>
|
||||
<div id="pick-slider">
|
||||
<button class="next" aria-label="next"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-right" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3l5 5z"/></svg></button>
|
||||
<button class="previous" aria-label="previous"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-left" aria-hidden="true"><path fill-rule="evenodd" d="M6 3l1.5 1.5L3.75 8l3.75 3.5L6 13 1 8l5-5z"/></svg></button>
|
||||
$daily-picks
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Getting started</h2>
|
||||
<ul id="links">
|
||||
<li>If you are new to JavaScript, we suggest you start by taking a look at the <a href="./beginner">Beginner's snippets</a></li>
|
||||
<li>If you want to level up your JavaScript skills, check out the full <a href="./array">Snippet collection</a></li>
|
||||
<li>If you want to see how the project was built and contribute, visit our <a href="https://github.com/Chalarangelo/30-seconds-of-code">Github repository</a></li>
|
||||
<li>If you want to check out some more complex snippets, you can visit the <a href="./archive">Archive</a></li>
|
||||
</ul><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">Top contributors</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo"/>
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" alt="fejes713"/>
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Feješ</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu"/>
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks"/>
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins"/>
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kriadmin.png" alt="kriadmin"/>
|
||||
<a href="https://github.com/kriadmin" class="section button">Rohit Tanwar</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena"/>
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena Soleimani</a>
|
||||
</div></div>
|
||||
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31"/>
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2 class="index-section">How to contribute</h2>
|
||||
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">1</span>
|
||||
<div class="section">
|
||||
<h3>Create</h3>
|
||||
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippet-template.md">snippet template</a>. Make sure to follow these simple guidelines:</p>
|
||||
<ul style="text-align: justify">
|
||||
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
|
||||
<li>Use the snippet description to explain what your snippet does and how it works.</li>
|
||||
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
|
||||
<li>Remember to provide an example of how your snippet works.</li>
|
||||
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
|
||||
<li>Never modify README.md or any of the HTML files.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">2</span>
|
||||
<div class="section">
|
||||
<h3>Tag</h3>
|
||||
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemented function.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">3</span>
|
||||
<div class="section">
|
||||
<h3>Test</h3>
|
||||
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid contribution-guideline">
|
||||
<span class="contribution-number">4</span>
|
||||
<div class="section">
|
||||
<h3>Pull request</h3>
|
||||
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>If you need additional pointers about writing a snippet, be sure to read the complete <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md">contribution guidelines</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>. <br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#star-count'];
|
||||
let values = [$snippet-count,$contrib-count,$commit-count,$star-count];
|
||||
let steps = [1,1,8,42];
|
||||
runCounter(counters[0],0,values[0],steps[0]);
|
||||
runCounter(counters[1],0,values[1],steps[1]);
|
||||
runCounter(counters[2],0,values[2],steps[2]);
|
||||
runCounter(counters[3],0,values[3],steps[3]);
|
||||
document.querySelector('button.next').addEventListener('click', function(e){
|
||||
let selected = document.getElementById('pick-slider').querySelector('.selected');
|
||||
if(selected == Array.from(document.querySelectorAll('.card.fluid.pick')).slice(-1)[0])
|
||||
{
|
||||
document.querySelector('.card.fluid.pick').className = 'card fluid pick selected';
|
||||
}
|
||||
else {
|
||||
selected.nextElementSibling.className = 'card fluid pick selected';
|
||||
}
|
||||
selected.className = 'card fluid pick';
|
||||
});
|
||||
|
||||
document.querySelector('button.previous').addEventListener('click', function(e){
|
||||
let selected = document.getElementById('pick-slider').querySelector('.selected');
|
||||
if(selected == document.querySelector('.card.fluid.pick'))
|
||||
{
|
||||
Array.from(document.querySelectorAll('.card.fluid.pick')).slice(-1)[0].className = 'card fluid pick selected';
|
||||
}
|
||||
else {
|
||||
selected.previousElementSibling.className = 'card fluid pick selected';
|
||||
}
|
||||
selected.className = 'card fluid pick';
|
||||
});
|
||||
document.addEventListener('click', function (event) {
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(textArea);
|
||||
let tst = document.createElement('div');
|
||||
tst.classList = 'toast';
|
||||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||||
document.body.appendChild(tst);
|
||||
setTimeout(function() {
|
||||
tst.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(tst);
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
|
||||
}, false);
|
||||
}
|
||||
function runCounter(selector, start, end, increment = 1, duration = 2000){
|
||||
let current = start,
|
||||
step = end > start ? increment : -increment,
|
||||
timer = setInterval(function() {
|
||||
current += step;
|
||||
document.querySelector(selector).innerHTML = current;
|
||||
if (current >= end) document.querySelector(selector).innerHTML = end;
|
||||
if (current >= end) clearInterval(timer);
|
||||
}, Math.abs(Math.floor(duration / (end - start))));
|
||||
};
|
||||
|
||||
function elementIsVisibleInViewport(el, partiallyVisible = false) {
|
||||
const { top, left, bottom, right } = el.getBoundingClientRect();
|
||||
const { innerHeight, innerWidth } = window;
|
||||
return partiallyVisible
|
||||
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
|
||||
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
|
||||
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +1,13 @@
|
||||
<button class="scroll-to-top">↑</button>
|
||||
<footer>
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license. <br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
|
||||
</footer>
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
|
||||
<br/>
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -9,7 +9,7 @@
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>$tag - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
@ -24,7 +24,7 @@
|
||||
<script>
|
||||
const search = (node) => {
|
||||
let matchingTags = [];
|
||||
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
|
||||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||||
if(data.includes(true)){
|
||||
x.style.display = '';
|
||||
@ -32,15 +32,15 @@
|
||||
}
|
||||
else x.style.display = 'none';
|
||||
});
|
||||
Array.from(node.parentElement.parentElement.getElementsByTagName('h3')).forEach(x => {
|
||||
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
|
||||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||||
})
|
||||
}
|
||||
function scrollToTop(){
|
||||
const c = document.querySelector('main').scrollTop;
|
||||
const c = document.querySelector('.card-container').scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
document.querySelector('main').scrollTo(0, c - c / 4);
|
||||
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
||||
}
|
||||
};
|
||||
function scrollTo(element, to, id, duration) {
|
||||
@ -60,21 +60,24 @@
|
||||
function loader() {
|
||||
registerClickListener();
|
||||
if(window.innerWidth >= '768')
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === '$tag')[0].offsetTop - 130;
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
else
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === '$tag')[0].offsetTop - 65;
|
||||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
|
||||
}
|
||||
function registerClickListener() {
|
||||
document.addEventListener('click', function (event) {
|
||||
if( document.getElementById('doc-drawer-checkbox').checked ) {
|
||||
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
}
|
||||
}
|
||||
if ( event.target.classList.contains('collapse') ) {
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||||
}
|
||||
else if (event.target.classList.contains('clipboard-copy')) {
|
||||
else if (event.target.classList.contains('menu-button')) {
|
||||
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
||||
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
||||
}
|
||||
else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
|
||||
document.querySelector('nav').classList = '';
|
||||
document.querySelector('.menu-button').classList = 'menu-button';
|
||||
}
|
||||
else if (event.target.classList.contains('copy-button')) {
|
||||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text.trim();
|
||||
@ -93,30 +96,18 @@
|
||||
},300);
|
||||
},1700);
|
||||
}
|
||||
else if (event.target.classList.contains('scroll-to-top')){
|
||||
scrollToTop();
|
||||
}
|
||||
else if (event.target.classList.contains('sublink-1')){
|
||||
if(event.target.getAttribute("href").includes('./')) return;
|
||||
event.preventDefault();
|
||||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="loader()">
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<header style="height: 3.5rem; box-sizing: border-box; overflow: hidden;">
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" style="height: 3.5rem; padding:0.375rem; box-sizing: border-box;" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
|
||||
<button class="menu-button"></button>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
|
||||
</header>
|
||||
<div class="row" style="height: calc(100vh - 3.5rem);overflow: hidden;">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" style="border-top: 0">
|
||||
<div class="input-group vertical">
|
||||
<input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search...">
|
||||
</div>
|
||||
<div class="container card-container">
|
||||
<nav>
|
||||
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search...">
|
||||
|
||||
50
tag_database
50
tag_database
@ -1,5 +1,5 @@
|
||||
all:array,function
|
||||
allEqual:array,function
|
||||
allEqual:array,function,beginner
|
||||
any:array,function
|
||||
approximatelyEqual:math
|
||||
arrayToCSV:array,string,utility
|
||||
@ -42,7 +42,7 @@ createElement:browser,utility
|
||||
createEventHub:browser,event,advanced
|
||||
CSVToArray:string,array,utility
|
||||
CSVToJSON:string,array,object,advanced
|
||||
currentURL:browser,url
|
||||
currentURL:browser,url,beginner
|
||||
curry:function,recursion
|
||||
debounce:function
|
||||
decapitalize:string,array
|
||||
@ -70,11 +70,11 @@ elo:math,array,advanced
|
||||
equals:object,array,type,advanced
|
||||
escapeHTML:string,browser,regexp
|
||||
escapeRegExp:string,regexp
|
||||
everyNth:array
|
||||
everyNth:array,beginner
|
||||
extendHex:utility,string
|
||||
factorial:math,recursion
|
||||
fibonacci:math,array
|
||||
filterNonUnique:array
|
||||
factorial:math,recursion,beginner
|
||||
fibonacci:math,array,beginner
|
||||
filterNonUnique:array,beginner
|
||||
filterNonUniqueBy:array,function
|
||||
findKey:object,function
|
||||
findLast:array
|
||||
@ -90,19 +90,19 @@ forOwnRight:object
|
||||
fromCamelCase:string
|
||||
functionName:function,utility
|
||||
functions:object,function
|
||||
gcd:math,recursion
|
||||
gcd:math,recursion,beginner
|
||||
geometricProgression:math
|
||||
get:object
|
||||
getColonTimeFromDate:date
|
||||
getDaysDiffBetweenDates:date
|
||||
getMeridiemSuffixOfInteger:date
|
||||
getMeridiemSuffixOfInteger:date,beginner
|
||||
getScrollPosition:browser
|
||||
getStyle:browser,css
|
||||
getType:type
|
||||
getURLParameters:utility,browser,string,url
|
||||
groupBy:array,object
|
||||
hammingDistance:math
|
||||
hasClass:browser,css
|
||||
hasClass:browser,css,beginner
|
||||
hasFlags:node
|
||||
hashBrowser:browser,utility,advanced,promise
|
||||
hashNode:node,utility,promise
|
||||
@ -134,9 +134,9 @@ isArrayLike:type,array
|
||||
isBoolean:type
|
||||
isBrowser:utility,browser
|
||||
isBrowserTabFocused:browser
|
||||
isDivisible:math
|
||||
isDivisible:math,beginner
|
||||
isEmpty:type,array,object,string
|
||||
isEven:math
|
||||
isEven:math,beginner
|
||||
isFunction:type,function
|
||||
isLowerCase:string,utility
|
||||
isNil:type
|
||||
@ -145,7 +145,7 @@ isNumber:type,math
|
||||
isObject:type,object
|
||||
isObjectLike:type,object
|
||||
isPlainObject:type,object
|
||||
isPrime:math
|
||||
isPrime:math,beginner
|
||||
isPrimitive:type,function,array,string
|
||||
isPromiseLike:type,function,promise
|
||||
isSorted:array
|
||||
@ -158,8 +158,8 @@ isValidJSON:type,json
|
||||
join:array
|
||||
JSONtoCSV:array,string,object,advanced
|
||||
JSONToFile:node,json
|
||||
last:array
|
||||
lcm:math,recursion
|
||||
last:array,beginner
|
||||
lcm:math,recursion,beginner
|
||||
longestItem:array,string,utility
|
||||
lowercaseKeys:object
|
||||
luhnCheck:math,utility
|
||||
@ -171,11 +171,11 @@ mask:string,utility,regexp
|
||||
matches:object,type
|
||||
matchesWith:object,type,function
|
||||
maxBy:math,array,function
|
||||
maxN:array,math
|
||||
maxN:array,math,beginner
|
||||
median:math,array
|
||||
memoize:function
|
||||
merge:object,array
|
||||
minBy:math,array,function
|
||||
minBy:math,array,function,beginner
|
||||
minN:array,math
|
||||
mostPerformant:utility,function
|
||||
negate:function
|
||||
@ -183,12 +183,12 @@ nest:object
|
||||
nodeListToArray:browser,array
|
||||
none:array,function
|
||||
nthArg:utility,function
|
||||
nthElement:array
|
||||
nthElement:array,beginner
|
||||
objectFromPairs:object,array
|
||||
objectToPairs:object,array
|
||||
observeMutations:browser,event,advanced
|
||||
off:browser,event
|
||||
offset:array
|
||||
offset:array,beginner
|
||||
omit:object,array
|
||||
omitBy:object,array,function
|
||||
on:browser,event
|
||||
@ -222,7 +222,7 @@ pullBy:array,function,advanced
|
||||
radsToDegrees:math
|
||||
randomHexColorCode:utility,random
|
||||
randomIntArrayInRange:math,utility,random
|
||||
randomIntegerInRange:math,utility,random
|
||||
randomIntegerInRange:math,utility,random,beginner
|
||||
randomNumberInRange:math,utility,random
|
||||
readFileLines:node,array,string
|
||||
rearg:adapter,function
|
||||
@ -235,12 +235,12 @@ reject:array
|
||||
remove:array
|
||||
removeNonASCII:string,regexp
|
||||
renameKeys:object
|
||||
reverseString:string,array
|
||||
reverseString:string,array,beginner
|
||||
RGBToHex:utility
|
||||
round:math
|
||||
runAsync:browser,function,advanced,promise,url
|
||||
runPromisesInSeries:function,promise
|
||||
sample:array,random
|
||||
sample:array,random,beginner
|
||||
sampleSize:array,random
|
||||
scrollToTop:browser
|
||||
sdbm:math,utility
|
||||
@ -249,7 +249,7 @@ setStyle:browser
|
||||
shallowClone:object
|
||||
show:browser,css
|
||||
shuffle:array,random
|
||||
similarity:array,math
|
||||
similarity:array,math,beginner
|
||||
size:object,array,string
|
||||
sleep:function,promise
|
||||
smoothScroll:browser,css
|
||||
@ -264,13 +264,13 @@ stableSort:array,sort,advanced
|
||||
standardDeviation:math,array
|
||||
stringPermutations:string,recursion
|
||||
stripHTMLTags:string,utility,regexp
|
||||
sum:math,array
|
||||
sum:math,array,beginner
|
||||
sumBy:math,array,function
|
||||
sumPower:math
|
||||
symmetricDifference:array,math
|
||||
symmetricDifferenceBy:array,function
|
||||
symmetricDifferenceWith:array,function
|
||||
tail:array
|
||||
tail:array,beginner
|
||||
take:array
|
||||
takeRight:array
|
||||
takeRightWhile:array,function
|
||||
@ -290,7 +290,7 @@ toSafeInteger:math
|
||||
toSnakeCase:string,regexp
|
||||
transform:object,array
|
||||
triggerEvent:browser,event
|
||||
truncateString:string
|
||||
truncateString:string,beginner
|
||||
truthCheckCollection:object,logic,array
|
||||
unary:adapter,function
|
||||
uncurry:function
|
||||
|
||||
Reference in New Issue
Block a user