From f2ed727ccdffae3326fb24bfa309c32dffab3b08 Mon Sep 17 00:00:00 2001 From: JS snippets <56507838+JSsnippets@users.noreply.github.com> Date: Mon, 23 Mar 2020 09:15:46 +0200 Subject: [PATCH 01/43] Create License --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6b2982b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 JS snippets + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From 7b59f88e2a3b5e0412688b78048c13a8883df349 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 24 Mar 2020 10:48:36 +0200 Subject: [PATCH 02/43] Vanilla JS toggle --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 0b4a10c..2038607 100644 --- a/README.md +++ b/README.md @@ -474,5 +474,21 @@ el.addEventListener('click', myClickHandler, { ``` +# Vanilla JS toggle +```javascript +const span = document.querySelector("span"); +let classes = span.classList; + +span.addEventListener("click", function() { + let result = classes.toggle("active"); + + if (result) { + console.log("active class was added"); + } else { + console.log("active class was removed"); + } +}); + +``` From 9f0b20d6a917f1402cd900160d9248b006b84175 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 7 Apr 2020 10:06:48 +0300 Subject: [PATCH 03/43] Check if a string is a valid JSON --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 2038607..63a293b 100644 --- a/README.md +++ b/README.md @@ -490,5 +490,21 @@ span.addEventListener("click", function() { }); ``` +# Check if a string is a valid JSON + +```javascript +function isJson(str) { + try { + JSON.parse(str); + } catch (e) { + //the json is not ok + return false; + } + //the json is ok + return true; +} +``` + + From b178daefe3dda0f6330641510b5047a0e80c30b6 Mon Sep 17 00:00:00 2001 From: adrianprzybyla Date: Wed, 15 Apr 2020 20:54:01 +0200 Subject: [PATCH 04/43] Fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 63a293b..4b8f9dc 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ console.log(muatatedArray) //['a','b','d','e'] //Non-mutating way const nonMuatatedArray = ['a','b','c','d','e']; -const newArray = nonMuatatedArray.filter((item'index) => !( index === 2 )); +const newArray = nonMuatatedArray.filter((item, index) => !( index === 2 )); console.log(newArray) //['a','b','d','e'] ``` From a23d6482fe537d0a79c6f530d55ed0c50eaa7588 Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 10 May 2020 15:00:48 +0300 Subject: [PATCH 05/43] getBoundingClientRect --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index 4b8f9dc..3bda4ae 100644 --- a/README.md +++ b/README.md @@ -505,6 +505,26 @@ function isJson(str) { } ``` +# getBoundingClientRect + +```javascript +//getBoundingClientRect provides you with important pieces of data about an +//HTML element’s size and positioning. + +const bodyBounderies = document.body.getBoundingClientRect(); +// => { +// top: Number, +// left: Number, +// right: Number, +// bottom: Number, +// x: Number, +// y: Number, +// width: Number, +// height: Number, +// } +``` + + From 603fba54957aa8608b11f6f9aea205c81e5719ae Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 12 May 2020 12:32:39 +0300 Subject: [PATCH 06/43] check if a node is in the viewport --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 3bda4ae..958abe1 100644 --- a/README.md +++ b/README.md @@ -525,6 +525,23 @@ const bodyBounderies = document.body.getBoundingClientRect(); ``` +# Check if a node is in the viewport +```javascript +const image = document.querySelector('.animate-me'); + +observer = new IntersectionObserver((entries) => { + const [ myImg ] = entries; + if (myImg.intersectionRatio > 0) { + myImg.target.classList.add('fancy'); + } else { + myImg.target.classList.remove('fancy'); + } +}); + + +observer.observe(image); + +``` From 453dca05821db6ff597f33bd4935c51b38abe644 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 12 May 2020 12:33:49 +0300 Subject: [PATCH 07/43] add animation if an image is in the viewport --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 958abe1..fcb9026 100644 --- a/README.md +++ b/README.md @@ -526,7 +526,8 @@ const bodyBounderies = document.body.getBoundingClientRect(); # Check if a node is in the viewport - +bonus: add/remove animation depending if an image is in the viewport +https://codepen.io/JSsnippets/pen/PoqrjEY ```javascript const image = document.querySelector('.animate-me'); From febc57912875ef6ba23ef5f5308dba094f67022c Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 12:14:32 +0300 Subject: [PATCH 08/43] update ReadMe --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fcb9026..8550e62 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ # JavaScript-snippets +> Click :star:if you like the project. Pull Request are highly appreciated. Follow us [Facebook](https://www.facebook.com/snippetsJS) on Facebook. JS snippets logo -# JSsnippets on Facebook -find us on [Facebook](https://www.facebook.com/snippetsJS) +### Table of Contents +| No. | Questions | +|---- | --------- +|1 | [What are the possible ways to create objects in JavaScript?](#How-to-generate-a-random-number-in-a-given-range) | +|2 | [What is prototype chain?](#what-is-prototype-chain)| -# How to generate a random number in a given range +**[⬆ Back to Top](#table-of-contents)** +### How to generate a random number in a given range ```javascript // Returns a random number(float) between min (inclusive) and max (exclusive) From 238a146d9571625b28d18b531292cb39aeeb3c88 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 12:16:46 +0300 Subject: [PATCH 09/43] update readme --- README.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 8550e62..7bc0049 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,11 @@ # JavaScript-snippets > Click :star:if you like the project. Pull Request are highly appreciated. Follow us [Facebook](https://www.facebook.com/snippetsJS) on Facebook. -JS snippets logo - - ### Table of Contents | No. | Questions | |---- | --------- -|1 | [What are the possible ways to create objects in JavaScript?](#How-to-generate-a-random-number-in-a-given-range) | -|2 | [What is prototype chain?](#what-is-prototype-chain)| +|1 | [Generate a random number in a given range](#How-to-generate-a-random-number-in-a-given-range) | +|2 | [Find the difference between two arrays](#How-to-find-the-difference-between-two-arrays)| **[⬆ Back to Top](#table-of-contents)** @@ -31,8 +28,8 @@ const getRandomNumberInclusive =(min, max)=> { getRandomNumberInclusive(2, 10); ``` -# How to find the difference between two arrays. - +**[⬆ Back to Top](#table-of-contents)** +### How to find the difference between two arrays ```javascript const firstArr = [5, 2, 1]; From 66f70e171c3e021cdc1f11fe01e27127093dd7a9 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 14:55:53 +0300 Subject: [PATCH 10/43] update README --- README.md | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 7bc0049..d395344 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,15 @@ |---- | --------- |1 | [Generate a random number in a given range](#How-to-generate-a-random-number-in-a-given-range) | |2 | [Find the difference between two arrays](#How-to-find-the-difference-between-two-arrays)| +|3 | [Convert truthy/falsy to boolean(true/false)](#Convert_truthy/falsy_to_boolean(true/false))| +|4 | [Repeat a string](#Repeat_a_string)| +|5 | [Check how long an operation takes](#Check_how_long_an_operation_takes)| +|6 | [Two ways to remove an item in a specific in an array](#Two_ways_to_remove_an_item_in_a_specific_in_an_array)| +|7 | [Did you know you can flat an array?](#Did_you_know_you_can_flat_an_array)| +|8 | [Get unique values in an array](#Get_unique_values_in_an_array)| +|9 | [Copy Text to Clipboard](#Copy_Text_to_Clipboard)| +|10 | [Nested Destructuring](#Nested_Destructuring)| + **[⬆ Back to Top](#table-of-contents)** @@ -68,7 +77,8 @@ difference(firstArr, secondArr); //[3,4] console.log('difference',difference(firstArr, secondArr)) ``` -# How to convert truthy/falsy to boolean(true/false) +**[⬆ Back to Top](#table-of-contents)** +### Convert truthy/falsy to boolean(true/false) ```javascript const myVar = null; const mySecondVar = 1; @@ -80,8 +90,8 @@ console.log( !!myVar ) // false console.log( Boolean(mySecondVar) ) // true console.log( !!mySecondVar ) // true ``` - -# How to repeat a string +**[⬆ Back to Top](#table-of-contents)** +### Repeat a string ```javascript let aliens = ''; @@ -99,7 +109,8 @@ Array(6).join('👽') //👽👽👽👽👽👽 ``` -# Check how long an operation takes +**[⬆ Back to Top](#table-of-contents)** +### Check how long an operation takes ```javascript //The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds. //performance.now() is relative to page load and more precise in orders of magnitude. @@ -112,7 +123,8 @@ const endTime = performance.now(); console.log("this doSomething took " + (endTime - startTime) + " milliseconds."); ``` -# Two ways to remove an item in a specific in an array +**[⬆ Back to Top](#table-of-contents)** +### Two ways to remove an item in a specific in an array ```javascript //Mutating way @@ -126,7 +138,8 @@ const newArray = nonMuatatedArray.filter((item, index) => !( index === 2 )); console.log(newArray) //['a','b','d','e'] ``` -# Did you know you can flat an array? +**[⬆ Back to Top](#table-of-contents)** +### Did you know you can flat an array ```javascript const myArray = [2, 3, [4, 5],[7,7, [8, 9, [1, 1]]]]; @@ -142,7 +155,8 @@ myArray.flat(infinity) // [2, 3, 4, 5 ,7,7, 8, 9, 1, 1]; ``` -# Get unique values in an array +**[⬆ Back to Top](#table-of-contents)** +### Get unique values in an array ```javascript const numbers = [1,1,3,2,5,3,4,7,7,7,8]; @@ -164,7 +178,9 @@ const unieqNumbers4 = _.uniq(numbers) console.log(unieqNumbers4) //[1,3,2,5,4,7,8] ``` -# Copy Text to Clipboard + +**[⬆ Back to Top](#table-of-contents)** +### Copy Text to Clipboard ```javascript @@ -182,7 +198,8 @@ function copyToClipboard(){ ``` -# Nested Destructuring +**[⬆ Back to Top](#table-of-contents)** +### Nested Destructuring ```javascript From 8f43b466cb757a6e472f678f6a2947177c2a800f Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 14:58:46 +0300 Subject: [PATCH 11/43] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d395344..6f24329 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ |---- | --------- |1 | [Generate a random number in a given range](#How-to-generate-a-random-number-in-a-given-range) | |2 | [Find the difference between two arrays](#How-to-find-the-difference-between-two-arrays)| -|3 | [Convert truthy/falsy to boolean(true/false)](#Convert_truthy/falsy_to_boolean(true/false))| +|3 | [Convert truthy/falsy to boolean(true/false)](#Convert_truthy_falsy_to_boolean)| |4 | [Repeat a string](#Repeat_a_string)| |5 | [Check how long an operation takes](#Check_how_long_an_operation_takes)| |6 | [Two ways to remove an item in a specific in an array](#Two_ways_to_remove_an_item_in_a_specific_in_an_array)| @@ -78,7 +78,8 @@ console.log('difference',difference(firstArr, secondArr)) ``` **[⬆ Back to Top](#table-of-contents)** -### Convert truthy/falsy to boolean(true/false) +### Convert truthy falsy to boolean + ```javascript const myVar = null; const mySecondVar = 1; From 12441ac38b30a2f4caccea975dd75d3cbdce065f Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 15:02:24 +0300 Subject: [PATCH 12/43] Update README.md --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 6f24329..59fe80e 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,19 @@ # JavaScript-snippets -> Click :star:if you like the project. Pull Request are highly appreciated. Follow us [Facebook](https://www.facebook.com/snippetsJS) on Facebook. +> Click :star:if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) ### Table of Contents | No. | Questions | |---- | --------- |1 | [Generate a random number in a given range](#How-to-generate-a-random-number-in-a-given-range) | |2 | [Find the difference between two arrays](#How-to-find-the-difference-between-two-arrays)| -|3 | [Convert truthy/falsy to boolean(true/false)](#Convert_truthy_falsy_to_boolean)| -|4 | [Repeat a string](#Repeat_a_string)| -|5 | [Check how long an operation takes](#Check_how_long_an_operation_takes)| -|6 | [Two ways to remove an item in a specific in an array](#Two_ways_to_remove_an_item_in_a_specific_in_an_array)| -|7 | [Did you know you can flat an array?](#Did_you_know_you_can_flat_an_array)| -|8 | [Get unique values in an array](#Get_unique_values_in_an_array)| -|9 | [Copy Text to Clipboard](#Copy_Text_to_Clipboard)| -|10 | [Nested Destructuring](#Nested_Destructuring)| +|3 | [Convert truthy/falsy to boolean(true/false)](#Convert-truthy-falsy-to-boolean)| +|4 | [Repeat a string](#Repeat-a-string)| +|5 | [Check how long an operation takes](#Check-how-long-an-operation-takes)| +|6 | [Two ways to remove an item in a specific in an array](#Two-ways-to-remove-an-item-in-a-specific-in-an-array)| +|7 | [Did you know you can flat an array?](#Did-you-know-you-can-flat-an-array)| +|8 | [Get unique values in an array](#Get-unique-values-in-an-array)| +|9 | [Copy Text to Clipboard](#Copy-Text-to-Clipboard)| +|10 | [Nested Destructuring](#Nested-Destructuring)| From c9ed914d5b45989d3c45c74cb1eb30f92d5a1873 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 15:26:57 +0300 Subject: [PATCH 13/43] Table of Contents --- README.md | 94 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 53 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 59fe80e..4051578 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,24 @@ |8 | [Get unique values in an array](#Get-unique-values-in-an-array)| |9 | [Copy Text to Clipboard](#Copy-Text-to-Clipboard)| |10 | [Nested Destructuring](#Nested-Destructuring)| +|11 | [URLSearchParams](#URLSearchParams)| +|12 | [Count elements in an array](#Count-elements-in-an-array)| +|13 | [Aliases with JavaScript Destructuring](#Aliases-with-JavaScript-Destructuring)| +|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)| +|15 | [Freeze an object](#Freeze-an-object)| +|16 | [Printing Object keys and values](#Printing-Object-keys-and-values)| +|17 | [Capture the right click event](#Capture-the-right-click-event)| +|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)| +|19 | [Nullish coalescing operator](#Nullish-coalescing-operator)| +|20 | [Optional chaining](#Optional-chaining)| +|21 | [globalThis](#globalThis)| +|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)| +|23 | [Fire an event listener only once.](#Fire-an-event-listener-only-once)| +|24 | [Vanilla JS toggle](#Vanilla-JS-toggle)| +|25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)| +|26 | [getBoundingClientRect](#getBoundingClientRect)| +|27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| + @@ -217,7 +235,8 @@ const { education : { degree } } = user; console.log(degree) //Masters ``` -# URLSearchParams +**[⬆ Back to Top](#table-of-contents)** +### URLSearchParams ```javascript @@ -232,22 +251,8 @@ console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" ``` - -# Shuffle an array - - -```javascript -const list = [1,2,3,4,5,6,7,8,9]; -const shuffle = list.sort(func); - -function func(a,b){ - return 0.5 - Math.random(); -} - -console.log(shuffle); -``` - -# Count elements in an array +**[⬆ Back to Top](#table-of-contents)** +### Count elements in an array ```javascript @@ -272,8 +277,8 @@ const countMyFruits = myFruits.reduce((countFruits,fruit) => { // { Apple:3, Banana:1, Mango:2, Orange:1 } ``` - -# Aliases with JavaScript Destructuring +**[⬆ Back to Top](#table-of-contents)** +### Aliases with JavaScript Destructuring ```javascript @@ -293,8 +298,8 @@ console.log(pageName) // JSsnippets ``` - -# The Object.is() method determines whether two values are the same value +**[⬆ Back to Top](#table-of-contents)** +### The Object.is() method determines whether two values are the same value ```javascript @@ -312,8 +317,8 @@ Object.is(foo, bar); // false ``` - -# How can we freeze an object +**[⬆ Back to Top](#table-of-contents)** +### Freeze an object ```javascript @@ -342,8 +347,8 @@ Object.isFrozen(obj) //true ``` - -# Printing Object keys and values +**[⬆ Back to Top](#table-of-contents)** +### Printing Object keys and values ```javascript @@ -365,7 +370,9 @@ for(let [key,value] of Object.entries(obj)){ // order is not guaranteed ``` -# Capture the right click event + +**[⬆ Back to Top](#table-of-contents)** +### Capture the right click event ```javascript window.oncontextmenu = () => { @@ -380,8 +387,8 @@ window.addEventListener('contextmenu', ()=>{ },false) ``` - -# In HTML5, you can tell the browser when to run your JavaScript code +**[⬆ Back to Top](#table-of-contents)** +### In HTML5, you can tell the browser when to run your JavaScript code ```javascript //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', ()=>{ ``` -# nullish coalescing operator +**[⬆ Back to Top](#table-of-contents)** +### Nullish coalescing operator ```javascript // 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); // expected output: "0" ``` -# Optional chaining +**[⬆ Back to Top](#table-of-contents)** +### Optional chaining ```javascript const car = {} @@ -433,7 +442,8 @@ console.log(newCarColor) //You can use this syntax today using @babel/plugin-proposal-optional-chaining ``` -# globalThis +**[⬆ Back to Top](#table-of-contents)** +### globalThis ```javascript Accessing the global property in JavaScript has always posed some difficulty. This is because different platforms have different ways to access it. @@ -451,7 +461,7 @@ console.log(globalThis) //get the global this depends on your environment ``` - +**[⬆ Back to Top](#table-of-contents)** # The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize. ```javascript const user = { @@ -478,8 +488,8 @@ returns ``` - -# Fire an event listener only once. +**[⬆ Back to Top](#table-of-contents)** +### Fire an event listener only once ```javascript const el = document.getElementById("btn"); @@ -493,8 +503,8 @@ el.addEventListener('click', myClickHandler, { }); ``` - -# Vanilla JS toggle +**[⬆ Back to Top](#table-of-contents)** +### Vanilla JS toggle ```javascript const span = document.querySelector("span"); let classes = span.classList; @@ -510,7 +520,9 @@ span.addEventListener("click", function() { }); ``` -# Check if a string is a valid JSON + +**[⬆ Back to Top](#table-of-contents)** +### Check if a string is a valid JSON ```javascript function isJson(str) { @@ -524,8 +536,8 @@ function isJson(str) { return true; } ``` - -# getBoundingClientRect +**[⬆ Back to Top](#table-of-contents)** +### getBoundingClientRect ```javascript //getBoundingClientRect provides you with important pieces of data about an @@ -544,8 +556,8 @@ const bodyBounderies = document.body.getBoundingClientRect(); // } ``` - -# Check if a node is in the viewport +**[⬆ Back to Top](#table-of-contents)** +### Check if a node is in the viewport bonus: add/remove animation depending if an image is in the viewport https://codepen.io/JSsnippets/pen/PoqrjEY ```javascript From 3d13553eeb8376a1020dac94a93c9c0573b83b70 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 15:29:14 +0300 Subject: [PATCH 14/43] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4051578..979852b 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ |11 | [URLSearchParams](#URLSearchParams)| |12 | [Count elements in an array](#Count-elements-in-an-array)| |13 | [Aliases with JavaScript Destructuring](#Aliases-with-JavaScript-Destructuring)| -|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)| +|14 | [The Object.is() method determines whether two values are the same value](#the-objectis-method-determines-whether-two-values-are-the-same-value)| |15 | [Freeze an object](#Freeze-an-object)| |16 | [Printing Object keys and values](#Printing-Object-keys-and-values)| |17 | [Capture the right click event](#Capture-the-right-click-event)| @@ -25,7 +25,7 @@ |19 | [Nullish coalescing operator](#Nullish-coalescing-operator)| |20 | [Optional chaining](#Optional-chaining)| |21 | [globalThis](#globalThis)| -|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)| +|22 | [The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.](#the-second-argument-of-jsonstringify-lets-you-cherry-pick--keys-to-serialize)| |23 | [Fire an event listener only once.](#Fire-an-event-listener-only-once)| |24 | [Vanilla JS toggle](#Vanilla-JS-toggle)| |25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)| From e324a053bad1a82eb9e3ef2d29ee64bb00e721c8 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 14 May 2020 15:29:51 +0300 Subject: [PATCH 15/43] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 979852b..f9b8d45 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ |15 | [Freeze an object](#Freeze-an-object)| |16 | [Printing Object keys and values](#Printing-Object-keys-and-values)| |17 | [Capture the right click event](#Capture-the-right-click-event)| -|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)| +|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)| |19 | [Nullish coalescing operator](#Nullish-coalescing-operator)| |20 | [Optional chaining](#Optional-chaining)| |21 | [globalThis](#globalThis)| From 32cabe1bab26687ae07250217891493a01942144 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 26 May 2020 11:35:48 +0300 Subject: [PATCH 16/43] Notify when element size is changed --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index f9b8d45..1495a0b 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ |25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)| |26 | [getBoundingClientRect](#getBoundingClientRect)| |27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| +|28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| @@ -577,4 +578,21 @@ observer.observe(image); ``` +**[⬆ Back to Top](#table-of-contents)** +### Notify when element size is changed +see our codepen: https://codepen.io/JSsnippets/pen/dyYoYVX +```javascript +const foo = document.getElementById("foo"); + +const observer = new ResizeObserver((entries) => { + for (let entry of entries) { + const cr = entry.contentRect; + console.log = `Size: ${cr.width}px X ${cr.height}px`; + } +}); +observer.observe(foo); + + +``` + From af8ebc291826eb0ee89c661870aa588342199e48 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 16 Jun 2020 09:42:21 +0300 Subject: [PATCH 17/43] Detect if Browser Tab is in the view --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 1495a0b..68b1108 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ |26 | [getBoundingClientRect](#getBoundingClientRect)| |27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| |28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| +|29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| @@ -592,6 +593,23 @@ const observer = new ResizeObserver((entries) => { }); observer.observe(foo); +``` +**[⬆ Back to Top](#table-of-contents)** +### Detect if Browser Tab is in the view +play/pause video accordingly +see our codepen: https://codepen.io/JSsnippets/pen/gOapPzq +```javascript + + +const video = document.getElementById("my-video"); + +const onVisibilitychange =()=>{ + return document.hidden + ? video.pause() + : video.play(); +} + +document.addEventListener("visibilitychange", onVisibilitychange) ``` From d593fc2c358d09048ee5f516eb7f4ff5fa7bd73b Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 24 Jun 2020 22:15:02 +0300 Subject: [PATCH 18/43] private class methods and fields --- README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/README.md b/README.md index 68b1108..756161a 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ |27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| |28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| |29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| +|30 | [Private class methods and fields](#Private-class-methods-and-fields)| @@ -614,3 +615,33 @@ document.addEventListener("visibilitychange", onVisibilitychange) ``` +**[⬆ Back to Top](#table-of-contents)** +### Private class methods and fields + +class Students { + #name; + + constructor(){ + this.#name = "JS snippets"; + } + + #privateMethod() { + return 'Come and learn Js with us'; + } + + getPrivateMessage() { + return this.#privateMethod(); + } +} + +const instance = new Something(); +console.log(instance.name); //=> undefined +console.log(instance.privateMethod); //=> undefined +console.log(instance.getPrivateMessage()); //=> Come and learn Js with us + +``` + + + + + From 5d87a6595f68b858fe917c1506ac801d895c6449 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 24 Jun 2020 22:19:36 +0300 Subject: [PATCH 19/43] typo --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 756161a..e27c252 100644 --- a/README.md +++ b/README.md @@ -617,6 +617,7 @@ document.addEventListener("visibilitychange", onVisibilitychange) **[⬆ Back to Top](#table-of-contents)** ### Private class methods and fields +```javascript class Students { #name; From fb3caebea2141098ada57901ead4cc3182646ca9 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 16 Jul 2020 09:13:56 +0300 Subject: [PATCH 20/43] Preventing paste into an input field --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e27c252..3428dc4 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ |28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| |29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| |30 | [Private class methods and fields](#Private-class-methods-and-fields)| - +|31 | [Preventing paste into an input field](#Preventing-paste-into-an-input-field)| @@ -643,6 +643,20 @@ console.log(instance.getPrivateMessage()); //=> Come and learn Js with us ``` +**[⬆ Back to Top](#table-of-contents)** +### Preventing paste into an input field +see our codepen: https://codepen.io/JSsnippets/pen/qBbyMoJ + +```javascript + +const pasteBox = document.getElementById("paste-no-event"); +pasteBox.onpaste = (e) => { + e.preventDefault(); + return false; +}; + +``` + From a9bd1cd06bf8a60420cfac78893ff0d87c43844e Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 4 Aug 2020 11:07:33 +0300 Subject: [PATCH 21/43] The void operator --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index 3428dc4..79bb9eb 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ |29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| |30 | [Private class methods and fields](#Private-class-methods-and-fields)| |31 | [Preventing paste into an input field](#Preventing-paste-into-an-input-field)| +|32 | [The void operator](#The-void-operator)| @@ -658,5 +659,19 @@ pasteBox.onpaste = (e) => { ``` +**[⬆ Back to Top](#table-of-contents)** +### The void operator +The void operator evaluates the given expression and then returns undefined. +```javascript + +void 0; //returns undefined +void (0); //returns undefined +void {}; //returns undefined +void "JSsnippets; //returns undefined +void (0); //returns undefined +void (2 == '2'); //returns undefined +void anyfunction(); //returns undefined + +``` From 6dafa8bd10cff371c5e562fef9347ec2a1c5aa03 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 27 Aug 2020 09:40:04 +0300 Subject: [PATCH 22/43] replaceAll --- README.md | 45 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 79bb9eb..6dd261b 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ |30 | [Private class methods and fields](#Private-class-methods-and-fields)| |31 | [Preventing paste into an input field](#Preventing-paste-into-an-input-field)| |32 | [The void operator](#The-void-operator)| +|33 | [replaceAll](#replaceAll)| @@ -660,8 +661,8 @@ pasteBox.onpaste = (e) => { **[⬆ Back to Top](#table-of-contents)** -### The void operator -The void operator evaluates the given expression and then returns undefined. +### replaceAll +the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith. ```javascript @@ -675,3 +676,43 @@ void anyfunction(); //returns undefined ``` + +**[⬆ Back to Top](#table-of-contents)** +### The void operator +The void operator evaluates the given expression and then returns undefined. +```javascript + + +const str = 'this is a JSsnippets example'; + +const updatedStr = str.replace('example', 'snippet'); // 'this is a JSsnippets snippet' + + +The tricky part is that replace method replaces only the very first match of the substring we have passed: + + +const str = 'this is a JSsnippets example and examples are great'; + +const updatedStr = str.replace('example', 'snippet'); //'this is a JSsnippets snippet and examples are great' + +In order to go through this, we need to use a global regexp instead: + + +const str = 'this is a JSsnippets example and examples are great'; + +const updatedStr = str.replace(/example/g, 'snippet'); //'this is a JSsnippets snippet and snippets are greatr' + +but now we have new friend in town, replaceAll + +const str = 'this is a JSsnippets example and examples are great'; + +const updatedStr = str.replaceAll('example', 'snippet'); //'this is a JSsnippets snippet and snippets are greatr' + +``` + + + + + + + From 3ed5b5f93855cd64acbefcd555f0b65dc8634232 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 27 Aug 2020 09:41:00 +0300 Subject: [PATCH 23/43] replace all change --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6dd261b..160449f 100644 --- a/README.md +++ b/README.md @@ -661,8 +661,8 @@ pasteBox.onpaste = (e) => { **[⬆ Back to Top](#table-of-contents)** -### replaceAll -the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith. +### The void operator +The void operator evaluates the given expression and then returns undefined. ```javascript @@ -678,8 +678,8 @@ void anyfunction(); //returns undefined **[⬆ Back to Top](#table-of-contents)** -### The void operator -The void operator evaluates the given expression and then returns undefined. +### replaceAll +the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith. ```javascript From 5b5e313d023337fbcd3ecb0f294aa10e80904889 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 9 Sep 2020 09:16:00 +0300 Subject: [PATCH 24/43] Required Function Params --- README.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 160449f..c63b3b9 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ |31 | [Preventing paste into an input field](#Preventing-paste-into-an-input-field)| |32 | [The void operator](#The-void-operator)| |33 | [replaceAll](#replaceAll)| - +|34 | [Required Function Params](#Required-Function-Params)| **[⬆ Back to Top](#table-of-contents)** @@ -711,6 +711,28 @@ const updatedStr = str.replaceAll('example', 'snippet'); //'this is a JSsnippets ``` +**[⬆ Back to Top](#table-of-contents)** +### Required Function Params +Expanding on the default parameter technique, we can mark a parameter as mandatory + +```javascript +const isRequired = () => { + throw new Error( 'This is a mandatory parameter.' ); +} + + +const getPage = ( pageName = 'Jssnippets', url = isRequired() ) => { + return `${pageName} ${url}`; +} + +console.log(getPage()); + +//In the above code, url will be undefined and that will try to set the default value for it which is the isRequired() function. It will throw an error as, + +//Uncaught error: This is a mandatory parameter. +//at isRequired + +``` From 48afc0ddd55ad4258b441977bea3d34cefe43173 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 23 Sep 2020 09:19:05 +0300 Subject: [PATCH 25/43] Get input value as a number --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index c63b3b9..c417bad 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,8 @@ |32 | [The void operator](#The-void-operator)| |33 | [replaceAll](#replaceAll)| |34 | [Required Function Params](#Required-Function-Params)| +|35 | [Get input value as a number](#Get-input-value-as-a-number)| + **[⬆ Back to Top](#table-of-contents)** @@ -737,4 +739,18 @@ console.log(getPage()); +**[⬆ Back to Top](#table-of-contents)** +### Get input value as a number + +```javascript + + + +function checkMyType(event){ + + console.log(typeof event.target.value) // string + console.log(typeof event.target.valueAsNumber ) // number + +} +``` From bae6599b2aeabca1736a47cf3f13d7b69b8b84f4 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 6 Oct 2020 10:39:29 +0300 Subject: [PATCH 26/43] reduceRight --- README.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c417bad..aa8bc05 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # JavaScript-snippets -> Click :star:if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) +> Click :star: if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) ### Table of Contents | No. | Questions | @@ -39,6 +39,7 @@ |33 | [replaceAll](#replaceAll)| |34 | [Required Function Params](#Required-Function-Params)| |35 | [Get input value as a number](#Get-input-value-as-a-number)| +|36 | [reduceRight](#reduceRight)| @@ -753,4 +754,24 @@ function checkMyType(event){ } + +``` +**[⬆ Back to Top](#table-of-contents)** +### reduceRight + +```javascript + +const arr = ["a", "b", "c", "d", "e"] + +const reduceArray = arr.reduce((acc, current) => { + return acc + current +}, "") +//return abcde + +const reduceRightArray = arr.reduceRight((acc, current) => { + return acc + current +}, "") +//return edcba + ``` + From f3233ab7ddbcc58a10638b0902cf8982e5265e70 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 27 Oct 2020 10:48:19 +0200 Subject: [PATCH 27/43] Abort Fetch --- README.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/README.md b/README.md index aa8bc05..88f2009 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,10 @@ |34 | [Required Function Params](#Required-Function-Params)| |35 | [Get input value as a number](#Get-input-value-as-a-number)| |36 | [reduceRight](#reduceRight)| +|37 | [Abort Fetch](#AbortFetch)| + + + @@ -775,3 +779,34 @@ const reduceRightArray = arr.reduceRight((acc, current) => { ``` + + +``` +**[⬆ Back to Top](#table-of-contents)** +### Abort Fetch + +```javascript + + +//HTML + + + +//JS +let controller; + +document.querySelector('#download').addEventListener('click', () => { + controller = new AbortController(); + const signal = controller.signal; + fetch('https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', {signal}) + .then(() => console.log('done')); +}); + +document.querySelector('#abort').addEventListener('click', function() { + controller.abort(); +}); + +``` + + + From aecd69b70fc4238b347560a46158246161d60fc0 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 27 Oct 2020 10:49:08 +0200 Subject: [PATCH 28/43] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 88f2009..c972f2b 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ |34 | [Required Function Params](#Required-Function-Params)| |35 | [Get input value as a number](#Get-input-value-as-a-number)| |36 | [reduceRight](#reduceRight)| -|37 | [Abort Fetch](#AbortFetch)| +|37 | [Abort Fetch](#Abort-Fetch)| From 1448ea5fab602b00a68356c25c67d43bfdab40e9 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 27 Oct 2020 10:49:47 +0200 Subject: [PATCH 29/43] Update README.md --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index c972f2b..fde7f3e 100644 --- a/README.md +++ b/README.md @@ -780,8 +780,6 @@ const reduceRightArray = arr.reduceRight((acc, current) => { ``` - -``` **[⬆ Back to Top](#table-of-contents)** ### Abort Fetch From 7ec664906abbeb164d9c3b3db7d0ade523eaa3c9 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 10 Nov 2020 09:47:24 +0200 Subject: [PATCH 30/43] change object value which is inside an array --- README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/README.md b/README.md index fde7f3e..97ef1e7 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,10 @@ |35 | [Get input value as a number](#Get-input-value-as-a-number)| |36 | [reduceRight](#reduceRight)| |37 | [Abort Fetch](#Abort-Fetch)| +|38 | [How to change the value of an object which is inside an array](#How-to-change-the-value-of-an-object-which-is-inside-an-array)| + + + @@ -807,4 +811,38 @@ document.querySelector('#abort').addEventListener('click', function() { ``` +**[⬆ Back to Top](#table-of-contents)** +### How to change the value of an object which is inside an array + +```javascript + +const state = [ + { + userId: 1, + name: "JSSnippets", + isOwner: false, + }, + { + userId: 2, + name: "React", + isOwner: false, + }, + { + userId: 3, + name: "Vue", + isOwner: false, + }, + { + userId: 4, + name: "Angular", + isOwner: false, + }, +]; + +const newState = state.map((obj) => + obj.name === "JSSnippets" ? { ...obj, isOwner: true } : obj +); + +``` + From 45748db3131538e7713b5a3727c5053c86763010 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 19 Jan 2021 22:59:05 +0200 Subject: [PATCH 31/43] Numeric separators --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 97ef1e7..b499b95 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,8 @@ |36 | [reduceRight](#reduceRight)| |37 | [Abort Fetch](#Abort-Fetch)| |38 | [How to change the value of an object which is inside an array](#How-to-change-the-value-of-an-object-which-is-inside-an-array)| +|39 | [Numeric separators allow us to improve our code readability](#Numeric-separators-allow-us-to-improve-our-code-readability)| + @@ -845,4 +847,18 @@ const newState = state.map((obj) => ``` +**[⬆ Back to Top](#table-of-contents)** +### Numeric separators allow us to improve our code readability + +```javascript + +100_000_000 === 100000000 // true + +300_000 === 300000 //true + +``` + + + + From 4f0ef948188271fa35e8e31dc306ba5ac51ab373 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 27 Jan 2021 08:45:24 +0200 Subject: [PATCH 32/43] pay attention when using every --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index b499b95..d0b6b03 100644 --- a/README.md +++ b/README.md @@ -862,3 +862,24 @@ const newState = state.map((obj) => +**[⬆ Back to Top](#table-of-contents)** +### pay attention when using every + +Calling this method on an empty array will return true for any condition! + + +```javascript + +const arr = [] +const result = arr.every(x=> x==5) +console.log(result) //true + +``` + + + + + + + + From 76efd6bce3f93c969c9cc18234b0f3b2a53cab80 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 27 Jan 2021 08:46:46 +0200 Subject: [PATCH 33/43] add title --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d0b6b03..9ace570 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ |37 | [Abort Fetch](#Abort-Fetch)| |38 | [How to change the value of an object which is inside an array](#How-to-change-the-value-of-an-object-which-is-inside-an-array)| |39 | [Numeric separators allow us to improve our code readability](#Numeric-separators-allow-us-to-improve-our-code-readability)| - +|40 | [pay attention when using every](#pay-attention-when-using-every)| From aab98f5484371a1e2d37613aacddbcb88e7bc009 Mon Sep 17 00:00:00 2001 From: roeib Date: Mon, 22 Mar 2021 13:40:35 +0200 Subject: [PATCH 34/43] convert an array of key-value into an object --- README.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9ace570..fb62f64 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # JavaScript-snippets -> Click :star: if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) +> Click :star: if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) ### Table of Contents | No. | Questions | @@ -44,7 +44,7 @@ |38 | [How to change the value of an object which is inside an array](#How-to-change-the-value-of-an-object-which-is-inside-an-array)| |39 | [Numeric separators allow us to improve our code readability](#Numeric-separators-allow-us-to-improve-our-code-readability)| |40 | [pay attention when using every](#pay-attention-when-using-every)| - +|41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| @@ -880,6 +880,27 @@ console.log(result) //true +**[⬆ Back to Top](#table-of-contents)** +### How to convert an array of key-value tuples into an object + + +```javascript +const JSarr = [ + ['name', 'JSsnippets'], + ['address', 'worldwide'], + ['year', '2018'], + ['followers', '15000'] + +]; + +const obj = Object.fromEntries(JSarr); +//{ +// "name": "JSsnippets", +// "address": "worldwide", +// "year": "2018", +// "followers": "15000" +//} +``` From d9fb76816b1d4291bf109707bb2d9f77dbb84bd0 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 14 Apr 2021 07:51:32 +0300 Subject: [PATCH 35/43] Native text to speech JS --- README.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fb62f64..f08592d 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ |39 | [Numeric separators allow us to improve our code readability](#Numeric-separators-allow-us-to-improve-our-code-readability)| |40 | [pay attention when using every](#pay-attention-when-using-every)| |41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| - +|42 | [Native text to speech JS](#Native-text-to-speech-JS)| @@ -903,4 +903,25 @@ const obj = Object.fromEntries(JSarr); //} ``` +**[⬆ Back to Top](#table-of-contents)** +### Native text to speech JS + + +```javascript + +const startSpeaking=()=>{ + let msg = document.getElementById("text-to-speech").value; + let speech = new SpeechSynthesisUtterance(); + + speech.lang = "en-US"; + speech.text = msg; + speech.volume = 1; + speech.rate = 1; + speech.pitch = 1; + + window.speechSynthesis.speak(speech); +} + + +``` From 795fb29021bee1c79cf2b5572380c2d457dabef2 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 5 Oct 2021 12:09:37 +0300 Subject: [PATCH 36/43] toFixed --- README.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f08592d..9d8ef32 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,7 @@ |40 | [pay attention when using every](#pay-attention-when-using-every)| |41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| |42 | [Native text to speech JS](#Native-text-to-speech-JS)| - - +|42 | [Native text to speech JS](#Native-text-to-speech-JS)| @@ -924,4 +923,19 @@ const startSpeaking=()=>{ } +``` + +**[⬆ Back to Top](#table-of-contents)** +### toFixed() + +Warning: Floating point numbers cannot represent all decimals precisely in binary. This can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false . + +```javascript + +123.678.toFixed() // Returns '124' +123.678.toFixed(1) // Returns '123.7': Note rounding + +2.35.toFixed(1) // Returns '2.4'. Note it rounds up +2.65.toFixed(1) // Returns '2.6'. Note it rounds down -why??? see the warning above + ``` From d0d13903cfbc7ccf504a0458a1b0438c510db287 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 5 Oct 2021 12:10:21 +0300 Subject: [PATCH 37/43] toFixed-table-of-content --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9d8ef32..f419b8a 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ |40 | [pay attention when using every](#pay-attention-when-using-every)| |41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| |42 | [Native text to speech JS](#Native-text-to-speech-JS)| -|42 | [Native text to speech JS](#Native-text-to-speech-JS)| +|42 | [toFixed](#toFixed)| @@ -926,7 +926,7 @@ const startSpeaking=()=>{ ``` **[⬆ Back to Top](#table-of-contents)** -### toFixed() +### toFixed Warning: Floating point numbers cannot represent all decimals precisely in binary. This can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false . From 0f3bfaada86bf5de913ca31a71392a095251dcf3 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 5 Oct 2021 12:10:45 +0300 Subject: [PATCH 38/43] line number --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f419b8a..bdfb40b 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ |40 | [pay attention when using every](#pay-attention-when-using-every)| |41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| |42 | [Native text to speech JS](#Native-text-to-speech-JS)| -|42 | [toFixed](#toFixed)| +|43 | [toFixed](#toFixed)| From 582356cbe3d5a14e7c33d71f4743ff7bd45fdcd9 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 15 Mar 2022 09:46:20 +0200 Subject: [PATCH 39/43] randomUUID --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index bdfb40b..de6bad4 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,10 @@ |41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| |42 | [Native text to speech JS](#Native-text-to-speech-JS)| |43 | [toFixed](#toFixed)| +|44 | [generate randomUUID](#generate-random-uuid)| + + + @@ -939,3 +943,18 @@ Warning: Floating point numbers cannot represent all decimals precisely in binar 2.65.toFixed(1) // Returns '2.6'. Note it rounds down -why??? see the warning above ``` + + +**[⬆ Back to Top](#table-of-contents)** +### generate random uuid + +The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator. + +```javascript + +crypto.randomUUID() // print in console '460ff1e6-2106-4848-833d-5c5b3bfdc943' + +crypto.randomUUID() // print in console '9a91c014-d1b1-453a-8091-ef8b9b48b14a' + + +``` From b34f9d143865d82b9fba9a94bcc3f3b81b568cc2 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 3 Aug 2022 11:25:15 +0300 Subject: [PATCH 40/43] structuredClone --- README.md | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index de6bad4..cf3f505 100644 --- a/README.md +++ b/README.md @@ -48,9 +48,7 @@ |42 | [Native text to speech JS](#Native-text-to-speech-JS)| |43 | [toFixed](#toFixed)| |44 | [generate randomUUID](#generate-random-uuid)| - - - +|45 | [structuredClone](#structuredClone)| @@ -957,4 +955,30 @@ crypto.randomUUID() // print in console '460ff1e6-2106-4848-833d-5c5b3bfdc943' crypto.randomUUID() // print in console '9a91c014-d1b1-453a-8091-ef8b9b48b14a' +``` + + +**[⬆ Back to Top](#table-of-contents)** +### structuredClone + +If you want to deep clone a value in Node.js, you no longer need to use a library or the JSON.parse(JSON.stringify(value)) hack. You can use the new global function structuredClone() + +```javascript + +const user = { + name: "JS Snippets", + address: { street: "Original Road", city: "Placeshire" }, +}; + +const clonedUser = structuredClone(user); + +clonedUser.address.street = "New Road"; + +console.log("user.address.street:", user.address.street); +// > Original Road + +console.log("clonedUser.address.street:", clonedUser.address.street); +// > New Road + + ``` From b2d0d5e7cef104535d7d087dd4a0ba2c1105a5b5 Mon Sep 17 00:00:00 2001 From: roeib Date: Mon, 30 Jan 2023 16:23:25 +0200 Subject: [PATCH 41/43] get device orientation get device orientation --- README.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cf3f505..3046c8b 100644 --- a/README.md +++ b/README.md @@ -49,9 +49,7 @@ |43 | [toFixed](#toFixed)| |44 | [generate randomUUID](#generate-random-uuid)| |45 | [structuredClone](#structuredClone)| - - - +|46 | [get device orientation](#get-device-orientation)| **[⬆ Back to Top](#table-of-contents)** @@ -981,4 +979,18 @@ console.log("clonedUser.address.street:", clonedUser.address.street); // > New Road +``` + +**[⬆ Back to Top](#table-of-contents)** +### get device orientation + +Browsers expose a global variable named screen, which we’ll use to access the information we need. + +```javascript + +function getOrientation() { + const isPortrait = screen.orientation.type.startswith('portrait') + return isPortrait ? 'portrait' : 'landscape' +} + ``` From 8f85e7133d4c0c7563a6afe2b5541a79c2bc92c2 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 8 Feb 2023 11:40:56 +0200 Subject: [PATCH 42/43] CONST vs LET vs VAR --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3046c8b..da616aa 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ |44 | [generate randomUUID](#generate-random-uuid)| |45 | [structuredClone](#structuredClone)| |46 | [get device orientation](#get-device-orientation)| - +|47 | [CONST vs LET vs VAR](#const-let-var)| **[⬆ Back to Top](#table-of-contents)** ### How to generate a random number in a given range @@ -994,3 +994,14 @@ function getOrientation() { } ``` + +**[⬆ Back to Top](#table-of-contents)** +### CONST vs LET vs VAR + +| | const | Let | Var | +|------------------------|-------|-----|-----| +| Can be Reaasigned? | X | :white_check_mark: | V | +| Cab be Redeclared? | X | X | V | +| Block Scope | V | V | X | +| Function Scope | V | V | V | +| Stored in Global Scope | X | X | V | From 23fe606caaa26c9ffde116274b56afdd9455bc72 Mon Sep 17 00:00:00 2001 From: roeib Date: Wed, 8 Feb 2023 11:43:49 +0200 Subject: [PATCH 43/43] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index da616aa..dcd01f3 100644 --- a/README.md +++ b/README.md @@ -1000,8 +1000,8 @@ function getOrientation() { | | const | Let | Var | |------------------------|-------|-----|-----| -| Can be Reaasigned? | X | :white_check_mark: | V | -| Cab be Redeclared? | X | X | V | -| Block Scope | V | V | X | -| Function Scope | V | V | V | -| Stored in Global Scope | X | X | V | +| Can be Reaasigned? | :x: | :white_check_mark: |:white_check_mark: | +| Cab be Redeclared? | :x: | :x: | :white_check_mark: | +| Block Scope | :white_check_mark: |:white_check_mark: | :x: | +| Function Scope | :white_check_mark: | :white_check_mark: | :white_check_mark: | +| Stored in Global Scope | :x: | :x: | :white_check_mark: | pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy