100 lines
28 KiB
HTML
100 lines
28 KiB
HTML
<!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>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">304</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">118</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">3233</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">20080</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 many of our snippets are not perfectly suited 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><div class="card fluid pick selected"><h3 id="converge.md" class="section double-padded">converge</h3><div class="section double-padded"><p>Accepts a converging function and a list of branching functions and returns a function that applies each branching function to the arguments and the results of the branching functions are passed as arguments to the converging function.</p><p>Use <code>Array.map()</code> and <code>Function.apply()</code> to apply each function to the given arguments. Use the spread operator (<code>...</code>) to call <code>coverger</code> with the results of all other functions.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">converge</span> <span class="token operator">=</span> <span class="token punctuation">(</span>converger<span class="token punctuation">,</span> fns<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">converger</span><span class="token punctuation">(</span><span class="token operator">...</span>fns<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>fn <span class="token operator">=></span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> args<span class="token punctuation">)));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> average <span class="token operator">=</span> <span class="token function">converge</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>
|
|
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> v<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> v<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">),</span>
|
|
arr <span class="token operator">=></span> arr<span class="token punctuation">.</span>length
|
|
<span class="token punctuation">]);</span>
|
|
<span class="token function">average</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">7</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 class="card fluid pick"><h3 id="mapvalues.md" class="section double-padded">mapValues</h3><div class="section double-padded"><p>Creates an object with the same keys as the provided object and values generated by running the provided function for each value.</p><p>Use <code>Object.keys(obj)</code> to iterate over the object's keys. Use <code>Array.reduce()</code> to create a new object with the same keys and mapped values using <code>fn</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">mapValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></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">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
acc<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>k<span class="token punctuation">],</span> k<span class="token punctuation">,</span> obj<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
|
}, {});</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
fred<span class="token punctuation">: {</span> user<span class="token punctuation">:</span> <span class="token string">'fred'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">},</span>
|
|
pebbles<span class="token punctuation">: {</span> user<span class="token punctuation">:</span> <span class="token string">'pebbles'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}
|
|
};</span>
|
|
<span class="token function">mapValues</span><span class="token punctuation">(</span>users<span class="token punctuation">,</span> u <span class="token operator">=></span> u<span class="token punctuation">.</span>age<span class="token punctuation">);</span> <span class="token comment">// { fred: 40, pebbles: 1 }</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid pick"><h3 id="sumpower.md" class="section double-padded">sumPower</h3><div class="section double-padded"><p>Returns the sum of the powers of all the numbers from <code>start</code> to <code>end</code> (both inclusive).</p><p>Use <code>Array.fill()</code> to create an array of all the numbers in the target range, <code>Array.map()</code> and the exponent operator (<code>**</code>) to raise them to <code>power</code> and <code>Array.reduce()</code> to add them together. Omit the second argument, <code>power</code>, to use a default power of <code>2</code>. Omit the third argument, <code>start</code>, to use a default starting value of <code>1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sumPower</span> <span class="token operator">=</span> <span class="token punctuation">(</span>end<span class="token punctuation">,</span> power <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
<span class="token function">Array</span><span class="token punctuation">(</span>end <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">-</span> start<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 operator">+</span> start<span class="token punctuation">)</span> <span class="token operator">**</span> power<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> a <span class="token operator">+</span> b<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">sumPower</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// 385</span>
|
|
<span class="token function">sumPower</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">//3025</span>
|
|
<span class="token function">sumPower</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">//2925</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><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 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="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="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 implemneted 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>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 = [304,118,3233,20080];
|
|
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> |