From 4f4c108d9b62d5b9beebccbe10ca9da4d836717a Mon Sep 17 00:00:00 2001 From: JS snippets <56507838+JSsnippets@users.noreply.github.com> Date: Mon, 21 Oct 2019 18:56:26 +0300 Subject: [PATCH 01/62] add Logo.png --- Logo.png | Bin 0 -> 22845 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Logo.png diff --git a/Logo.png b/Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..73c4452fa94f2d15ff1424aa7f653995dd52fa98 GIT binary patch literal 22845 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%0DL$|1&>#c%|HR%<=NZ4DD;ZxRcgLXxlho^La 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%0Du@GUIG5m!jQ6!m{A`Tb&VW~|HNd3h z@s#mYxp8!L``{g4ER~{_{iWY4*a;jSD~!!sQ@D{$ad$H8PRA{&ivg_G&V20MQHcE( zxzVfcT6Vx~=-C&+MO*bbfTaQ8K(-d$r2u3jq&VD){gsNPGtw-n{CsJT0$fqdMWOq2 zpX}zN3&YDbk^FjT9@8ux(-IP|fv2eg*s5@201ubqKA8>Z-s*wc2E0{!09(ti#aB<; zk`jtzc0Ylw>#*4kHc^yFXC43sx0K%RoM4j}fYw=w&0Tk6%8T3aa9bX3iN{^bAln=x ztI%gcp9C0N2fzp|bU&cw;XzV{%~UIZq{cjKj{=~TMGi@GK7f*6Bt`kym@o=MpjVT8 zfP*-}wp)35m`BTl$HO*W$uQCZumn(m9j>su36?1VD3b0E-5@uIVj}i8=eaY6-C{d2 z>*fGQ&~fi`daW9CiFjU`B&Z@^oo(HAKZCQPpU<2Vk z9*+Chb^cQOFPDX>$=I8=1lvEYg|I42gT-VQHd)P2wn{lXP5jWMtMmI?e&Uwu#h7|rH?Jy$7T7~WCW;?KNZbu%v!Xk{r+OP#) z8-UeM`p3&f5<{dVk(8ML*T~ehG6mr5`=QTvk-1H0UFIZN6yn%SyUl&!xKxG{QWCC` z0>lr6^Q049V-y}MAAcQTbdlKY96L#4BbJx|PYC%^2=A3lMe&CnfRk})a%b=*z>n)9 zfVC|dmHwE)Z-v)tOL43PfTOouDBKf0w|sr|`aJ_MHlTuRA?mz9f5^9yaPyzmO0Z=3fjNB6`OoO1yO{CiKXP|19b*Y0gA~g$LBF9+< ztOc?FFLC$H!F;ZL?7EBLETb=<2{hIZZ_B2^Ch%&@omblpuvN*{P#Ml5Bhj($4%G|q z0lEh4@C(m0DAg?SR4wB4RO6*NwF0D*unqNEnddwffkp238o0F1JibRmHqdAU^=u;Z zFkV|8nuU}NxC8CUJRVT90is3V`(IE6?bW04f`spdxB-rJRqtlCUSN@&^FnuR9?CM` gi=N8ro_qfP0j$Qd(=ZSSi2wiq07*qoM6N<$f-GD3_y7O^ literal 0 HcmV?d00001 From ac9513702c8e4e2e866ef20d6024668f84a88abb Mon Sep 17 00:00:00 2001 From: JS snippets <56507838+JSsnippets@users.noreply.github.com> Date: Mon, 21 Oct 2019 18:58:56 +0300 Subject: [PATCH 02/62] add Logo --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index dc381a3..6072d7d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ # JavaScript-snippets +JS snippets logo + +# JSsnippets on Facebook + find us on [Facebook](https://www.facebook.com/snippetsJS) From bf89592122b81864fcbdd390ac2f3a576faafe5e Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 27 Oct 2019 10:39:52 +0200 Subject: [PATCH 03/62] Nested Destructuring --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 6072d7d..fa8f753 100644 --- a/README.md +++ b/README.md @@ -180,3 +180,19 @@ function copyToClipboard(){ ``` +# Nested Destructuring + + +```javascript +const user = { + id: 459, + name: 'JS snippets', + age:29, + education:{ + degree: 'Masters' + } +} + +const { education : { degree } } +console.log(degree) //Masters +``` From 8346b544043be60a83db8b3f8ef5183819c7f8ef Mon Sep 17 00:00:00 2001 From: roeib Date: Mon, 4 Nov 2019 12:20:00 +0200 Subject: [PATCH 04/62] URLSearchParams snippet --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index fa8f753..ce1733e 100644 --- a/README.md +++ b/README.md @@ -196,3 +196,22 @@ const user = { const { education : { degree } } console.log(degree) //Masters ``` + +# URLSearchParams + + +```javascript +//The URLSearchParams interface defines utility methods to work with the query string of a URL. + +const urlParams = new URLSearchParams("?post=1234&action=edit"); + +console.log(urlParams.has('post')); // true +console.log(urlParams.get('action')); // "edit" +console.log(urlParams.getAll('action')); // ["edit"] +console.log(urlParams.toString()); // "?post=1234&action=edit" +console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" +``` + + + + From 497341578741e84451e6dbe95df43ad28443143a Mon Sep 17 00:00:00 2001 From: roeib Date: Mon, 4 Nov 2019 17:38:31 +0200 Subject: [PATCH 05/62] update Nested Destructuring --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ce1733e..ec1f535 100644 --- a/README.md +++ b/README.md @@ -193,7 +193,7 @@ const user = { } } -const { education : { degree } } +const { education : { degree } } = user; console.log(degree) //Masters ``` From 548d9ae0e8492395083f03b5f2fc40b655c75ec2 Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 10 Nov 2019 17:06:30 +0200 Subject: [PATCH 06/62] Shuffle an array --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index ec1f535..01b5f08 100644 --- a/README.md +++ b/README.md @@ -213,5 +213,17 @@ console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active= ``` +# 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); +``` + From dcb6e6b59bf2afa84d396efbe63f903d9a46dfcf Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 17 Nov 2019 13:44:42 +0200 Subject: [PATCH 07/62] Count elements in an array --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 01b5f08..35e12e8 100644 --- a/README.md +++ b/README.md @@ -227,3 +227,27 @@ function func(a,b){ console.log(shuffle); ``` +# Count elements in an array + + +```javascript +const myFruits = ['Apple','Orange','Mango','Banana','Apple','Apple','Mango'] + +//first option +const countMyFruits = myFruits.reduce((countFruits,fruit) => { + countFruits[fruit] = ( countFruits[fruit] || 0 ) +1; + return countFruits + },{} ) + console.log(countFruits) + // { Apple:3, Banana:1, Mango:2, Orange:1 } + + //seconf option + const fruitsCounter = {}; + + for( const fruit of myFruits ){ + fruitsCounter[fruit] = fruitsCounter[fruit] ? fruitsCounter[fruit]+1 :1; + } + + console.log(fruitsCounter) + // { Apple:3, Banana:1, Mango:2, Orange:1 } +``` From 444412a6c7994f568ad50b9030c66e777861a928 Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 17 Nov 2019 13:57:14 +0200 Subject: [PATCH 08/62] Update Count elements in an array --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 35e12e8..f879d76 100644 --- a/README.md +++ b/README.md @@ -238,7 +238,7 @@ const countMyFruits = myFruits.reduce((countFruits,fruit) => { countFruits[fruit] = ( countFruits[fruit] || 0 ) +1; return countFruits },{} ) - console.log(countFruits) + console.log(countMyFruits) // { Apple:3, Banana:1, Mango:2, Orange:1 } //seconf option From 63d7d7d07c2a41294a66409b9260d68e7f25c255 Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 24 Nov 2019 10:54:11 +0200 Subject: [PATCH 09/62] Aliases with JavaScript Destructuring --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index f879d76..d0b5711 100644 --- a/README.md +++ b/README.md @@ -251,3 +251,24 @@ const countMyFruits = myFruits.reduce((countFruits,fruit) => { console.log(fruitsCounter) // { Apple:3, Banana:1, Mango:2, Orange:1 } ``` + + +# Aliases with JavaScript Destructuring + + +```javascript + +//There are cases where you want the destructured variable to have a different name than the property name + +const obj = { + name: "JSsnippets" +}; + + +// Grabs obj.name as { pageName } +const { name: pageName } = obj; + +//log our alias +console.log(pageName) // JSsnippets +``` + From b2f9c888a366304531b8e948ee5b044a55e750c6 Mon Sep 17 00:00:00 2001 From: roeib Date: Mon, 2 Dec 2019 13:55:26 +0200 Subject: [PATCH 10/62] Object.is --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index d0b5711..664295d 100644 --- a/README.md +++ b/README.md @@ -272,3 +272,21 @@ const { name: pageName } = obj; console.log(pageName) // JSsnippets ``` + + +# The Object.is() method determines whether two values are the same value + + +```javascript +Object.is('foo', 'foo'); // true + +Object.is(null, null); // true + +Object.is(Nan, Nan); // true 😱 + +const foo = { a: 1 }; +const bar = { a: 1 }; +Object.is(foo, foo); // true +Object.is(foo, bar); // false + +``` From c5873fe1ee03c15cc8da493491967e8ccad23b03 Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 8 Dec 2019 10:11:23 +0200 Subject: [PATCH 11/62] How can we freeze an object --- README.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/README.md b/README.md index 664295d..ecd9cda 100644 --- a/README.md +++ b/README.md @@ -290,3 +290,36 @@ Object.is(foo, foo); // true Object.is(foo, bar); // false ``` + + + +# How can we freeze an object + + +```javascript +const obj = { + name: "JSsnippets", + age:29, + address:{ + street : 'JS' + } +}; + +const frozenObject = Object.freeze(obj); + +frozenObject.name = 'weLoveJS'; // Uncaught TypeError + +//Although, we still can change a property’s value if it’s an object: + +frozenObject.address.street = 'React'; // no error, new value is set + + +delete frozenObject.name // Cannot delete property 'name' of # + + +//We can check if an object is frozen by using +Object.isFrozen(obj) //true + +``` + + From 1a07fa7807e2cb585352884bfaa9a2805d4f2084 Mon Sep 17 00:00:00 2001 From: roeib Date: Thu, 19 Dec 2019 10:46:04 +0200 Subject: [PATCH 12/62] Printing Object keys and values --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index ecd9cda..0c24c51 100644 --- a/README.md +++ b/README.md @@ -323,3 +323,25 @@ Object.isFrozen(obj) //true ``` +# Printing Object keys and values + + +```javascript +const obj = { + name: "JSsnippets", + age:29, +}; + +//Object.entries() method is used to return an array consisting of enumerable property +//[key, value] pairs of the object which are passed as the parameter. + +for(let [key,value] of Object.entries(obj)){ + console.log(`${key}: ${value}`) +} + +//expected output: +// "name: Jssnippets" +// "age: 29" +// order is not guaranteed + +``` From 242c2f96c6bc86e948d0a191cdbcab6ca437a291 Mon Sep 17 00:00:00 2001 From: roeib Date: Mon, 23 Dec 2019 20:05:19 +0200 Subject: [PATCH 13/62] Capture the right click event --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 0c24c51..b912f24 100644 --- a/README.md +++ b/README.md @@ -345,3 +345,17 @@ for(let [key,value] of Object.entries(obj)){ // order is not guaranteed ``` +# Capture the right click event + +```javascript +window.oncontextmenu = () => { + console.log('right click'); + return false // cancel default menu +} +//or + +window.addEventListener('contextmenu', ()=>{ + console.log('right click'); + return false // cancel default menu +},false) +``` From ad8e0c80b6a0bb3adc60e3a0b6fc63f877b03b7b Mon Sep 17 00:00:00 2001 From: roeib Date: Sun, 5 Jan 2020 10:03:31 +0200 Subject: [PATCH 14/62] async vs defer js --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index b912f24..c5ee8af 100644 --- a/README.md +++ b/README.md @@ -359,3 +359,18 @@ window.addEventListener('contextmenu', ()=>{ return false // cancel default menu },false) ``` + + +# 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. + + +//With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time. +//Async is more useful when you really don't care when the script loads and nothing else that is user dependent depends upon that script loading.(for scripts likes Google analytics) + + +//With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. + +``` From 622978b01af6187f5113457be41d6ec736e5517f Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 14 Jan 2020 11:43:22 +0200 Subject: [PATCH 15/62] nullish coalescing operator --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index c5ee8af..8e0f49c 100644 --- a/README.md +++ b/README.md @@ -374,3 +374,19 @@ window.addEventListener('contextmenu', ()=>{ //With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. ``` + +# 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. + +const foo = undefined ?? 'default string'; +console.log(foo); +// expected output: "default string" + + +const age = 0 ?? 30; +console.log(age); +// expected output: "0" +``` + From 7cbb2652aef614da81f4bdd67f70dfc213ff383d Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 28 Jan 2020 12:20:19 +0200 Subject: [PATCH 16/62] optional chaining --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 8e0f49c..b12a25b 100644 --- a/README.md +++ b/README.md @@ -390,3 +390,25 @@ console.log(age); // expected output: "0" ``` +# Optional chaining +```javascript + +const car = {} +const carColor = car.name.color +console.log(carColor); +// error- "Uncaught TypeError: Cannot read property 'carColor' of undefined + +//In JavaScript, you can first check if an object exists, and then try to get one of its properties, like this: +const carColor = car && car.name && car.name.color; +console.log(carColor); +//undefined- no error + + +//Now this new optional chaining operator will let us be even more fancy: + +const newCarColor = car?.name?.color; +console.log(newCarColor) +//undefined- no error + +//You can use this syntax today using @babel/plugin-proposal-optional-chaining +``` From 345f6cdac3e73a365a7c49035fb3bc716cfda9ce Mon Sep 17 00:00:00 2001 From: JS snippets <56507838+JSsnippets@users.noreply.github.com> Date: Thu, 13 Feb 2020 13:05:46 +0200 Subject: [PATCH 17/62] globalThis --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index b12a25b..2306b44 100644 --- a/README.md +++ b/README.md @@ -412,3 +412,22 @@ console.log(newCarColor) //You can use this syntax today using @babel/plugin-proposal-optional-chaining ``` + +# globalThis +```javascript +Accessing the global property in JavaScript has always posed some difficulty. This is because +different platforms have different ways to access it. + +Client-side JavaScript uses window or self + +Node.js uses global + +Web workers use self + +The globalThis property provides a standard way of accessing the global 'this' value across environments. you can access the global object in a consistent manner without having to know which environment the code is being run in. + +console.log(globalThis) //get the global this depends on your environment + +``` + + From b29c5bc57c113ead1fdbe436b1dbef81d9e08273 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 25 Feb 2020 10:39:30 +0200 Subject: [PATCH 18/62] JSON.stringify keys to serialize. --- README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/README.md b/README.md index 2306b44..2bb1aac 100644 --- a/README.md +++ b/README.md @@ -431,3 +431,29 @@ console.log(globalThis) //get the global this depends on your environment ``` + +# The second argument of JSON.stringify lets you cherry-pick πŸ’ keys to serialize. +```javascript +const user = { + id: 459, + name: 'JS snippets', + age:29, + education:{ + degree: 'Masters' + } +} + +JSON.stringify(user,[name,age], 2) + +/* +returns + +{ + "name": "JS snippets", + "age": 29 +} + + +*/ + +``` From 403151bad4a7ffd9dbe81caa0ea6e821609c5371 Mon Sep 17 00:00:00 2001 From: roeib Date: Tue, 10 Mar 2020 12:01:21 +0200 Subject: [PATCH 19/62] Fire an event listener only once. --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 2bb1aac..0b4a10c 100644 --- a/README.md +++ b/README.md @@ -457,3 +457,22 @@ returns */ ``` + + +# Fire an event listener only once. +```javascript +const el = document.getElementById("btn"); + +function myClickHandler(){ + console.log('this click will only fire once') +} + + +el.addEventListener('click', myClickHandler, { + once: true, +}); + +``` + + + 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 20/62] 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 21/62] 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 22/62] 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 23/62] 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 24/62] 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 25/62] 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 26/62] 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 27/62] 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 28/62] 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 29/62] 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 30/62] 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 31/62] 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 32/62] 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 33/62] 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 34/62] 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 35/62] 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 36/62] 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 37/62] 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 38/62] 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 39/62] 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 40/62] 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 41/62] 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 42/62] 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 43/62] 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 44/62] 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 45/62] 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 46/62] 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 47/62] 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 48/62] 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 49/62] 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 50/62] 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 51/62] 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 52/62] 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 53/62] 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 54/62] 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 55/62] 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 56/62] 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 57/62] 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 58/62] 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 59/62] 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 60/62] 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 61/62] 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 62/62] 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: |