andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 545

Browse Source
This commit is contained in:
30secondsofcode
2018-09-28 16:36:43 +00:00
parent 34fba9cf7c
commit 9961b3a52a
3 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/archive.html
View File

@ -2,7 +2,7 @@
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)){
if (data.includes(true)) {
x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]);
}
@ -12,7 +12,7 @@
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
})
}
function scrollToTop(){
function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
@ -24,33 +24,35 @@
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);
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')
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') ) {
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';
document.querySelector('[type="search"]').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') {
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {
@ -65,12 +67,12 @@
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function() {
setTimeout(function () {
tst.style.opacity = 0;
setTimeout(function() {
setTimeout(function () {
document.body.removeChild(tst);
},300);
},1700);
}, 300);
}, 1700);
}
}, false);
}</script></head><body onload="loader()" class="card-page"><a href="https://github.com/30-seconds/30-seconds-of-code" 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">&nbsp;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" aria-label="Copy to clipboard"></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>

34
docs/glossary.html
View File

File diff suppressed because one or more lines are too long

2
docs/math.html
View File

@ -234,7 +234,7 @@ own individual rating by supplying it as the third argument.
</pre><label class="collapse">examples</label><pre class="section card-examples 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></div><div class="card code-card"><div class="corner beginner"></div><div class="section card-content"><h4 id="randomnumberinrange">randomNumberInRange</h4><p>Returns a random number in the specified range.</p><p>Use <code>Math.random()</code> to generate a random value, map it to the desired range using multiplication.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">randomNumberInRange</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">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 punctuation">)</span> <span class="token operator">+</span> min<span class="token punctuation">;</span>
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">randomNumberInRange</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// 6.0211363285087005</span>
</pre></div><div class="card code-card"><div class="corner intermediate"></div><div class="section card-content"><h4 id="round">round</h4><p>Rounds a number to a specified amount of digits.</p><p>Use <code>Math.round()</code> and template literals to round the number to the specified number of digits. Omit the second argument, <code>decimals</code> to round to an integer.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">round</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> decimals <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`${Math.round(`</span></span>$<span class="token punctuation">{</span>n<span class="token punctuation">}</span>e$<span class="token punctuation">{</span>decimals<span class="token punctuation">}</span><span class="token template-string"><span class="token string">`)}e-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>decimals<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">);</span>
</pre></div><div class="card code-card"><div class="corner intermediate"></div><div class="section card-content"><h4 id="round">round</h4><p>Rounds a number to a specified amount of digits.</p><p>Use <code>Math.round()</code> and template literals to round the number to the specified number of digits. Omit the second argument, <code>decimals</code> to round to an integer.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">round</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> decimals <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>`$<span class="token punctuation">{</span>n<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">e</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>decimals<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)}</span>e<span class="token operator">-</span>$<span class="token punctuation">{</span>decimals<span class="token punctuation">}</span>`<span class="token punctuation">);</span>
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">1.005</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 1.01</span>
</pre></div><div class="card code-card"><div class="corner intermediate"></div><div class="section card-content"><h4 id="sdbm">sdbm</h4><p>Hashes the input string into a whole number.</p><p>Use <code>String.split('')</code> and <code>Array.reduce()</code> to create a hash of the input string, utilizing bit shifting.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">sdbm</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> str<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>