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

Update builder script

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-13 12:12:28 +03:00
parent 7c84eea7cb
commit e54329cb28
22 changed files with 1143 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/static-parts/README-end.md Normal file
View File

@ -0,0 +1,11 @@
## Collaborators
| [<img src="https://github.com/Chalarangelo.png" width="100px;"/>](https://github.com/Chalarangelo)<br/> [<sub>Angelos Chalaris</sub>](https://github.com/Chalarangelo) | [<img src="https://github.com/flxwu.png" width="100px;"/>](https://github.com/flxwu)<br/> [<sub>Felix Wu</sub>](https://github.com/Pl4gue) | [<img src="https://github.com/fejes713.png" width="100px;"/>](https://github.com/fejes713)<br/> [<sub>Stefan Feješ</sub>](https://github.com/fejes713) | [<img src="https://github.com/kingdavidmartins.png" width="100px;"/>](https://github.com/kingdavidmartins)<br/> [<sub>King David Martins</sub>](https://github.com/iamsoorena) | [<img src="https://github.com/iamsoorena.png" width="100px;"/>](https://github.com/iamsoorena)<br/> [<sub>Soorena Soleimani</sub>](https://github.com/iamsoorena) |
| --- | --- | --- | --- | --- |
| [<img src="https://github.com/elderhsouza.png" width="100px;"/>](https://github.com/elderhsouza)<br/> [<sub>Elder Henrique Souza</sub>](https://github.com/elderhsouza) | [<img src="https://github.com/skatcat31.png" width="100px;"/>](https://github.com/skatcat31)<br/> [<sub>Robert Mennell</sub>](https://github.com/skatcat31) | [<img src="https://github.com/atomiks.png" width="100px;"/>](https://github.com/atomiks)<br/> [<sub>atomiks</sub>](https://github.com/atomiks) |
## Credits
*Logos made by [Angelos Chalaris](https://github.com/Chalarangelo) are licensed under the [MIT](https://opensource.org/licenses/MIT) license.*
*This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder).*

70
src/static-parts/README-start.md Normal file
View File

@ -0,0 +1,70 @@
[![Logo](/logo.png)](https://30secondsofcode.org/)
# 30 seconds of code
[![License](https://img.shields.io/badge/license-CC0--1.0-blue.svg)](https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE) [![npm Downloads](https://img.shields.io/npm/dt/30-seconds-of-code.svg)](https://www.npmjs.com/package/30-seconds-of-code) [![npm Version](https://img.shields.io/npm/v/30-seconds-of-code.svg)](https://www.npmjs.com/package/30-seconds-of-code) [![Known Vulnerabilities](https://snyk.io/test/github/30-seconds/30-seconds-of-code/badge.svg?targetFile=package.json)](https://snyk.io/test/github/30-seconds/30-seconds-of-code?targetFile=package.json) <br/>
[![Travis Build](https://travis-ci.com/30-seconds/30-seconds-of-code.svg?branch=master)](https://travis-ci.com/30-seconds/30-seconds-of-code) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/6ab7791fb1ea40b4a576d658fb96807f)](https://www.codacy.com/app/Chalarangelo/30-seconds-of-code?utm_source=github.com&utm_medium=referral&utm_content=30-seconds/30-seconds-of-code&utm_campaign=Badge_Grade) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg)](https://github.com/Flet/semistandard) <br/>
[![Awesome](https://awesome.re/badge.svg)](https://awesome.re) [![ProductHunt](https://img.shields.io/badge/producthunt-vote-orange.svg)](https://www.producthunt.com/posts/30-seconds-of-code) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
> Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
* Use <kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>command</kbd> + <kbd>F</kbd> to search for a snippet.
* Contributions welcome, please read the [contribution guide](CONTRIBUTING.md).
* Snippets are written in ES6, use the [Babel transpiler](https://babeljs.io/) to ensure backwards-compatibility.
* You can import these snippets into VSCode, by following the instructions found [here](https://github.com/30-seconds/30-seconds-of-code/tree/master/vscode_snippets).
* You can search, view and copy these snippets from a terminal, using the CLI application from [this repo](https://github.com/sQVe/30s).
* If you want to follow 30-seconds-of-code on social media, you can find us on [Facebook](https://www.facebook.com/30secondsofcode), [Instagram](https://www.instagram.com/30secondsofcode) and [Twitter](https://twitter.com/30secondsofcode).
#### Related projects
* [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/)
* [30 Seconds of Interviews](https://30secondsofinterviews.org/)
* [30 Seconds of React](https://github.com/30-seconds/30-seconds-of-react)
* [30 Seconds of Python](https://github.com/30-seconds/30-seconds-of-python-code)
* [30 Seconds of PHP](https://github.com/30-seconds/30-seconds-of-php-code)
* [30 Seconds of Knowledge](https://chrome.google.com/webstore/detail/30-seconds-of-knowledge/mmgplondnjekobonklacmemikcnhklla)
* [30 Seconds of Kotlin](https://github.com/IvanMwiruki/30-seconds-of-kotlin) _(unofficial)_
#### Package
⚠️ **NOTICE:** A few of our snippets are not yet optimized for production (see disclaimers for individual snippet issues).
You can find a package with all the snippets on [npm](https://www.npmjs.com/package/30-seconds-of-code).
```bash
# With npm
npm install 30-seconds-of-code
# With yarn
yarn add 30-seconds-of-code
```
[CDN link](https://unpkg.com/30-seconds-of-code/)
<details>
<summary>Details</summary>
**Browser**
```html
<script src="https://unpkg.com/30-seconds-of-code@1/dist/_30s.es5.min.js"></script>
<script>
_30s.average(1, 2, 3);
</script>
```
**Node**
```js
// CommonJS
const _30s = require('30-seconds-of-code');
_30s.average(1, 2, 3);
// ES Modules
import _30s from '30-seconds-of-code';
_30s.average(1, 2, 3);
```
</details>
## Contents

226
src/static-parts/about.html Normal file
View File

@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>About - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script>
const search = (node) => {
if (node.value.toLowerCase().trim() === '') {
document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = '');
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
return;
}
let matchingTags = [];
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if (data.includes(true)) {
x.style.display = '';
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
})
}
function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('.card-container').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 40;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.href = "#" + id;
return;
}
scrollTo(element, to, id, duration - 40);
}, 40);
};
function loader() {
registerClickListener();
if (window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('social')) {
if (event.target.classList.contains('fb')) {
window.location = "https://www.facebook.com/30secondsofcode";
}
else if (event.target.classList.contains('instagram')) {
window.location = "https://www.instagram.com/30secondsofcode";
}
else if (event.target.classList.contains('twitter')) {
window.location = "https://twitter.com/30secondsofcode";
}
}
else if (event.target.classList.contains('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
let tst = document.createElement('div');
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function () {
tst.style.opacity = 0;
setTimeout(function () {
document.body.removeChild(tst);
}, 300);
}, 1700);
}
}, false);
}
</script>
</head>
<body onload="loader()">
<a href="https://github.com/30-seconds/30-seconds-of-code"
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<button class="menu-button"></button>
<header>
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title">&nbsp;30
seconds of code</span>
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</a></h1>
</header>
<div class="container card-container">
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav>
$nav-menu-data
<h4 class="static-link"><a href="./archive">Archive</a></h4>
<h4 class="static-link"><a href="./glossary">Glossary</a></h4>
<h4 class="static-link"><a href="./contributing">Contributing</a></h4>
<h4 class="static-link"><a href="./about">About</a></h4>
<div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
</nav>
<main class="col-centered">
<span id="top"><br><br></span>
<h2 class="category-name">Our philosophy</h2>
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
<h2 class="category-name">Related projects</h2>
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
<ul>
<li><a href="https://30-seconds.github.io/30-seconds-of-css/">30 seconds of CSS</a></li>
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
<li><a href="https://github.com/30-seconds/30-seconds-of-python-code">30 seconds of Python</a></li>
<li><a href="https://github.com/30-seconds/30-seconds-of-php-code">30 seconds of PHP</a></li>
</ul><br />
<h2 class="category-name">Maintainers</h2>
<div class="flex-row">
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
<a href="https://github.com/atomiks" class="section button">atomiks</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
</div>
</div>
</div>
<h2 class="category-name">Past maintainers</h2>
<div class="flex-row">
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
</div>
</div>
<div class="flex-item">
<div class="card fluid contributor">
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
</div>
</div>
</div><h2 class="category-name">License</h2>
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
always credit us, but that is not mandatory.</p><br />
</main>
<footer class="col-full-width container">
<div class="col-centered">
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
license.</p>
<br />
<p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
</div>
</footer>
<a class="scroll-to-top" href="#top"></a></div>
</div>
</body>
</html>

19
src/static-parts/array.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Array - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png">
<link rel="manifest" href="manifest.json">
<meta http-equiv="refresh" content="0; url=https://30secondsofcode.org">
</head></html>

7
src/static-parts/beginner-page-end.html Normal file
View File

@ -0,0 +1,7 @@
</div>
</div>
<button class="scroll-to-top">&uarr;</button>
<br/>
<footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
</body>
</html>

110
src/static-parts/beginner-page-start.html Normal file
View File

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Snippets for Beginners - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Stefan Feješ (stefanfejes.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script>
const search = (node) => {
let matchingTags = [];
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if (data.includes(true)) {
x.style.display = '';
matchingTags.push(x.getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
})
}
function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('.card-container').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 40;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.href = "#" + id;
return;
}
scrollTo(element, to, id, duration - 40);
}, 40);
};
function loader() {
registerClickListener();
if (window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
let tst = document.createElement('div');
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function () {
tst.style.opacity = 0;
setTimeout(function () {
document.body.removeChild(tst);
}, 300);
}, 1700);
}
}, false);
}
</script>
</head>
<body onload="loader()">
<a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div id="splash">
<h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</a></h1>
<p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
<p id="doc-link"><a href="./array" class="button">View collection</a></p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
<h2 class="index-section">Snippets for Beginners</h2>
<p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey. Each snippet in the next section is simple yet very educational for newcomers. This section is by no means a complete resource for learning modern JavaScript. However, it is enough to grasp some common concepts and use cases. We also strongly recommend checking out <a href="https://developer.mozilla.org/bm/docs/Web/JavaScript">MDN web docs</a> as a learning resource.</p><br/>
</div>
</div>

177
src/static-parts/contributing.html Normal file
View File

@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Contributing - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script>
const search = (node) => {
if (node.value.toLowerCase().trim() === '') {
document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = '');
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
return;
}
let matchingTags = [];
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if (data.includes(true)) {
x.style.display = '';
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
})
}
function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('.card-container').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 40;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.href = "#" + id;
return;
}
scrollTo(element, to, id, duration - 40);
}, 40);
};
function loader() {
registerClickListener();
if (window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('social')) {
if (event.target.classList.contains('fb')) {
window.location = "https://www.facebook.com/30secondsofcode";
}
else if (event.target.classList.contains('instagram')) {
window.location = "https://www.instagram.com/30secondsofcode";
}
else if (event.target.classList.contains('twitter')) {
window.location = "https://twitter.com/30secondsofcode";
}
}
else if (event.target.classList.contains('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
let tst = document.createElement('div');
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function () {
tst.style.opacity = 0;
setTimeout(function () {
document.body.removeChild(tst);
}, 300);
}, 1700);
}
}, false);
}
</script>
</head>
<body onload="loader()">
<a href="https://github.com/30-seconds/30-seconds-of-code"
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<button class="menu-button"></button>
<header>
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title">&nbsp;30
seconds of code</span>
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</a></h1>
</header>
<div class="container card-container">
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav>
$nav-menu-data
<h4 class="static-link"><a href="./archive">Archive</a></h4>
<h4 class="static-link"><a href="./glossary">Glossary</a></h4>
<h4 class="static-link"><a href="./contributing">Contributing</a></h4>
<h4 class="static-link"><a href="./about">About</a></h4>
<div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
</nav>
<main class="col-centered">
<span id="top"><br><br></span>
<h2 class="category-name">How to contribute</h2>
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p><br/>
<h3 class="category-name">1. Create</h3>
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/snippet-template.md">snippet template</a>. Make sure to follow these simple guidelines:</p>
<ul style="text-align: justify">
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
<li>Use the snippet description to explain what your snippet does and how it works.</li>
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
<li>Remember to provide an example of how your snippet works.</li>
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
<li>Never modify README.md or any of the HTML files.</li>
</ul><br />
<h3 class="category-name">2. Tag</h3>
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemented function.</p><br />
<h3 class="category-name">3. Test</h3>
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p><br />
<h3 class="category-name">4. Pull request</h3>
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p><br />
</main>
<footer class="col-full-width container">
<div class="col-centered">
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
width="20px" height="20px" alt="DigitalOcean"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
<br />
<p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
</div>
</footer>
<a class="scroll-to-top" href="#top"></a></div>
</div>
</body>
</html>

