Travis build: 1067
This commit is contained in:
30secondsofcode
@ -2014,7 +2014,7 @@ const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
|
||||
<summary>Examples</summary>
|
||||
|
||||
```js
|
||||
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page
|
||||
hide(...document.querySelectorAll('img')); // Hides all <img> elements on the page
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -2288,7 +2288,7 @@ const show = (...el) => [...el].forEach(e => (e.style.display = ''));
|
||||
<summary>Examples</summary>
|
||||
|
||||
```js
|
||||
show(document.querySelectorAll('img')); // Shows all <img> elements on the page
|
||||
show(...document.querySelectorAll('img')); // Shows all <img> elements on the page
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -375,7 +375,7 @@ console<span class="token punctuation">.</span><span class="token function">log<
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hasclass" class="section double-padded">hasClass</h3><div class="section double-padded"><p>Returns <code>true</code> if the element has the specified class, <code>false</code> otherwise.</p><p>Use <code>element.classList.contains()</code> to check if the element has the specified class.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hasClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>className<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hasClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">),</span> <span class="token string">'special'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hide" class="section double-padded">hide</h3><div class="section double-padded"><p>Hides all the elements specified.</p><p>Use the spread operator (<code>...</code>) and <code>Array.forEach()</code> to apply <code>display: none</code> to each element specified.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>el<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">].</span><span class="token function">forEach</span><span class="token punctuation">(</span>e <span class="token operator">=></span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">));</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hide</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">));</span> <span class="token comment">// Hides all <img> elements on the page</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hide</span><span class="token punctuation">(</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">));</span> <span class="token comment">// Hides all <img> elements on the page</span>
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="httpsredirect" class="section double-padded">httpsRedirect</h3><div class="section double-padded"><p>Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.</p><p>Use <code>location.protocol</code> to get the protocol currently being used. If it's not HTTPS, use <code>location.replace()</code> to replace the existing page with the HTTPS version of the page. Use <code>location.href</code> to get the full address, split it with <code>String.split()</code> and remove the protocol part of the URL.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpsRedirect</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>location<span class="token punctuation">.</span>protocol <span class="token operator">!==</span> <span class="token string">'https:'</span><span class="token punctuation">)</span> location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'https://'</span> <span class="token operator">+</span> location<span class="token punctuation">.</span>href<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'//'</span><span class="token punctuation">)[</span><span class="token number">1</span><span class="token punctuation">]);
|
||||
};</span>
|
||||
@ -460,7 +460,7 @@ document<span class="token punctuation">.</span>body<span class="token punctuati
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="setstyle" class="section double-padded">setStyle</h3><div class="section double-padded"><p>Sets the value of a CSS rule for the specified element.</p><p>Use <code>element.style</code> to set the value of the CSS rule for the specified element to <code>val</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">setStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> ruleName<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span>style<span class="token punctuation">[</span>ruleName<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">setStyle</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">),</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span> <span class="token string">'20px'</span><span class="token punctuation">);</span> <span class="token comment">// The first <p> element on the page will have a font-size of 20px</span>
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="show" class="section double-padded">show</h3><div class="section double-padded"><p>Shows all the elements specified.</p><p>Use the spread operator (<code>...</code>) and <code>Array.forEach()</code> to clear the <code>display</code> property for each element specified.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">show</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>el<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">].</span><span class="token function">forEach</span><span class="token punctuation">(</span>e <span class="token operator">=></span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">));</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">show</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">));</span> <span class="token comment">// Shows all <img> elements on the page</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">show</span><span class="token punctuation">(</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">));</span> <span class="token comment">// Shows all <img> elements on the page</span>
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="toggleclass" class="section double-padded">toggleClass</h3><div class="section double-padded"><p>Toggle a class for an element.</p><p>Use <code>element.classList.toggle()</code> to toggle the specified class for the element.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toggleClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span>className<span class="token punctuation">);</span>
|
||||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toggleClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">),</span> <span class="token string">'special'</span><span class="token punctuation">);</span> <span class="token comment">// The paragraph will not have the 'special' class anymore</span>
|
||||
</pre><button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard"> Copy to clipboard</button></div></div><div class="card fluid"><h3 id="uuidgeneratorbrowser" class="section double-padded">UUIDGeneratorBrowser</h3><div class="section double-padded"><p>Generates a UUID in a browser.</p><p>Use <code>crypto</code> API to generate a UUID, compliant with <a href="https://www.ietf.org/rfc/rfc4122.txt">RFC4122</a> version 4.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">UUIDGeneratorBrowser</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span>
|
||||
|
||||
Reference in New Issue
Block a user