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

Merge branch 'new-website' into new-website-beginnerSnippets

Browse Source
This commit is contained in:
Angelos Chalaris
2018-04-07 17:01:54 +03:00
parent 21339b1e75 5f39353dad
commit c6c1fb937d
4 changed files with 301 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/mini.css
View File

File diff suppressed because one or more lines are too long

196
docs/mini/flavor.scss
View File

@ -470,7 +470,11 @@ button#disclaimer-close{
#splash {
height: auto;
padding-bottom: 1.5rem;
background: linear-gradient(135deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
background: linear-gradient(
135deg,
rgba(255, 174, 39, 1) 0%,
rgba(222, 73, 109, 1) 100%
);
#logo {
margin-top: 0;
margin-left: -0.5rem;
@ -492,15 +496,16 @@ button#disclaimer-close{
margin-left: -0.5rem;
> a {
background: transparent;
border: 0.0625rem solid rgba(17,17,17,0.95);
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
transition: all 0.3s;
&:hover, &:focus {
background: rgba(17,17,17,0.95);
&:hover,
&:focus {
background: rgba(17, 17, 17, 0.95);
color: #e86957;
}
}
}
@media screen and (max-width:767px){
@media screen and (max-width: 767px) {
#logo {
font-size: 1.75rem;
img {
@ -515,7 +520,7 @@ button#disclaimer-close{
font-size: 0.875rem;
}
}
@media screen and (max-width: 383px){
@media screen and (max-width: 383px) {
#logo {
font-size: 1.5rem;
img {
@ -526,7 +531,7 @@ button#disclaimer-close{
padding: 0.125rem 5%;
}
}
@media screen and (max-width: 479px){
@media screen and (max-width: 479px) {
#tagline #tagline-lg {
display: none;
}
@ -545,7 +550,7 @@ button#disclaimer-close{
}
}
h2.index-section {
h2 {
border-left: 0.3125rem solid #de4a6d;
padding-left: 0.625rem;
margin-top: 2rem;
@ -553,7 +558,7 @@ h2.index-section {
#license-icon {
text-align: center;
@media screen and (min-width: 768px){
@media screen and (min-width: 768px) {
position: relative;
top: calc(50% - 40px);
}
@ -575,18 +580,41 @@ h2.index-section {
#in-numbers {
background: #111; //#3f88c5; //#e15554;
padding-top: 1.25rem;
@media screen and (max-width: 767px){
padding-bottom: 1rem;
}
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #fff;
svg {
fill: #fff;
@media screen and (min-width: 768px) {
position: relative;
top: 20px;
left: -34px;
width: 32px;
height: 32px;
}
}
p {
overflow-wrap: break-word;
@media screen and (min-width: 768px) {
position: relative;
top: -24px;
left: 22px;
font-size: 0.75rem;
}
margin-top: 0;
font-size: 0.625rem;
margin-bottom: 0;
}
}
#snippet-count, #contrib-count, #commit-count, #test-count {
font-size: 1.5rem;
#snippet-count,
#contrib-count,
#commit-count,
#star-count {
font-size: 1rem;
@media screen and (min-width: 768px) {
font-size: 1.25rem;
}
}
ul#links {
@ -601,6 +629,15 @@ ul#links {
display: none;
}
.card.pick {
transition: all 0.6s;
left: 0;
}
.card.pick + .card.pick {
margin-top: 0.5rem;
}
.pick.selected {
overflow: visible;
button.next {
@ -611,32 +648,115 @@ ul#links {
margin-right: -0.0625rem;
}
}
button.previous {
position: absolute;
top: 50%;
left: -1rem;
> svg {
margin-left: -0.0625rem;
}
}
#pick-slider {
position: relative;
}
button.previous {
left: -1%;
> svg {
margin-left: -0.125rem;
}
button.previous, button.next {
border-radius: 100%;
background: #f8f8f8;
border: 0.03125rem solid #ddd;
width: 1.5rem;
height: 1.5rem;
padding: 0;
margin: 0;
}
button.next {
right: -1%;
> svg {
margin-left: 0.0625rem;
}
}
button.previous,
button.next {
position: absolute;
top: 50%;
border-radius: 100%;
background: #f8f8f8;
border: 0.03125rem solid #ddd;
width: 1.5rem;
height: 1.5rem;
padding: 0;
margin: 0;
transition: all 0.3s;
z-index: 2000;
> svg {
fill: #888;
transition: all 0.3s;
}
&:hover,
&:focus {
border-color: #aaa;
> svg {
fill: #888;
transition: all 0.3s;
}
&:hover, &:focus {
border-color: #aaa;
> svg {
fill: #444;
}
fill: #444;
}
}
}
.card.contributor {
height: calc(100% - 1rem);
justify-content: left;
> .section.media {
height: auto;
}
> .section.button {
font-size: 0.75rem;
font-weight: 700;
text-align: center;
transition: color 0.3s;
&:hover,
&:focus {
color: var(--a-l-col);
background: #f8f8f8;
}
}
}
.card.fluid.contribution-guideline {
overflow: visible;
margin-top: 3rem;
padding-bottom: 0.25rem;
h3 {
padding-top: 0.5rem;
text-align: center;
}
}
.contribution-guideline + .contribution-guideline {
&:before,
&:after {
content: "";
position: relative;
top: -2.75rem;
width: 0.375rem;
height: 0.375rem;
background: #ddd;
border: 0.03125rem solid #d0d0d0;
border-radius: 100%;
left: calc(50% - 0.1875rem);
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
}
&:after {
position: absolute;
top: - 1.875rem;
}
}
.contribution-number {
position: absolute;
top: -1.125rem;
left: calc(50% - 1.125rem);
font-size: 1.5rem;
background: linear-gradient(
135deg,
rgba(255, 174, 39, 1) 0%,
rgba(222, 73, 109, 1) 100%
);
border: 0.03125 solid #ddd;
width: 2.25rem;
text-align: center;
height: 2.25rem;
border-radius: 100%;
font-weight: 700;
color: #fff;
}

183
static-parts/index.html
View File

@ -14,11 +14,33 @@
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<div id="splash">
<div id="splash">
<h1 id="logo"><img src="https://30secondsofcode.org/favicon.png" alt="logo"> 30 seconds of code</h1>
<p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
<p id="doc-link"><a href="#" class="button">View collection</a></p>
</div>
<div id="in-numbers">
<div class="container">
<div class="row">
<div class="col-sm-3 no-padding" style="text-align: center">
<svg version="1.1" width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-code" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
<p><span id="snippet-count">295</span><br/>snippets</p>
</div>
<div class="col-sm-3 no-padding" style="text-align: center">
<svg version="1.1" width="24" height="24" viewBox="0 0 16 16" class="octicon octicon-organization" aria-hidden="true"><path fill-rule="evenodd" d="M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088A6.78 6.78 0 0 1 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4z"/></svg>
<p><span id="contrib-count">114</span><br/>contributors</p>
</div>
<div class="col-sm-3 no-padding" style="text-align: center">
<svg version="1.1" width="24" height="24" viewBox="0 0 10 16" class="octicon octicon-git-branch" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
<p><span id="commit-count">3028</span><br/>commits</p>
</div>
<div class="col-sm-3 no-padding" style="text-align: center">
<svg version="1.1" width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-star" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
<p><span id="star-count">19459</span><br/>stars</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
@ -40,9 +62,11 @@
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
<h2 class="index-section">Today's picks</h2>
<div id="pick-slider">
<button class="next"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-right" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3l5 5z"/></svg></button>
<button class="previous"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-left" aria-hidden="true"><path fill-rule="evenodd" d="M6 3l1.5 1.5L3.75 8l3.75 3.5L6 13 1 8l5-5z"/></svg></button>
<div class="card fluid pick selected">
<button class="next"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-right" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3l5 5z"/></svg></button>
<button class="previous"><svg version="1.1" width="8" height="16" viewBox="0 0 8 16" class="octicon octicon-chevron-left" aria-hidden="true"><path fill-rule="evenodd" d="M6 3l1.5 1.5L3.75 8l3.75 3.5L6 13 1 8l5-5z"/></svg></button><h3 id="bottomvisible" class="section double-padded">bottomVisible</h3><div class="section double-padded"><p>Returns <code>true</code> if the bottom of the page is visible, <code>false</code> otherwise.</p><p>Use <code>scrollY</code>, <code>scrollHeight</code> and <code>clientHeight</code> to determine if the bottom of the page is visible.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bottomVisible</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=&gt;</span>
<h3 id="bottomvisible" class="section double-padded">bottomVisible</h3><div class="section double-padded"><p>Returns <code>true</code> if the bottom of the page is visible, <code>false</code> otherwise.</p><p>Use <code>scrollY</code>, <code>scrollHeight</code> and <code>clientHeight</code> to determine if the bottom of the page is visible.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bottomVisible</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=&gt;</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight <span class="token operator">+</span> window<span class="token punctuation">.</span>scrollY <span class="token operator">&gt;=</span>
<span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollHeight <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">bottomVisible</span><span class="token punctuation">();</span> <span class="token comment">// true</span>
@ -50,30 +74,9 @@
<div class="card fluid pick"><h3 id="ary" class="section double-padded">ary</h3><div class="section double-padded"><p>Creates a function that accepts up to <code>n</code> arguments, ignoring any additional arguments.</p><p>Call the provided function, <code>fn</code>, with up to <code>n</code> arguments, using <code>Array.slice(0,n)</code> and the spread operator (<code>...</code>).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">ary</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> n<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">));</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> firstTwoMax <span class="token operator">=</span> <span class="token function">ary</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>max<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">6</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">], [</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">], [</span><span class="token number">10</span><span class="token punctuation">]].</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=&gt;</span> <span class="token function">firstTwoMax</span><span class="token punctuation">(</span><span class="token operator">...</span>x<span class="token punctuation">));</span> <span class="token comment">// [6, 8, 10]</span>
</pre><button class="primary clipboard-copy">📋&nbsp;Copy to clipboard</button></div></div>
</pre></div></div>
<br/>
</div>
</div>
</div>
<div id="in-numbers">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 no-padding" style="text-align: center">
<svg version="1.1" width="48" height="48" viewBox="0 0 14 16" class="octicon octicon-code" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
<p><span id="snippet-count">295</span><br/>snippets</p><br/>
</div>
<div class="col-sm-6 col-md-3 no-padding" style="text-align: center">
<svg version="1.1" width="48" height="48" viewBox="0 0 16 16" class="octicon octicon-organization" aria-hidden="true"><path fill-rule="evenodd" d="M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088A6.78 6.78 0 0 1 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4z"/></svg>
<p><span id="contrib-count">114</span><br/>contributors</p><br/>
</div>
<div class="col-sm-6 col-md-3 no-padding" style="text-align: center">
<svg version="1.1" width="48" height="48" viewBox="0 0 10 16" class="octicon octicon-git-branch" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
<p><span id="commit-count">3028</span><br/>commits</p>
</div>
<div class="col-sm-6 col-md-3 no-padding" style="text-align: center">
<svg version="1.1" width="48" height="48" viewBox="0 0 16 16" class="octicon octicon-dashboard" aria-hidden="true"><path fill-rule="evenodd" d="M9 5H8V4h1v1zm4 3h-1v1h1V8zM6 5H5v1h1V5zM5 8H4v1h1V8zm11-5.5l-.5-.5L9 7c-.06-.02-1 0-1 0-.55 0-1 .45-1 1v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-.92l6-5.58zm-1.59 4.09c.19.61.3 1.25.3 1.91 0 3.42-2.78 6.2-6.2 6.2-3.42 0-6.21-2.78-6.21-6.2 0-3.42 2.78-6.2 6.2-6.2 1.2 0 2.31.34 3.27.94l.94-.94A7.459 7.459 0 0 0 8.51 1C4.36 1 1 4.36 1 8.5 1 12.64 4.36 16 8.5 16c4.14 0 7.5-3.36 7.5-7.5 0-1.03-.2-2.02-.59-2.91l-1 1z"/></svg>
<p><span id="test-count">999</span><br/>tests</p>
</div>
</div>
</div>
</div>
@ -102,32 +105,126 @@
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
<h2 class="index-section">Top contributors</h2>
<p style="text-align: justify">TODO using Github API</p><br/>
<div class="row">
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/Chalarangelo.png"/>
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/fejes713.png"/>
<a href="https://github.com/fejes713" class="section button">Stefan Feješ</a>
</div></div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/flxwu.png"/>
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
</div></div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/atomiks.png"/>
<a href="https://github.com/atomiks" class="section button">atomiks</a>
</div></div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/kingdavidmartins.png"/>
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
</div></div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/kriadmin.png"/>
<a href="https://github.com/kriadmin" class="section button">Rohit Tanwar</a>
</div></div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/iamsoorena.png"/>
<a href="https://github.com/iamsoorena" class="section button">Soorena Soleimani</a>
</div></div>
<div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
<img class="section media" src="https://github.com/skatcat31.png"/>
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
</div></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
<h2 class="index-section">How to contribute</h2>
<p style="text-align: justify">TODO</p><br/>
</div>
<p style="text-align: justify">Do you have a cool idea for a new snippet? Maybe some code you use often and is not part of our collection? Contributing to <strong>30 seconds of code</strong> is as simple as 1,2,3,4!</p>
<div class="card fluid contribution-guideline">
<span class="contribution-number">1</span>
<div class="section">
<h3>Create</h3>
<p style="text-align: justify">Start by creating a snippet, according to the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippet-template.md">snippet template. Make sure to follow these simple guidelines:</a></p>
<ul style="text-align: justify">
<li>Your snippet title must be unique and the same as the name of the implemented function.</li>
<li>Use the snippet description to explain what your snippet does and how it works.</li>
<li>Try to keep the snippet's code short and to the point. Use modern techniques and features.</li>
<li>Remember to provide an example of how your snippet works.</li>
<li>Your snippet should solve a real-world problem, no matter how simple.</li>
<li>Never modify README.md or any of the HTML files.</li>
</ul>
</div>
</div>
<div class="card fluid contribution-guideline">
<span class="contribution-number">2</span>
<div class="section">
<h3>Tag</h3>
<p style="text-align: justify">Run <code>npm run tagger</code> from your terminal, then open the tag_database file and tag your snippet appropriately. Multitagging is also supported, just make sure the first tag you specify is on of the major tags and the one that is most relevant to the implemneted function.</p>
</div>
</div>
<div class="card fluid contribution-guideline">
<span class="contribution-number">3</span>
<div class="section">
<h3>Test</h3>
<p style="text-align: justify">You can optionally test your snippet to make our job easier. Simply run <code>npm run tester</code> to generate the test files for your snippet. Find the related folder for you snippet under the test directory and write some tests. Remember to run <code>npm run tester</code> again to make sure your tests are passing.</p>
</div>
</div>
<div class="card fluid contribution-guideline">
<span class="contribution-number">4</span>
<div class="section">
<h3>Pull request</h3>
<p style="text-align: justify">If you have done everything mentioned above, you should now have an awesome snippet to add to our collection. Simply start a pull request and follow the guidelines provided. Remember to only submit one snippet per pull request, so that we can quickly evaluate and merge your code into the collection.</p>
</div>
</div>
<p>If you need additional pointers about writing a snippet, be sure to read the complete <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md">contribution guidelines</a>.</p>
</div>
</div>
</div>
<br/>
<footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> 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>
<script>
window.onload = function(){
document.addEventListener('scroll', function(e){
if(animated) return;
let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#test-count'];
let values = [295,114,3028,999];
let steps = [1,1,8,3];
if(counters.some(v => elementIsVisibleInViewport(document.body.querySelector(v), false))) {
animated = true;
runCounter(counters[0],0,values[0],steps[0]);
runCounter(counters[1],0,values[1],steps[1]);
runCounter(counters[2],0,values[2],steps[2]);
runCounter(counters[3],0,values[3],steps[3]);
}
});
let counters = ['#snippet-count', '#contrib-count', '#commit-count', '#star-count'];
let values = [295,114,3028,19459];
let steps = [1,1,8,42];
runCounter(counters[0],0,values[0],steps[0]);
runCounter(counters[1],0,values[1],steps[1]);
runCounter(counters[2],0,values[2],steps[2]);
runCounter(counters[3],0,values[3],steps[3]);
document.querySelector('button.next').addEventListener('click', e => {
let selected = e.target.parentElement.querySelector('.selected');
if(selected == Array.from(document.querySelectorAll('.card.fluid.pick')).slice(-1)[0])
{
document.querySelector('.card.fluid.pick').className = 'card fluid pick selected';
}
else {
selected.nextElementSibling.className = 'card fluid pick selected';
}
selected.className = 'card fluid pick';
});
document.querySelector('button.previous').addEventListener('click', e => {
let selected = e.target.parentElement.querySelector('.selected');
if(selected == document.querySelector('.card.fluid.pick'))
{
Array.from(document.querySelectorAll('.card.fluid.pick')).slice(-1)[0].className = 'card fluid pick selected';
}
else {
selected.previousElementSibling.className = 'card fluid pick selected';
}
selected.className = 'card fluid pick';
});
document.addEventListener('click', function (event) {
if ( event.target.classList.contains('collapse') ) {
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
}
}, false);
}
const runCounter = (selector, start, end, increment = 1, duration = 2000) => {
let current = start,
@ -149,7 +246,9 @@ const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
let animated = false;
document.querySelector('button.next').addEventListener('click', e => {
e.target.parentElement.querySelector('.selected').nextElementSibling.className +=' selected';
});
</script>
</body>

1
static-parts/mini.css Normal file
View File

File diff suppressed because one or more lines are too long