3
src/static-parts/glossary_README-start.md Normal file
View File

@ -0,0 +1,3 @@
# 30-seconds-of-code JavaScript Glossary
## Contents

13
src/static-parts/page-end.html Normal file
View File

@ -0,0 +1,13 @@
</main>
<footer class="col-full-width container">
<div class="col-centered">
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.</p>
<br/>
<p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
</div>
</footer>
<a class="scroll-to-top" href="#top"></a></div>
</div>
</body>
</html>

125
src/static-parts/page-start.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>$tag - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script>
const search = (node) => {
if(node.value.toLowerCase().trim() === ''){
document.querySelector('nav').querySelectorAll('li').forEach(x => x.style.display = '');
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
return;
}
let matchingTags = [];
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if(data.includes(true)){
x.style.display = '';
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
})
}
function scrollToTop(){
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('.card-container').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 40;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.href = "#"+id;
return;
}
scrollTo(element, to, id, duration - 40);
}, 40);
};
function loader() {
if (window.location.href.split('#').length > 1)
setTimeout(() => document.getElementById(window.location.href.split('#')[1]).scrollIntoView(), 0);
registerClickListener();
if(window.innerWidth >= '768')
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
else
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if ( event.target.classList.contains('collapse') ) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('social')){
if (event.target.classList.contains('fb')){
window.location = "https://www.facebook.com/30secondsofcode";
}
else if (event.target.classList.contains('instagram')) {
window.location = "https://www.instagram.com/30secondsofcode";
}
else if (event.target.classList.contains('twitter')) {
window.location = "https://twitter.com/30secondsofcode";
}
}
else if (event.target.classList.contains('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
let tst = document.createElement('div');
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function() {
tst.style.opacity = 0;
setTimeout(function() {
document.body.removeChild(tst);
},300);
},1700);
}
}, false);
}
</script>
</head>
<body onload="loader()" class="card-page">
<a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<button class="menu-button"></button>
<header>
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title">&nbsp;30 seconds of code</span>
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</a></h1>
</header>
<div class="container card-container">
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav>

