Skip to content

Commit c9ed914

Browse files
roeibroeib
authored
Table of Contents
1 parent 12441ac commit c9ed914

File tree

1 file changed

+53
-41
lines changed

1 file changed

+53
-41
lines changed

‎README.md

+53-41
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,24 @@
1414
|8 | [Get unique values in an array](#Get-unique-values-in-an-array)|
1515
|9 | [Copy Text to Clipboard](#Copy-Text-to-Clipboard)|
1616
|10 | [Nested Destructuring](#Nested-Destructuring)|
17+
|11 | [URLSearchParams](#URLSearchParams)|
18+
|12 | [Count elements in an array](#Count-elements-in-an-array)|
19+
|13 | [Aliases with JavaScript Destructuring](#Aliases-with-JavaScript-Destructuring)|
20+
|14 | [The Object.is() method determines whether two values are the same value](#The-Object.is()-method-determines-whether-two-values-are-the-same-value)|
21+
|15 | [Freeze an object](#Freeze-an-object)|
22+
|16 | [Printing Object keys and values](#Printing-Object-keys-and-values)|
23+
|17 | [Capture the right click event](#Capture-the-right-click-event)|
24+
|18 | [In HTML5, you can tell the browser when to run your JavaScript code](#In-HTML5,-you-can-tell-the-browser-when-to-run-your-JavaScript-code)|
25+
|19 | [Nullish coalescing operator](#Nullish-coalescing-operator)|
26+
|20 | [Optional chaining](#Optional-chaining)|
27+
|21 | [globalThis](#globalThis)|
28+
|22 | [The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.](#The-second-argument-of-JSON.stringify-lets-you-cherry-pick-🍒-keys-to-serialize)|
29+
|23 | [Fire an event listener only once.](#Fire-an-event-listener-only-once)|
30+
|24 | [Vanilla JS toggle](#Vanilla-JS-toggle)|
31+
|25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)|
32+
|26 | [getBoundingClientRect](#getBoundingClientRect)|
33+
|27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)|
34+
1735

1836

1937

@@ -217,7 +235,8 @@ const { education : { degree } } = user;
217235
console.log(degree) //Masters
218236
```
219237

220-
# URLSearchParams
238+
**[⬆ Back to Top](#table-of-contents)**
239+
### URLSearchParams
221240

222241

223242
```javascript
@@ -232,22 +251,8 @@ console.log(urlParams.toString()); // "?post=1234&action=edit"
232251
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
233252
```
234253

235-
236-
# Shuffle an array
237-
238-
239-
```javascript
240-
const list = [1,2,3,4,5,6,7,8,9];
241-
const shuffle = list.sort(func);
242-
243-
function func(a,b){
244-
return 0.5 - Math.random();
245-
}
246-
247-
console.log(shuffle);
248-
```
249-
250-
# Count elements in an array
254+
**[⬆ Back to Top](#table-of-contents)**
255+
### Count elements in an array
251256

252257

253258
```javascript
@@ -272,8 +277,8 @@ const countMyFruits = myFruits.reduce((countFruits,fruit) => {
272277
// { Apple:3, Banana:1, Mango:2, Orange:1 }
273278
```
274279

275-
276-
# Aliases with JavaScript Destructuring
280+
**[⬆ Back to Top](#table-of-contents)**
281+
### Aliases with JavaScript Destructuring
277282

278283

279284
```javascript
@@ -293,8 +298,8 @@ console.log(pageName) // JSsnippets
293298
```
294299

295300

296-
297-
# The Object.is() method determines whether two values are the same value
301+
**[⬆ Back to Top](#table-of-contents)**
302+
### The Object.is() method determines whether two values are the same value
298303

299304

300305
```javascript
@@ -312,8 +317,8 @@ Object.is(foo, bar); // false
312317
```
313318

314319

315-
316-
# How can we freeze an object
320+
**[⬆ Back to Top](#table-of-contents)**
321+
### Freeze an object
317322

318323

319324
```javascript
@@ -342,8 +347,8 @@ Object.isFrozen(obj) //true
342347

343348
```
344349

345-
346-
# Printing Object keys and values
350+
**[⬆ Back to Top](#table-of-contents)**
351+
### Printing Object keys and values
347352

348353

349354
```javascript
@@ -365,7 +370,9 @@ for(let [key,value] of Object.entries(obj)){
365370
// order is not guaranteed
366371

367372
```
368-
# Capture the right click event
373+
374+
**[⬆ Back to Top](#table-of-contents)**
375+
### Capture the right click event
369376

370377
```javascript
371378
window.oncontextmenu = () => {
@@ -380,8 +387,8 @@ window.addEventListener('contextmenu', ()=>{
380387
},false)
381388
```
382389

383-
384-
# In HTML5, you can tell the browser when to run your JavaScript code
390+
**[⬆ Back to Top](#table-of-contents)**
391+
### In HTML5, you can tell the browser when to run your JavaScript code
385392
```javascript
386393

387394
//Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag.
@@ -395,7 +402,8 @@ window.addEventListener('contextmenu', ()=>{
395402
<script defer src="myscript.js"></script>
396403
```
397404

398-
# nullish coalescing operator
405+
**[⬆ Back to Top](#table-of-contents)**
406+
### Nullish coalescing operator
399407
```javascript
400408

401409
// an equality check against nullary values (e.g. null or undefined). Whenever the expression to the left of the ?? operator evaluates to either //undefined or null, the value defined to the right will be returned.
@@ -410,7 +418,8 @@ console.log(age);
410418
// expected output: "0"
411419
```
412420
413-
# Optional chaining
421+
**[⬆ Back to Top](#table-of-contents)**
422+
### Optional chaining
414423
```javascript
415424

416425
const car = {}
@@ -433,7 +442,8 @@ console.log(newCarColor)
433442
//You can use this syntax today using @babel/plugin-proposal-optional-chaining
434443
```
435444
436-
# globalThis
445+
**[⬆ Back to Top](#table-of-contents)**
446+
### globalThis
437447
```javascript
438448
Accessing the global property in JavaScript has always posed some difficulty. This is because
439449
different platforms have different ways to access it.
@@ -451,7 +461,7 @@ console.log(globalThis) //get the global this depends on your environment
451461
```
452462
453463
454-
464+
**[⬆ Back to Top](#table-of-contents)**
455465
# The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.
456466
```javascript
457467
const user = {
@@ -478,8 +488,8 @@ returns
478488

479489
```
480490
481-
482-
# Fire an event listener only once.
491+
**[⬆ Back to Top](#table-of-contents)**
492+
### Fire an event listener only once
483493
```javascript
484494
const el = document.getElementById("btn");
485495

@@ -493,8 +503,8 @@ el.addEventListener('click', myClickHandler, {
493503
});
494504

495505
```
496-
497-
# Vanilla JS toggle
506+
**[⬆ Back to Top](#table-of-contents)**
507+
### Vanilla JS toggle
498508
```javascript
499509
const span = document.querySelector("span");
500510
let classes = span.classList;
@@ -510,7 +520,9 @@ span.addEventListener("click", function() {
510520
});
511521

512522
```
513-
# Check if a string is a valid JSON
523+
524+
**[⬆ Back to Top](#table-of-contents)**
525+
### Check if a string is a valid JSON
514526
515527
```javascript
516528
function isJson(str) {
@@ -524,8 +536,8 @@ function isJson(str) {
524536
return true;
525537
}
526538
```
527-
528-
# getBoundingClientRect
539+
**[⬆ Back to Top](#table-of-contents)**
540+
### getBoundingClientRect
529541
530542
```javascript
531543
//getBoundingClientRect provides you with important pieces of data about an
@@ -544,8 +556,8 @@ const bodyBounderies = document.body.getBoundingClientRect();
544556
// }
545557
```
546558
547-
548-
# Check if a node is in the viewport
559+
**[⬆ Back to Top](#table-of-contents)**
560+
### Check if a node is in the viewport
549561
bonus: add/remove animation depending if an image is in the viewport
550562
https://codepen.io/JSsnippets/pen/PoqrjEY
551563
```javascript

0 commit comments

Comments
 (0)