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

Google analytics and some cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2018-04-07 18:18:13 +03:00
parent b8b99bc399
commit bec813b551
20 changed files with 183 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/adapter.html
View File

File diff suppressed because one or more lines are too long

7
docs/array.html
View File

File diff suppressed because one or more lines are too long

17
docs/beginner.html
View File

@ -1,12 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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"> <link rel="stylesheet" href="./mini.css">
<title>Snippets for Beginners - 30 seconds of code</title> <title>Snippets for Beginners - 30 seconds of code</title>
<meta charset="utf-8"> <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="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="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"> <meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="30 seconds of code"> <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:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
@ -75,11 +83,11 @@
</script> </script>
</head> </head>
<body onload="loader()"> <body onload="loader()">
<a href="https://github.com/Chalarangelo/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:#151513; color:#e15564; position: absolute; 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" 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"> <div id="splash">
<h1 id="logo"><img src="https://30secondsofcode.org/favicon.png" alt="logo"> 30 seconds of code</h1> <h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/favicon.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="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="#" class="button">View collection</a></p> <p id="doc-link"><a href="./array" class="button">View collection</a></p>
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -281,6 +289,7 @@ Return the string truncated to the desired length, with <code>'...'</code> appen
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div> </div> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div> </div>
</div> </div>
<button class="scroll-to-top">&uarr;</button> <button class="scroll-to-top">&uarr;</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>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer> <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>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
</body> </body>
</html> </html>

7
docs/browser.html
View File

File diff suppressed because one or more lines are too long

7
docs/date.html
View File

File diff suppressed because one or more lines are too long

7
docs/function.html
View File

File diff suppressed because one or more lines are too long

106
docs/index.html
View File