4
src/static-parts/snippets_archive_README-start.md Normal file
View File

@ -0,0 +1,4 @@
![Logo](/logo.png)
# Snippets Archive
These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.
## Contents

17
src/static-parts/static-page-end.html Normal file
View File

@ -0,0 +1,17 @@
</main>
<footer class="col-full-width container">
<div class="col-centered">
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
license.</p>
<br />
<p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
</div>
</footer>
<a class="scroll-to-top" href="#top"></a></div>
</div>
</body>
</html>

108
src/static-parts/static-page-start.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>$page_name - 30 seconds of code</title>
<meta charset="utf-8">
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
<meta name="keywords" content="javascript, snippets, code, programming">
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111">
<meta property="og:title" content="30 seconds of code">
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
<script>
const search = (node) => {
if(node.value.toLowerCase().trim() === ''){
document.querySelector('nav').querySelectorAll('li').forEach(x => x.style.display = '');
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
return;
}
let matchingTags = [];
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if(data.includes(true)){
x.style.display = '';
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
}
else x.style.display = 'none';
});
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
})
}
function scrollToTop() {
const c = document.querySelector('.card-container').scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
document.querySelector('.card-container').scrollTo(0, c - c / 4);
}
};
function scrollTo(element, to, id, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 40;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.href = "#" + id;
return;
}
scrollTo(element, to, id, duration - 40);
}, 40);
};
function loader() {
registerClickListener();
}
function registerClickListener() {
document.addEventListener('click', function (event) {
if (event.target.classList.contains('collapse')) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
else if (event.target.classList.contains('menu-button')) {
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
}
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
document.querySelector('nav').classList = '';
document.querySelector('[type="search"]').classList = '';
document.querySelector('.menu-button').classList = 'menu-button';
}
else if (event.target.classList.contains('copy-button')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
let tst = document.createElement('div');
tst.classList = 'toast';
tst.innerHTML = 'Snippet copied to clipboard!';
document.body.appendChild(tst);
setTimeout(function () {
tst.style.opacity = 0;
setTimeout(function () {
document.body.removeChild(tst);
}, 300);
}, 1700);
}
}, false);
}
</script>
</head>
<body onload="loader()" class="card-page">
<a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<button class="menu-button"></button>
<header>
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title">&nbsp;30 seconds of code</span>
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
</a></h1>
</header>
<div class="container card-container">
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav>