update static parts and final beginner.html

docs/beginner.html

@@ -26,20 +26,20 @@
             <p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey.</p><br/>
         </div>
       </div>
-    </div>
-<div class="card fluid"><h3 id="currenturl.md" class="section double-padded">currentURL</h3><div class="section double-padded">
+
+<div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="currenturl.md" class="section double-padded">currentURL</h3><div class="section double-padded">
 <p>Returns the current URL.</p>
 <p>Use <code>window.location.href</code> to get current URL.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">currentURL</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="everynth.md" class="section double-padded">everyNth</h3><div class="section double-padded">
 <p>Returns every nth element in an array.</p>
 <p>Use <code>Array.filter()</code> to create a new array that contains every nth element of a given array.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">everyNth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> nth<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="factorial.md" class="section double-padded">factorial</h3><div class="section double-padded">
 <p>Calculates the factorial of a number.</p>
 <p>Use recursion.
 If <code>n</code> is less than or equal to <code>1</code>, return <code>1</code>.
@@ -53,7 +53,7 @@ Throws an exception if <code>n</code> is a negative number.</p>
     <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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="fibonacci.md" class="section double-padded">fibonacci</h3><div class="section double-padded">
 <p>Generates an array, containing the Fibonacci sequence, up until the nth term.</p>
 <p>Create an empty array of the specific length, initializing the first two values (<code>0</code> and <code>1</code>).
 Use <code>Array.reduce()</code> to add values into the array, using the sum of the last two values, except for the first two.</p>
@@ -64,13 +64,13 @@ Use <code>Array.reduce()</code> to add values into the array, using the sum of t
   <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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="filternonunique.md" class="section double-padded">filterNonUnique</h3><div class="section double-padded">
 <p>Filters out the non-unique values in an array.</p>
 <p>Use <code>Array.filter()</code> for an array containing only the unique values.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">filterNonUnique</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>i <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">===</span> arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="gcd.md" class="section double-padded">gcd</h3><div class="section double-padded">
 <p>Calculates the greatest common divisor between two or more numbers/arrays.</p>
 <p>The inner <code>_gcd</code> function uses recursion.
 Base case is when <code>y</code> equals <code>0</code>. In this case, return <code>x</code>.
@@ -82,7 +82,7 @@ Otherwise, return the GCD of <code>y</code> and the remainder of the division <c
 </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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="getmeridiemsuffixofinteger.md" class="section double-padded">getMeridiemSuffixOfInteger</h3><div class="section double-padded">
 <p>Converts an integer to a suffixed string, adding <code>am</code> or <code>pm</code> based on its value.</p>
 <p>Use the modulo operator (<code>%</code>) and conditional checks to transform an integer to a stringified 12-hour format with meridiem suffix.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">getMeridiemSuffixOfInteger</span> <span class="token operator">=</span> num <span class="token operator">=></span>
@@ -94,26 +94,26 @@ Otherwise, return the GCD of <code>y</code> and the remainder of the division <c
 <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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="hasclass.md" class="section double-padded">hasClass</h3><div class="section double-padded">
 <p>Returns <code>true</code> if the element has the specified class, <code>false</code> otherwise.</p>
 <p>Use <code>element.classList.contains()</code> to check if the element has the specified class.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hasClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>className<span class="token punctuation">)</span><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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="isdivisible.md" class="section double-padded">isDivisible</h3><div class="section double-padded">
 <p>Checks if the first numeric argument is divisible by the second one.</p>
 <p>Use the modulo operator (<code>%</code>) to check if the remainder is equal to <code>0</code>.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isDivisible</span> <span class="token operator">=</span> <span class="token punctuation">(</span>dividend<span class="token punctuation">,</span> divisor<span class="token punctuation">)</span> <span class="token operator">=></span> dividend <span class="token operator">%</span> divisor <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
 </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isDivisible</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="iseven.md" class="section double-padded">isEven</h3><div class="section double-padded">
 <p>Returns <code>true</code> if the given number is even, <code>false</code> otherwise.</p>
 <p>Checks whether a number is odd or even using the modulo (<code>%</code>) operator.
 Returns <code>true</code> if the number is even, <code>false</code> if the number is odd.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> num <span class="token operator">=></span> num <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
 </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isEven</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="isprime.md" class="section double-padded">isPrime</h3><div class="section double-padded">
 <p>Checks if the provided integer is a prime number.</p>
 <p>Check numbers from <code>2</code> to the square root of the given number.
 Return <code>false</code> if any of them divides the given number, else return <code>true</code>, unless the number is less than <code>2</code>.</p>
@@ -124,7 +124,7 @@ Return <code>false</code> if any of them divides the given number, else return <
 <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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="lcm.md" class="section double-padded">lcm</h3><div class="section double-padded">
 <p>Returns the least common multiple of two or more numbers.</p>
 <p>Use the greatest common divisor (GCD) formula and the fact that <code>lcm(x,y) = x * y / gcd(x,y)</code> to determine the least common multiple.
 The GCD formula uses recursion.</p>
@@ -136,7 +136,7 @@ The GCD formula uses recursion.</p>
 </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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="maxn.md" class="section double-padded">maxN</h3><div class="section double-padded">
 <p>Returns the <code>n</code> maximum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in descending order).</p>
 <p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in descending order.
 Use <code>Array.slice()</code> to get the specified number of elements.
@@ -145,7 +145,7 @@ Omit the second argument, <code>n</code>, to get a one-element array.</p>
 </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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="minn.md" class="section double-padded">minN</h3><div class="section double-padded">
 <p>Returns the <code>n</code> minimum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in ascending order).</p>
 <p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in ascending order.
 Use <code>Array.slice()</code> to get the specified number of elements.
@@ -154,7 +154,7 @@ Omit the second argument, <code>n</code>, to get a one-element array.</p>
 </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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="nthelement.md" class="section double-padded">nthElement</h3><div class="section double-padded">
 <p>Returns the nth element of an array.</p>
 <p>Use <code>Array.slice()</code> to get an array containing the nth element at the first place.
 If the index is out of bounds, return <code>[]</code>.
@@ -163,46 +163,46 @@ Omit the second argument, <code>n</code>, to get the first element of the array.
 </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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="randomintegerinrange.md" class="section double-padded">randomIntegerInRange</h3><div class="section double-padded">
 <p>Returns a random integer in the specified range.</p>
 <p>Use <code>Math.random()</code> to generate a random number and map it to the desired range, using <code>Math.floor()</code> to make it an integer.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">randomIntegerInRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>min<span class="token punctuation">,</span> max<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="reversestring.md" class="section double-padded">reverseString</h3><div class="section double-padded">
 <p>Reverses a string.</p>
 <p>Use the spread operator (<code>...</code>) and <code>Array.reverse()</code> to reverse the order of the characters in the string.
 Combine characters to get a string using <code>String.join('')</code>.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">reverseString</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">]</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="sample.md" class="section double-padded">sample</h3><div class="section double-padded">
 <p>Returns a random element from an array.</p>
 <p>Use <code>Math.random()</code> to generate a random number, multiply it by <code>length</code> and round it of to the nearest whole number using <code>Math.floor()</code>.
 This method also works with strings.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sample</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="similarity.md" class="section double-padded">similarity</h3><div class="section double-padded">
 <p>Returns an array of elements that appear in both arrays.</p>
 <p>Use <code>Array.filter()</code> to remove values that are not part of <code>values</code>, determined using <code>Array.includes()</code>.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">similarity</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>v <span class="token operator">=></span> values<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="sum.md" class="section double-padded">sum</h3><div class="section double-padded">
 <p>Returns the sum of two or more numbers/arrays.</p>
 <p>Use <code>Array.reduce()</code> to add each value to an accumulator, initialized with a value of <code>0</code>.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token 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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="tail.md" class="section double-padded">tail</h3><div class="section double-padded">
 <p>Returns all elements in an array except for the first one.</p>
 <p>Return <code>Array.slice(1)</code> if the array's <code>length</code> is more than <code>1</code>, otherwise, return the whole array.</p>
 <pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">tail</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <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">
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><div class="card fluid"><h3 id="truncatestring.md" class="section double-padded">truncateString</h3><div class="section double-padded">
 <p>Truncates a string up to a specified length.</p>
 <p>Determine if the string's <code>length</code> is greater than <code>num</code>.
 Return the string truncated to the desired length, with <code>'...'</code> appended to the end or the original string.</p>
@@ -210,6 +210,8 @@ Return the string truncated to the desired length, with <code>'...'</code> appen
   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>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="card fluid"><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>    </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>

scripts/web.js

@@ -183,6 +183,8 @@ try {
   console.log(filteredBeginnerSnippets);
   for (let snippet of Object.entries(filteredBeginnerSnippets))
         beginnerOutput +=
+        '<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">' +
           md
             .render(`\n${snippets[snippet[0]]}`)
@@ -192,7 +194,7 @@ try {
             .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>';
+          '</div></div></div></div>';
 
 
   beginnerOutput +=

static-parts/beginner-page-end.html

@@ -1,3 +1,5 @@
+    </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>

static-parts/beginner-page-start.html

@@ -26,4 +26,3 @@
             <p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey.</p><br/>
         </div>
       </div>
-    </div>