@ -1,6 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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"> <link rel="stylesheet" href="./mini.css">
<title>30 seconds of code</title> <title>30 seconds of code</title>
<meta charset="utf-8"> <meta charset="utf-8">
@ -14,10 +22,11 @@
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
</head> </head>
<body> <body>
<a href="https://github.com/Chalarangelo/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:#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"> <div id="splash">
<h1 id="logo"><img src="https://30secondsofcode.org/favicon.png" alt="logo"> 30 seconds of code</h1> <h1 id="logo"><img src="https://30secondsofcode.org/favicon.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="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="#" class="button">View collection</a></p> <p id="doc-link"><a href="./array" class="button">View collection</a></p>
</div> </div>
<div id="in-numbers"> <div id="in-numbers">
<div class="container"> <div class="container">
@ -36,7 +45,7 @@
</div> </div>
<div class="col-sm-3 no-padding" style="text-align: center"> <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> <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">19461</span><br/>stars</p> <p><span id="star-count">19462</span><br/>stars</p>
</div> </div>
</div> </div>
</div> </div>
@ -62,47 +71,60 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"> <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> <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"> <div id="pick-slider">
<button class="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="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"><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> <button class="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>
<div class="card fluid pick selected"><h3 id="palindrome.md" class="section double-padded">palindrome</h3><div class="section double-padded"> <div class="card fluid pick selected"><h3 id="rgbtohex.md" class="section double-padded">RGBToHex</h3><div class="section double-padded">
<p>Returns <code>true</code> if the given string is a palindrome, <code>false</code> otherwise.</p> <p>Converts the values of RGB components to a color code.</p>
<p>Convert string <code>String.toLowerCase()</code> and use <code>String.replace()</code> to remove non-alphanumeric characters from it. <p>Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<code>&lt;&lt;</code>) and <code>toString(16)</code>, then <code>String.padStart(6,'0')</code> to get a 6-digit hexadecimal value.</p>
Then, <code>String.split('')</code> into individual characters, <code>Array.reverse()</code>, <code>String.join('')</code> and compare to the original, unreversed string, after converting it <code>String.tolowerCase()</code>.</p> <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">RGBToHex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>r<span class="token punctuation">,</span> g<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>r <span class="token operator">&lt;&lt;</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span>g <span class="token operator">&lt;&lt;</span> <span class="token number">8</span><span class="token punctuation">)</span> <span class="token operator">+</span> b<span class="token punctuation">).</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">).</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">);</span>
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">palindrome</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span> </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">RGBToHex</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 'ffa501'</span>
<span class="token keyword">const</span> s <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">().</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[\W_]/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
s <span class="token operator">===</span>
s
<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><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">palindrome</span><span class="token punctuation">(</span><span class="token string">'taco cat'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="samplesize.md" class="section double-padded">sampleSize</h3><div class="section double-padded"> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="throttle.md" class="section double-padded">throttle</h3><div class="section double-padded">
<p>Gets <code>n</code> random elements at unique keys from <code>array</code> up to the size of <code>array</code>.</p> <p>Creates a throttled function that only invokes the provided function at most once per every <code>wait</code> milliseconds</p>
<p>Shuffle the array using the <a href="https://github.com/chalarangelo/30-seconds-of-code#shuffle">Fisher-Yates algorithm</a>. <p>Use <code>setTimeout()</code> and <code>clearTimeout()</code> to throttle the given method, <code>fn</code>.
Use <code>Array.slice()</code> to get the first <code>n</code> elements. Use <code>Function.apply()</code> to apply the <code>this</code> context to the function and provide the necessary <code>arguments</code>.
Omit the second argument, <code>n</code> to get only one element at random from the array.</p> Use <code>Date.now()</code> to keep track of the last time the throttled function was invoked.
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sampleSize</span> <span class="token operator">=</span> <span class="token punctuation">([</span><span class="token operator">...</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> Omit the second argument, <code>wait</code>, to set the timeout at a default of 0 ms.</p>
<span class="token keyword">let</span> m <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">throttle</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> wait<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">while</span> <span class="token punctuation">(</span>m<span class="token punctuation">) {</span> <span class="token keyword">let</span> inThrottle<span class="token punctuation">,</span> lastFn<span class="token punctuation">,</span> lastTime<span class="token punctuation">;</span>
<span class="token keyword">const</span> i <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> m<span class="token operator">--</span><span class="token punctuation">); <span class="token keyword">return function</span><span class="token punctuation">() {</span>
[</span>arr<span class="token punctuation">[</span>m<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>m<span class="token punctuation">]]; <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
}</span> args <span class="token operator">=</span> arguments<span class="token punctuation">;</span>
<span class="token keyword">return</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> n<span class="token punctuation">); <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>inThrottle<span class="token punctuation">) {</span>
fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">);</span>
lastTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();</span>
inThrottle <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;
}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>lastFn<span class="token punctuation">);</span>
lastFn <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">() {</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> lastTime <span class="token operator">>=</span> wait<span class="token punctuation">) {</span>
fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">);</span>
lastTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();
}
},</span> wait <span class="token operator">-</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">()</span> <span class="token operator">-</span> lastTime<span class="token punctuation">));
}
};
};</span> };</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sampleSize</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,1]</span> </pre><label class="collapse">Show examples</label><pre class="language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
<span class="token function">sampleSize</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">// [2,3,1]</span> <span class="token string">'resize'</span><span class="token punctuation">,</span>
<span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">) {</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">);</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">);
},</span> <span class="token number">250</span><span class="token punctuation">)
);</span> <span class="token comment">// Will log the window dimensions at most every 250ms</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="spreadover.md" class="section double-padded">spreadOver</h3><div class="section double-padded"> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="tocurrency.md" class="section double-padded">toCurrency</h3><div class="section double-padded">
<p>Takes a variadic function and returns a closure that accepts an array of arguments to map to the inputs of the function.</p> <p>Take a number and return specified currency formatting.</p>
<p>Use closures and the spread operator (<code>...</code>) to map the array of arguments to the inputs of the function.</p> <p>Use <code>Intl.NumberFormat</code> to enable country / currency sensitive formatting.</p>
<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">spreadOver</span> <span class="token operator">=</span> fn <span class="token operator">=></span> argsArr <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>argsArr<span class="token punctuation">);</span> <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toCurrency</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> curr<span class="token punctuation">,</span> LanguageFormat <span class="token operator">=</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> arrayMax <span class="token operator">=</span> <span class="token function">spreadOver</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>max<span class="token punctuation">);</span> Intl<span class="token punctuation">.</span><span class="token function">NumberFormat</span><span class="token punctuation">(</span>LanguageFormat<span class="token punctuation">, {</span> style<span class="token punctuation">:</span> <span class="token string">'currency'</span><span class="token punctuation">,</span> currency<span class="token punctuation">:</span> curr <span class="token punctuation">}).</span><span class="token function">format</span><span class="token punctuation">(</span>n<span class="token punctuation">);</span>
<span class="token function">arrayMax</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><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'EUR'</span><span class="token punctuation">);</span> <span class="token comment">// €123,456.79 | currency: Euro | currencyLangFormat: Local</span>
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'USD'</span><span class="token punctuation">,</span> <span class="token string">'en-us'</span><span class="token punctuation">);</span> <span class="token comment">// $123,456.79 | currency: US Dollar | currencyLangFormat: English (United States)</span>
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">123456.789</span><span class="token punctuation">,</span> <span class="token string">'USD'</span><span class="token punctuation">,</span> <span class="token string">'fa'</span><span class="token punctuation">);</span> <span class="token comment">// ۱۲۳٬۴۵۶٫۷۹ ؜$ | currency: US Dollar | currencyLangFormat: Farsi</span>
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">322342436423.2435</span><span class="token punctuation">,</span> <span class="token string">'JPY'</span><span class="token punctuation">);</span> <span class="token comment">// ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local</span>
<span class="token function">toCurrency</span><span class="token punctuation">(</span><span class="token number">322342436423.2435</span><span class="token punctuation">,</span> <span class="token string">'JPY'</span><span class="token punctuation">,</span> <span class="token string">'fi'</span><span class="token punctuation">);</span> <span class="token comment">// 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>
<br/> <br/>
@ -115,10 +137,10 @@ Omit the second argument, <code>n</code> to get only one element at random from
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"> <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> <h2 class="index-section">Getting started</h2>
<ul id="links"> <ul id="links">
<li>If you are new to JavaScript, we suggest you start by taking a look at the <a href="#">Beginner's snippets</a></li> <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 tour JavaScript skills, check out the full <a href="#">Snippet collection</a></li> <li>If you want to level up tour 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="#">Github repository</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</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/> </ul><br/>
</div> </div>
</div> </div>
@ -221,7 +243,7 @@ Omit the second argument, <code>n</code> to get only one element at random from
<script> <script>
window.onload = function(){ window.onload = function(){
let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#star-count']; let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#star-count'];
let values = [295,113,3029,19461]; let values = [295,113,3029,19462];
let steps = [1,1,8,42]; let steps = [1,1,8,42];
runCounter(counters[0],0,values[0],steps[0]); runCounter(counters[0],0,values[0],steps[0]);
runCounter(counters[1],0,values[1],steps[1]); runCounter(counters[1],0,values[1],steps[1]);

7
docs/math.html
View File

File diff suppressed because one or more lines are too long

2
docs/mini.css
View File

File diff suppressed because one or more lines are too long

27
docs/mini/flavor.scss
View File

@ -209,14 +209,15 @@ header h1.logo {
position: relative; position: relative;
top: 0; top: 0;
transition: top 0.3s; transition: top 0.3s;
a { color: #111;
}
h1 a, h1 a:link, h1 a:visited {
text-decoration:none; text-decoration:none;
color: #111; color: #111;
} &:hover, &:focus {
@media screen and (min-width: 769px) { text-decoration:none;
&:hover { color: #111;
top: -3.5rem;
}
} }
} }
@ -226,6 +227,14 @@ header #title {
@media screen and (max-width: 768px) { display: none; } @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 { header h1 small {
display:block; display:block;
font-size: 0.875rem; font-size: 0.875rem;
@ -550,7 +559,7 @@ button#disclaimer-close{
} }
} }
h2 { h2.index-section {
border-left: 0.3125rem solid #de4a6d; border-left: 0.3125rem solid #de4a6d;
padding-left: 0.625rem; padding-left: 0.625rem;
margin-top: 2rem; margin-top: 2rem;
@ -764,3 +773,7 @@ button.next {
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
header {
}

7
docs/node.html
View File

File diff suppressed because one or more lines are too long

7
docs/object.html
View File

File diff suppressed because one or more lines are too long

7
docs/string.html
View File

File diff suppressed because one or more lines are too long

7
docs/type.html
View File

File diff suppressed because one or more lines are too long

7
docs/utility.html
View File

File diff suppressed because one or more lines are too long

4
scripts/web.js
View File

@ -159,7 +159,7 @@ try {
`</h3>`; `</h3>`;
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag)) for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
output += md output += md
.render(`[${taggedSnippet[0]}](./${tag}.html#${taggedSnippet[0].toLowerCase()})\n`) .render(`[${taggedSnippet[0]}](./${tag}#${taggedSnippet[0].toLowerCase()})\n`)
.replace(/<p>/g, '') .replace(/<p>/g, '')
.replace(/<\/p>/g, '') .replace(/<\/p>/g, '')
.replace(/<a/g, `<a class="sublink-1" tags="${taggedSnippet[1].join(',')}"`); .replace(/<a/g, `<a class="sublink-1" tags="${taggedSnippet[1].join(',')}"`);
@ -171,7 +171,7 @@ try {
for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))] for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))]
.filter(v => v) .filter(v => v)
.sort((a, b) => util.capitalize(a, true) === 'Uncategorized' ? 1 : util.capitalize(b, true) === 'Uncategorized' ? -1 : a.localeCompare(b))) { .sort((a, b) => util.capitalize(a, true) === 'Uncategorized' ? 1 : util.capitalize(b, true) === 'Uncategorized' ? -1 : a.localeCompare(b))) {
let localOutput = output.replace(/\$tag/g, util.capitalize(tag)).replace(new RegExp(`./${tag}.html#`,'g'),'#'); let localOutput = output.replace(/\$tag/g, util.capitalize(tag)).replace(new RegExp(`./${tag}#`,'g'),'#');
localOutput += md localOutput += md
.render(`## ${util.capitalize(tag, true)}\n`) .render(`## ${util.capitalize(tag, true)}\n`)
.replace(/<h2>/g, '<h2 style="text-align:center;">'); .replace(/<h2>/g, '<h2 style="text-align:center;">');

1
static-parts/beginner-page-end.html
View File

@ -1,6 +1,7 @@
</div> </div>
</div> </div>
<button class="scroll-to-top">&uarr;</button> <button class="scroll-to-top">&uarr;</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>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer> <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>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
</body> </body>
</html> </html>

16
static-parts/beginner-page-start.html
View File

@ -1,12 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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"> <link rel="stylesheet" href="./mini.css">
<title>Snippets for Beginners - 30 seconds of code</title> <title>Snippets for Beginners - 30 seconds of code</title>
<meta charset="utf-8"> <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="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="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"> <meta name="author" content="Stefan Feješ (ns.fejes.stefan@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="30 seconds of code"> <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:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
@ -75,11 +83,11 @@
</script> </script>
</head> </head>
<body onload="loader()"> <body onload="loader()">
<a href="https://github.com/Chalarangelo/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:#151513; color:#e15564; position: absolute; 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" 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"> <div id="splash">
<h1 id="logo"><img src="https://30secondsofcode.org/favicon.png" alt="logo"> 30 seconds of code</h1> <h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/favicon.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="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="#" class="button">View collection</a></p> <p id="doc-link"><a href="./array" class="button">View collection</a></p>
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">

40
static-parts/index.html
View File

@ -1,6 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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"> <link rel="stylesheet" href="./mini.css">
<title>30 seconds of code</title> <title>30 seconds of code</title>
<meta charset="utf-8"> <meta charset="utf-8">
@ -14,10 +22,11 @@
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
</head> </head>
<body> <body>
<a href="https://github.com/Chalarangelo/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:#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"> <div id="splash">
<h1 id="logo"><img src="https://30secondsofcode.org/favicon.png" alt="logo"> 30 seconds of code</h1> <h1 id="logo"><img src="https://30secondsofcode.org/favicon.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="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="#" class="button">View collection</a></p> <p id="doc-link"><a href="./array" class="button">View collection</a></p>
</div> </div>
<div id="in-numbers"> <div id="in-numbers">
<div class="container"> <div class="container">
@ -62,6 +71,7 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"> <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> <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"> <div id="pick-slider">
<button class="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="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"><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> <button class="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>
@ -76,10 +86,10 @@
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"> <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> <h2 class="index-section">Getting started</h2>
<ul id="links"> <ul id="links">
<li>If you are new to JavaScript, we suggest you start by taking a look at the <a href="#">Beginner's snippets</a></li> <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 tour JavaScript skills, check out the full <a href="#">Snippet collection</a></li> <li>If you want to level up tour 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="#">Github repository</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</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/> </ul><br/>
</div> </div>
</div> </div>
@ -215,6 +225,26 @@ window.onload = function(){
if ( event.target.classList.contains('collapse') ) { if ( event.target.classList.contains('collapse') ) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled'; 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); }, false);
} }
const runCounter = (selector, start, end, increment = 1, duration = 2000) => { const runCounter = (selector, start, end, increment = 1, duration = 2000) => {

17
static-parts/page-start.html
View File

@ -1,6 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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"> <link rel="stylesheet" href="./mini.css">
<title>$tag - 30 seconds of code</title> <title>$tag - 30 seconds of code</title>
<meta charset="utf-8"> <meta charset="utf-8">
@ -50,9 +58,6 @@
}; };
function loader() { function loader() {
registerClickListener(); registerClickListener();
window.setTimeout(function(){
document.getElementById('disclaimer').style.display = 'none';
}, 30000);
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === '$tag')[0].offsetTop - 60; document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === '$tag')[0].offsetTop - 60;
} }
function registerClickListener() { function registerClickListener() {
@ -98,11 +103,11 @@
</script> </script>
</head> </head>
<body onload="loader()"> <body onload="loader()">
<a href="https://github.com/Chalarangelo/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:#151513; color:#fff; position: absolute; 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" 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;"> <header style="height: 3.5rem; box-sizing: border-box; overflow: hidden;">
<h1 class="logo"><img src="favicon.png" style="height: 3.5rem;" alt="logo"/><span id="title">&nbsp;30 seconds of code</span> <h1 class="logo"><a href="./index"><img src="favicon.png" style="height: 3.5rem;" 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> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</h1> </a></h1>
<label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label> <label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
</header> </header>
<div class="row" style="height: calc(100vh - 3.5rem);overflow: hidden;"> <div class="row" style="height: calc(100vh - 3.5rem);overflow: hidden;">