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

Merge branch 'master' of https://github.com/Chalarangelo/30-seconds-of-code

Browse Source
This commit is contained in:
Pl4gue
2017-12-24 18:40:52 +01:00
parent 65d19c3271 887f8a131d
commit 3e75d5c4b2
15 changed files with 352 additions and 1714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
docs/index.html
View File

@ -17,7 +17,7 @@
</head>
<script>
const search = (node) => {
// Hide non-query-matching snippets
// Hide non-query-matching snippets
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none'
});
@ -32,8 +32,30 @@
element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none' : '')
})
}
function clipboard() {
const snippets = document.querySelectorAll("pre");
snippets.forEach(element => {
const button = document.createElement("button");
button.innerHTML = "Copy to clipboard";
element.parentElement.appendChild(button);
button.addEventListener ("click", function() {
//The following regex removes all the comments from the snippet
const text = element.textContent.replace(/\/\*(.|[\r\n])*?\*\//g, '').replace(/\/\/.*/gm, '');
// Apparently you can't copy a variable to clipboard so you need to create text input element,
// give it a value, copy it and then remove it from DOM.
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
console.log(textArea.innerText);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
});
});
};
</script>
<body>
<body onload="clipboard()">
<a href="https://github.com/Chalarangelo/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<header style="height:5.5rem">
<h1 class="logo" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height:4rem"/><span id="title">&nbsp;30 seconds of code</span>
@ -108,6 +130,7 @@
</h3><a class="sublink-1" href="#arraytohtmllist">arrayToHtmlList</a>
<a class="sublink-1" href="#bottomvisible">bottomVisible</a>
<a class="sublink-1" href="#currenturl">currentURL</a>
<a class="sublink-1" href="#detectdevicetype">detectDeviceType</a>
<a class="sublink-1" href="#elementisvisibleinviewport">elementIsVisibleInViewport</a>
<a class="sublink-1" href="#getscrollposition">getScrollPosition</a>
<a class="sublink-1" href="#geturlparameters">getURLParameters</a>
@ -129,6 +152,9 @@
<a class="sublink-1" href="#runpromisesinseries">runPromisesInSeries</a>
<a class="sublink-1" href="#sleep">sleep</a>
<h3>Logic
</h3><a class="sublink-1" href="#negate">negate</a>
<h3>Math
</h3><a class="sublink-1" href="#arrayaverage">arrayAverage</a>
<a class="sublink-1" href="#arraysum">arraySum</a>
@ -181,9 +207,12 @@
<a class="sublink-1" href="#countvowels">countVowels</a>
<a class="sublink-1" href="#escaperegexp">escapeRegExp</a>
<a class="sublink-1" href="#fromcamelcase">fromCamelCase</a>
<a class="sublink-1" href="#repeatstring">repeatString</a>
<a class="sublink-1" href="#reversestring">reverseString</a>
<a class="sublink-1" href="#sortcharactersinstring">sortCharactersInString</a>
<a class="sublink-1" href="#tocamelcase">toCamelCase</a>
<a class="sublink-1" href="#tokebabcase">toKebabCase</a>
<a class="sublink-1" href="#tosnakecase">toSnakeCase</a>
<a class="sublink-1" href="#truncatestring">truncateString</a>
<a class="sublink-1" href="#words">words</a>
@ -199,6 +228,7 @@
<a class="sublink-1" href="#isnumber">isNumber</a>
<a class="sublink-1" href="#isstring">isString</a>
<a class="sublink-1" href="#issymbol">isSymbol</a>
<a class="sublink-1" href="#randomhexcolorcode">randomHexColorCode</a>
<a class="sublink-1" href="#rgbtohex">RGBToHex</a>
<a class="sublink-1" href="#timetaken">timeTaken</a>
<a class="sublink-1" href="#todecimalmark">toDecimalMark</a>
@ -359,9 +389,9 @@ Returns the remaining elements.</p>
// dropElements([1, 2, 3, 4], n =&gt; n &gt;= 3) -&gt; [3,4]
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="dropright">dropRight</h3></div><div class="section double-padded">
<p>Returns a new array with <code>n</code> elements removed from the right</p>
<p>Check if <code>n</code> is shorter than the given array and use <code>Array.slice()</code> to slice it accordingly or return an empty array.</p>
<pre><code class="language-js">const dropRight = (arr, n = 1) =&gt; n &lt; arr.length ? arr.slice(0, arr.length - n) : []
<p>Returns a new array with <code>n</code> elements removed from the right.</p>
<p>Use <code>Array.slice()</code> to slice the remove the specified number of elements from the right.</p>
<pre><code class="language-js">const dropRight = (arr, n = 1) =&gt; arr.slice(0, -n);
//dropRight([1,2,3]) -&gt; [1,2]
//dropRight([1,2,3], 2) -&gt; [1]
//dropRight([1,2,3], 42) -&gt; []
@ -651,6 +681,13 @@ If lengths of the argument-arrays vary, <code>undefined</code> is used where no
<pre><code class="language-js">const currentURL = () =&gt; window.location.href;
// currentUrl() -&gt; 'https://google.com'
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="detectdevicetype">detectDeviceType</h3></div><div class="section double-padded">
<p>Detects wether the website is being opened in a mobile device or a desktop/laptop.</p>
<p>Use a regular expression to test the <code>navigator.userAgent</code> property to figure out if the device is a mobile device or a desktop/laptop.</p>
<pre><code class="language-js">const detectDeviceType = () =&gt; /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? &quot;Mobile&quot; : &quot;Desktop&quot;;
// detectDeviceType() -&gt; &quot;Mobile&quot;
// detectDeviceType() -&gt; &quot;Desktop&quot;
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="elementisvisibleinviewport">elementIsVisibleInViewport</h3></div><div class="section double-padded">
<p>Returns <code>true</code> if the element specified is visible in the viewport, <code>false</code> otherwise.</p>
<p>Use <code>Element.getBoundingClientRect()</code> and the <code>window.inner(Width|Height)</code> values
@ -815,6 +852,14 @@ async function sleepyWork() {
}
*/
</code></pre>
</div></div><br/><h2 style="text-align:center">Logic</h2>
<div class="card fluid"><div class="section double-padded"><h3 id="negate">negate</h3></div><div class="section double-padded">
<p>Negates a predicate function.</p>
<p>Take a predicate function and apply <code>not</code> to it with its arguments.</p>
<pre><code class="language-js">const negate = func =&gt; (...args) =&gt; !func(...args);
// filter([1, 2, 3, 4, 5, 6], negate(isEven)) -&gt; [1, 3, 5]
// negate(isOdd)(1) -&gt; false
</code></pre>
</div></div><br/><h2 style="text-align:center">Math</h2>
<div class="card fluid"><div class="section double-padded"><h3 id="arrayaverage">arrayAverage</h3></div><div class="section double-padded">
<p>Returns the average of an array of numbers.</p>
@ -1221,6 +1266,15 @@ Omit the second argument to use a default separator of <code>_</code>.</p>
// fromCamelCase('someLabelThatNeedsToBeCamelized', '-') -&gt; 'some-label-that-needs-to-be-camelized'
// fromCamelCase('someJavascriptProperty', '_') -&gt; 'some_javascript_property'
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="repeatstring">repeatString</h3></div><div class="section double-padded">
<p>Repeats a string n times using <code>String.repeat()</code></p>
<p>If no string is provided the default is <code>&quot;&quot;</code> and the default number of times is 2.</p>
<pre><code class="language-js">const repeatString = (str=&quot;&quot;,num=2) =&gt; {
return num &gt;= 0 ? str.repeat(num) : str;
}
// repeatString(&quot;abc&quot;,3) -&gt; 'abcabcabc'
// repeatString(&quot;abc&quot;) -&gt; 'abcabc'
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="reversestring">reverseString</h3></div><div class="section double-padded">
<p>Reverses a string.</p>
<p>Use <code>split('')</code> and <code>Array.reverse()</code> to reverse the order of the characters in the string.
@ -1245,6 +1299,38 @@ Combine characters to get a string using <code>join('')</code>.</p>
// toCamelCase(&quot;some-javascript-property&quot;) -&gt; 'someJavascriptProperty'
// toCamelCase(&quot;some-mixed_string with spaces_underscores-and-hyphens&quot;) -&gt; 'someMixedStringWithSpacesUnderscoresAndHyphens'
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="tokebabcase">toKebabCase</h3></div><div class="section double-padded">
<p>Converts a string to <a href="https://en.wikipedia.org/wiki/Letter_case#Special_case_styles">kebab case</a>.
Breaks the string into words.
A word is defined as following:-
-&gt; Beginning with two or more capital letters, e.g. XML or FM
-&gt; Begin with a capital letter followed by lower case letters with optional trailing numbers, e.g. Hello or Http2
-&gt; Contain nothing but lower case letters with optional trailing numbers, e.g. hello or http2
-&gt; Individual upper letters, e.g T.M.N.T
-&gt; Groups of numbers, e.g. 555-555-5555</p>
<p>For more detailed explanation of this Regex <a href="https://regex101.com/r/bMCgAB/1">Visit this Site</a></p>
<pre><code class="language-js">const toKebabCase = str =&gt; {
let regex = rx = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
return str.match(regex).map(x =&gt;{
return x.toLowerCase();
}).join('-');
}
// toKebabCase(&quot;camelCase&quot;) -&gt; 'camel-case'
// toKebabCase(&quot;some text&quot;) -&gt; 'some-text'
// toKebabCase(&quot;some-mixed_string With spaces_underscores-and-hyphens&quot;) -&gt; 'some-mixed-string-with-spaces-underscores-and-hyphens'
// toKebabCase(&quot;AllThe-small Things&quot;) -&gt; &quot;all-the-small-things&quot;
// toKebabCase('IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML') -&gt; &quot;i-am-listening-to-fm-while-loading-different-url-on-my-browser-and-also-editing-xml-and-html&quot;
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="tosnakecase">toSnakeCase</h3></div><div class="section double-padded">
<p>Converts a string to snakecase.</p>
<p>Use <code>replace()</code> to add underscores before capital letters, convert <code>toLowerCase()</code>, then <code>replace()</code> hyphens and spaces with underscores.</p>
<pre><code class="language-js">const toSnakeCase = str =&gt;
str.replace(/(\w)([A-Z])/g, '$1_$2').replace(/[\s-_]+/g, '_').toLowerCase();
// toSnakeCase(&quot;camelCase&quot;) -&gt; 'camel_case'
// toSnakeCase(&quot;some text&quot;) -&gt; 'some_text'
// toSnakeCase(&quot;some-javascript-property&quot;) -&gt; 'some_javascript_property'
// toSnakeCase(&quot;some-mixed_string With spaces_underscores-and-hyphens&quot;) -&gt; 'some_mixed_string_with_spaces_underscores_and_hyphens'
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="truncatestring">truncateString</h3></div><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>.
@ -1278,7 +1364,7 @@ Omit the second argument to use the default regex.</p>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="extendhex">extendHex</h3></div><div class="section double-padded">
<p>Extends a 3-digit color code to a 6-digit color code.</p>
<p>Use <code>Array.map()</code>, <code>split()</code> and <code>Array.join()</code> to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form.
<code>Array.slice()</code> is used to remove <code>#</code> from string start since it's added once.</p>
<code>String.slice()</code> is used to remove <code>#</code> from string start since it's added once.</p>
<pre><code class="language-js">const extendHex = shortHex =&gt;
'#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x =&gt; x+x).join('')
// extendHex('#03f') -&gt; '#0033ff'
@ -1352,6 +1438,18 @@ Omit the second argument to use the default regex.</p>
// isSymbol('x') -&gt; false
// isSymbol(Symbol('x')) -&gt; true
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="randomhexcolorcode">randomHexColorCode</h3></div><div class="section double-padded">
<p>Generates a random hexadecimal color code.</p>
<p>Use <code>Math.random</code> to generate a random number and limit that number to fall in between 0 and 16 using <code>Math.floor</code>. Use the generated random number as index to access a character from 0 to F. Append it to <code>color</code> till the length is not <code>7</code>.</p>
<pre><code class="language-js">const randomHexColorCode = () =&gt; {
let color = '#';
while(color.length &lt; 7) color += '0123456789ABCDEF'[Math.floor(Math.random() * 16)];
return color;
}
// randomHexColorCode() -&gt; &quot;#e34155&quot;
// randomHexColorCode() -&gt; &quot;#fd73a6&quot;
// randomHexColorCode() -&gt; &quot;#4144c6&quot;
</code></pre>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="rgbtohex">RGBToHex</h3></div><div class="section double-padded">
<p>Converts the values of RGB components to a color code.</p>
<p>Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<code>&lt;&lt;</code>) and <code>toString(16)</code>, then <code>padStart(6,'0')</code> to get a 6-digit hexadecimal value.</p>