Update web.js, generate beginner.html

2018-04-07 12:51:41 +02:00
parent 185ea9d402
commit 96d7b5ce6f
3 changed files with 213 additions and 6 deletions
--- a/docs/beginner.html
+++ b/docs/beginner.html
@ -17,7 +17,7 @@
    <div id="splash">
      <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="doc-link"><a href="#" class="button">Home</a></p>
+      <p id="doc-link"><a href="#" class="button">View collection</a></p>
    </div>
    <div class="container">
      <div class="row">
@ -27,6 +27,189 @@
        </div>
      </div>
    </div>
-<div class="card fluid"><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>    <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>
+<div class="card fluid"><h3 id="currenturl.md" class="section double-padded">currentURL</h3><div class="section double-padded">
+<p>Returns the current URL.</p>
+<p>Use <code>window.location.href</code> to get current URL.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">currentURL</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">currentURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'https://google.com'</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="everynth.md" class="section double-padded">everyNth</h3><div class="section double-padded">
+<p>Returns every nth element in an array.</p>
+<p>Use <code>Array.filter()</code> to create a new array that contains every nth element of a given array.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">everyNth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> nth<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">%</span> nth <span class="token operator">===</span> nth <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">everyNth</span><span class="token punctuation">(</span><span class="token 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 punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 2, 4, 6 ]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="factorial.md" class="section double-padded">factorial</h3><div class="section double-padded">
+<p>Calculates the factorial of a number.</p>
+<p>Use recursion.
+If <code>n</code> is less than or equal to <code>1</code>, return <code>1</code>.
+Otherwise, return the product of <code>n</code> and the factorial of <code>n - 1</code>.
+Throws an exception if <code>n</code> is a negative number.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">factorial</span> <span class="token operator">=</span> n <span class="token operator">=></span>
+  n <span class="token operator">&lt;</span> <span class="token number">0</span>
+    <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token string">'Negative numbers are not allowed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">:</span> n <span class="token operator">&lt;=</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> n <span class="token operator">*</span> <span class="token function">factorial</span><span class="token punctuation">(</span>n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">factorial</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 720</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="fibonacci.md" class="section double-padded">fibonacci</h3><div class="section double-padded">
+<p>Generates an array, containing the Fibonacci sequence, up until the nth term.</p>
+<p>Create an empty array of the specific length, initializing the first two values (<code>0</code> and <code>1</code>).
+Use <code>Array.reduce()</code> to add values into the array, using the sum of the last two values, except for the first two.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fibonacci</span> <span class="token operator">=</span> n <span class="token operator">=></span>
+  Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> length<span class="token punctuation">:</span> n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>
+    <span class="token punctuation">(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> acc<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> acc<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> i<span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token punctuation">[</span><span class="token punctuation">]</span>
+  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">fibonacci</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [0, 1, 1, 2, 3, 5]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="filternonunique.md" class="section double-padded">filterNonUnique</h3><div class="section double-padded">
+<p>Filters out the non-unique values in an array.</p>
+<p>Use <code>Array.filter()</code> for an array containing only the unique values.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">filterNonUnique</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>i <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">===</span> arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">filterNonUnique</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,3,5]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="gcd.md" class="section double-padded">gcd</h3><div class="section double-padded">
+<p>Calculates the greatest common divisor between two or more numbers/arrays.</p>
+<p>The inner <code>_gcd</code> function uses recursion.
+Base case is when <code>y</code> equals <code>0</code>. In this case, return <code>x</code>.
+Otherwise, return the GCD of <code>y</code> and the remainder of the division <code>x/y</code>.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">gcd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">_gcd</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>y <span class="token operator">?</span> x <span class="token punctuation">:</span> <span class="token function">gcd</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> x <span class="token operator">%</span> y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">_gcd</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">gcd</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span>
+<span class="token function">gcd</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="getmeridiemsuffixofinteger.md" class="section double-padded">getMeridiemSuffixOfInteger</h3><div class="section double-padded">
+<p>Converts an integer to a suffixed string, adding <code>am</code> or <code>pm</code> based on its value.</p>
+<p>Use the modulo operator (<code>%</code>) and conditional checks to transform an integer to a stringified 12-hour format with meridiem suffix.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">getMeridiemSuffixOfInteger</span> <span class="token operator">=</span> num <span class="token operator">=></span>
+  num <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">||</span> num <span class="token operator">===</span> <span class="token number">24</span>
+    <span class="token operator">?</span> <span class="token number">12</span> <span class="token operator">+</span> <span class="token string">'am'</span>
+    <span class="token punctuation">:</span> num <span class="token operator">===</span> <span class="token number">12</span> <span class="token operator">?</span> <span class="token number">12</span> <span class="token operator">+</span> <span class="token string">'pm'</span> <span class="token punctuation">:</span> num <span class="token operator">&lt;</span> <span class="token number">12</span> <span class="token operator">?</span> num <span class="token operator">%</span> <span class="token number">12</span> <span class="token operator">+</span> <span class="token string">'am'</span> <span class="token punctuation">:</span> num <span class="token operator">%</span> <span class="token number">12</span> <span class="token operator">+</span> <span class="token string">'pm'</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "12am"</span>
+<span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "11am"</span>
+<span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "1pm"</span>
+<span class="token function">getMeridiemSuffixOfInteger</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "1pm"</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hasclass.md" class="section double-padded">hasClass</h3><div class="section double-padded">
+<p>Returns <code>true</code> if the element has the specified class, <code>false</code> otherwise.</p>
+<p>Use <code>element.classList.contains()</code> to check if the element has the specified class.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hasClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>className<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hasClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'special'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="isdivisible.md" class="section double-padded">isDivisible</h3><div class="section double-padded">
+<p>Checks if the first numeric argument is divisible by the second one.</p>
+<p>Use the modulo operator (<code>%</code>) to check if the remainder is equal to <code>0</code>.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isDivisible</span> <span class="token operator">=</span> <span class="token punctuation">(</span>dividend<span class="token punctuation">,</span> divisor<span class="token punctuation">)</span> <span class="token operator">=></span> dividend <span class="token operator">%</span> divisor <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isDivisible</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="iseven.md" class="section double-padded">isEven</h3><div class="section double-padded">
+<p>Returns <code>true</code> if the given number is even, <code>false</code> otherwise.</p>
+<p>Checks whether a number is odd or even using the modulo (<code>%</code>) operator.
+Returns <code>true</code> if the number is even, <code>false</code> if the number is odd.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> num <span class="token operator">=></span> num <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isEven</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="isprime.md" class="section double-padded">isPrime</h3><div class="section double-padded">
+<p>Checks if the provided integer is a prime number.</p>
+<p>Check numbers from <code>2</code> to the square root of the given number.
+Return <code>false</code> if any of them divides the given number, else return <code>true</code>, unless the number is less than <code>2</code>.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isPrime</span> <span class="token operator">=</span> num <span class="token operator">=></span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> boundary <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> boundary<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>num <span class="token operator">%</span> i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
+  <span class="token keyword">return</span> num <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isPrime</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="lcm.md" class="section double-padded">lcm</h3><div class="section double-padded">
+<p>Returns the least common multiple of two or more numbers.</p>
+<p>Use the greatest common divisor (GCD) formula and the fact that <code>lcm(x,y) = x * y / gcd(x,y)</code> to determine the least common multiple.
+The GCD formula uses recursion.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">lcm</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">gcd</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>y <span class="token operator">?</span> x <span class="token punctuation">:</span> <span class="token function">gcd</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> x <span class="token operator">%</span> y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">_lcm</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">*</span> y <span class="token operator">/</span> <span class="token function">gcd</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">_lcm</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">lcm</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 84</span>
+<span class="token function">lcm</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 60</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="maxn.md" class="section double-padded">maxN</h3><div class="section double-padded">
+<p>Returns the <code>n</code> maximum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in descending order).</p>
+<p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in descending order.
+Use <code>Array.slice()</code> to get the specified number of elements.
+Omit the second argument, <code>n</code>, to get a one-element array.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">maxN</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> b <span class="token operator">-</span> a<span class="token punctuation">)</span><span class="token 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><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">maxN</span><span class="token punctuation">(</span><span class="token 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 punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [3]</span>
+<span class="token function">maxN</span><span class="token punctuation">(</span><span class="token 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 punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [3,2]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="minn.md" class="section double-padded">minN</h3><div class="section double-padded">
+<p>Returns the <code>n</code> minimum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in ascending order).</p>
+<p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in ascending order.
+Use <code>Array.slice()</code> to get the specified number of elements.
+Omit the second argument, <code>n</code>, to get a one-element array.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">minN</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</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 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><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">minN</span><span class="token punctuation">(</span><span class="token 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 punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1]</span>
+<span class="token function">minN</span><span class="token punctuation">(</span><span class="token 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 punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,2]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="nthelement.md" class="section double-padded">nthElement</h3><div class="section double-padded">
+<p>Returns the nth element of an array.</p>
+<p>Use <code>Array.slice()</code> to get an array containing the nth element at the first place.
+If the index is out of bounds, return <code>[]</code>.
+Omit the second argument, <code>n</code>, to get the first element of the array.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">nthElement</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>n <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span> n <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">nthElement</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'b'</span>
+<span class="token function">nthElement</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'a'</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="randomintegerinrange.md" class="section double-padded">randomIntegerInRange</h3><div class="section double-padded">
+<p>Returns a random integer in the specified range.</p>
+<p>Use <code>Math.random()</code> to generate a random number and map it to the desired range, using <code>Math.floor()</code> to make it an integer.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">randomIntegerInRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>min<span class="token punctuation">,</span> max<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> min<span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">randomIntegerInRange</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="reversestring.md" class="section double-padded">reverseString</h3><div class="section double-padded">
+<p>Reverses a string.</p>
+<p>Use the spread operator (<code>...</code>) and <code>Array.reverse()</code> to reverse the order of the characters in the string.
+Combine characters to get a string using <code>String.join('')</code>.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">reverseString</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</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><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token string">'foobar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'raboof'</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sample.md" class="section double-padded">sample</h3><div class="section double-padded">
+<p>Returns a random element from an array.</p>
+<p>Use <code>Math.random()</code> to generate a random number, multiply it by <code>length</code> and round it of to the nearest whole number using <code>Math.floor()</code>.
+This method also works with strings.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sample</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sample</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 9</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="similarity.md" class="section double-padded">similarity</h3><div class="section double-padded">
+<p>Returns an array of elements that appear in both arrays.</p>
+<p>Use <code>Array.filter()</code> to remove values that are not part of <code>values</code>, determined using <code>Array.includes()</code>.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">similarity</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>v <span class="token operator">=></span> values<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">similarity</span><span class="token punctuation">(</span><span class="token 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 punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,2]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sum.md" class="section double-padded">sum</h3><div class="section double-padded">
+<p>Returns the sum of two or more numbers/arrays.</p>
+<p>Use <code>Array.reduce()</code> to add each value to an accumulator, initialized with a value of <code>0</code>.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> acc <span class="token operator">+</span> val<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="tail.md" class="section double-padded">tail</h3><div class="section double-padded">
+<p>Returns all elements in an array except for the first one.</p>
+<p>Return <code>Array.slice(1)</code> if the array's <code>length</code> is more than <code>1</code>, otherwise, return the whole array.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">tail</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">tail</span><span class="token punctuation">(</span><span class="token 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 punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [2,3]</span>
+<span class="token function">tail</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1]</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="truncatestring.md" class="section double-padded">truncateString</h3><div class="section double-padded">
+<p>Truncates a string up to a specified length.</p>
+<p>Determine if the string's <code>length</code> is greater than <code>num</code>.
+Return the string truncated to the desired length, with <code>'...'</code> appended to the end or the original string.</p>
+<pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">truncateString</span> <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> num<span class="token punctuation">)</span> <span class="token operator">=></span>
+  str<span class="token punctuation">.</span>length <span class="token operator">></span> num <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> num <span class="token operator">></span> <span class="token number">3</span> <span class="token operator">?</span> num <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'...'</span> <span class="token punctuation">:</span> str<span class="token punctuation">;</span>
+</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">truncateString</span><span class="token punctuation">(</span><span class="token string">'boomerang'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'boom...'</span>
+</pre>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>    <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>
 </html>
--- a/scripts/web.js
+++ b/scripts/web.js
@ -51,11 +51,11 @@ const snippetsPath = './snippets',
  docsPath = './docs';
 // Set variables for script
 let snippets = {},
-  beginnerSnippets = ['everyNth', 'filterNonUnique', 'last', 'maxN', 'minN', 'nthElement', 'sample', 'similarity', 'tail', 'currentURL', 'hasClass', 'getMeridiemSuffixOfInteger', 'factorial', 'fibonacci', 'gcd', 'isDivisible', 'isEven', 'isPrime', 'lcm', 'randomIntegerInRange', 'sum', 'reverseString', 'truncateString'],
+  beginnerSnippetNames = ['everyNth', 'filterNonUnique', 'last.md', 'maxN', 'minN', 'nthElement', 'sample', 'similarity', 'tail', 'currentURL', 'hasClass', 'getMeridiemSuffixOfInteger', 'factorial', 'fibonacci', 'gcd', 'isDivisible', 'isEven', 'isPrime', 'lcm', 'randomIntegerInRange', 'sum', 'reverseString', 'truncateString'],
  startPart = '',
  endPart = '',
  output = '',
-  startBegginerPart = '',
+  startBeginnerPart = '',
  endBegginerPart = '',
  beginnerOutput = '',
  pagesOutput = [];
@ -64,6 +64,7 @@ let snippets = {},
 console.time('Webber');
 // Synchronously read all snippets and sort them as necessary (case-insensitive)
 snippets = util.readSnippets(snippetsPath);
+
 // Load static parts for the index.html file
 try {
  startPart = fs.readFileSync(path.join(staticPartsPath, 'page-start.html'), 'utf8');
@ -171,6 +172,29 @@ try {
  // Add the static part
  beginnerOutput += `${startBeginnerPart + '\n'}`;

+  // Filter begginer snippets
+  const filteredBeginnerSnippets = Object.keys(snippets)
+    .filter(key => beginnerSnippetNames.map(name => name+'.md').includes(key))
+    .reduce((obj, key) => {
+      obj[key] = snippets[key];
+    return obj;
+  }, {});
+
+  console.log(filteredBeginnerSnippets);
+  for (let snippet of Object.entries(filteredBeginnerSnippets))
+        beginnerOutput +=
+          '<div class="card fluid">' +
+          md
+            .render(`\n${snippets[snippet[0]]}`)
+            .replace(/<h3/g, `<h3 id="${snippet[0].toLowerCase()}" class="section double-padded"`)
+            .replace(/<\/h3>/g, `${snippet[1].includes('advanced')?'<mark class="tag">advanced</mark>':''}</h3>`)
+            .replace(/<\/h3>/g, '</h3><div class="section double-padded">')
+            .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
+            .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
+          '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
+          '</div></div>';
+
+
  beginnerOutput +=
  '<div class="card fluid">' +
  // begginer snippet goes here.
@ -179,7 +203,7 @@ try {

  beginnerOutput += `${endBeginnerPart}`;

-  // Generate
+  // Generate 'beginner.html' file
  fs.writeFileSync(path.join(docsPath, 'beginner.html'), beginnerOutput);


--- a/static-parts/beginner-page-start.html
+++ b/static-parts/beginner-page-start.html
@ -17,7 +17,7 @@
    <div id="splash">
      <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="doc-link"><a href="#" class="button">Home</a></p>
+      <p id="doc-link"><a href="#" class="button">View collection</a></p>
    </div>
    <div class="container">
      <div class="row">