JS Drum Kit

From 301c0588439de82ade0f1571e8588d658f22dea4 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Wed, 30 Dec 2020 23:31:27 +0530 Subject: [PATCH 01/14] Completed Day 1 --- 01 - JavaScript Drum Kit/index-jayhawk.html | 75 +++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-jayhawk.html diff --git a/01 - JavaScript Drum Kit/index-jayhawk.html b/01 - JavaScript Drum Kit/index-jayhawk.html new file mode 100644 index 0000000000..0e503d30c9 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-jayhawk.html @@ -0,0 +1,75 @@ + + + + + JS Drum Kit + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

+ +

+ + + + From 6c6cf3372470ccabf9ddefc99eb0a29376724e1c Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Thu, 31 Dec 2020 00:45:42 +0530 Subject: [PATCH 02/14] day 1 way2 --- 01 - JavaScript Drum Kit/index-jayhawk2.html | 75 ++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-jayhawk2.html diff --git a/01 - JavaScript Drum Kit/index-jayhawk2.html b/01 - JavaScript Drum Kit/index-jayhawk2.html new file mode 100644 index 0000000000..c068077e28 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-jayhawk2.html @@ -0,0 +1,75 @@ + + + + + JS Drum Kit + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

+ +

+ + + + From 47af0f7e7729f08a5b9b6df7793b176719f59dc5 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Thu, 31 Dec 2020 18:05:31 +0530 Subject: [PATCH 03/14] Day 2 --- 02 - JS and CSS Clock/index-START.html | 108 +++++++++++------------ 02 - JS and CSS Clock/index-jayhawk.html | 89 +++++++++++++++++++ 2 files changed, 139 insertions(+), 58 deletions(-) create mode 100644 02 - JS and CSS Clock/index-jayhawk.html diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..2ac8c79425 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,12 +1,10 @@ - - - JS + CSS Clock - - - - + + + JS + CSS Clock + +

@@ -15,60 +13,54 @@

+ + .clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + position: relative; + padding: 2rem; + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef, + inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2); + } - - + + diff --git a/02 - JS and CSS Clock/index-jayhawk.html b/02 - JS and CSS Clock/index-jayhawk.html new file mode 100644 index 0000000000..fc9e41f5cb --- /dev/null +++ b/02 - JS and CSS Clock/index-jayhawk.html @@ -0,0 +1,89 @@ + + + + + JS + CSS Clock + + +

+ + + + + + From 756c3d5d113ccf3fb9be3a86c816acbc688659ad Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Fri, 1 Jan 2021 02:08:03 +0530 Subject: [PATCH 04/14] Day 4 --- 04 - Array Cardio Day 1/index-jayhawk.html | 125 +++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-jayhawk.html diff --git a/04 - Array Cardio Day 1/index-jayhawk.html b/04 - Array Cardio Day 1/index-jayhawk.html new file mode 100644 index 0000000000..6c4015dc03 --- /dev/null +++ b/04 - Array Cardio Day 1/index-jayhawk.html @@ -0,0 +1,125 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From fa202206ce4c0094c046af7e726a9419f5c1924a Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Fri, 1 Jan 2021 03:14:39 +0530 Subject: [PATCH 05/14] Array cardio day1 --- 04 - Array Cardio Day 1/index-jayhawk.html | 27 +++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-jayhawk.html b/04 - Array Cardio Day 1/index-jayhawk.html index 6c4015dc03..b540dc6011 100644 --- a/04 - Array Cardio Day 1/index-jayhawk.html +++ b/04 - Array Cardio Day 1/index-jayhawk.html @@ -86,22 +86,39 @@ console.log(two); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1)); console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live all together? + const totalYears = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year); }, 0); console.log(totalYears); - // 5. Sort the inventors by years lived + // 5. Sort the inventors by years lived + const five = inventors.sort(function (a, b) { + suba = a.passed - a.year; + subb = b.passed - b.year; + if (suba - subb > 1) return 1; + else return -1; + }); + console.table(five); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris // 7. sort Exercise // Sort the people alphabetically by last name + const seven = people.sort(function (a, b) { + fl = a.split(", ")[0]; + ll = b.split(", ")[0]; + if (fl > ll) return 1; + else return -1; + }); + console.log(seven); + // 8. Reduce Exercise // Sum up the instances of each of these const data = [ @@ -120,6 +137,14 @@ "car", "truck", ]; + const eight = data.reduce(function (obj, item) { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log(eight); From ad459fde259b7f699c61791cab494306e5f6f70f Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Fri, 1 Jan 2021 21:01:44 +0530 Subject: [PATCH 06/14] day4 notes --- 05 - Flex Panel Gallery/index-jayhawk.html | 121 +++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-jayhawk.html diff --git a/05 - Flex Panel Gallery/index-jayhawk.html b/05 - Flex Panel Gallery/index-jayhawk.html new file mode 100644 index 0000000000..cd8e641ae5 --- /dev/null +++ b/05 - Flex Panel Gallery/index-jayhawk.html @@ -0,0 +1,121 @@ + + + + + Flex Panels 💪 + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + From 04499dcf723baddcbec952a5aaf7e63cddf16c07 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Fri, 1 Jan 2021 21:33:46 +0530 Subject: [PATCH 07/14] Day 5 --- 05 - Flex Panel Gallery/index-jayhawk.html | 40 ++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/05 - Flex Panel Gallery/index-jayhawk.html b/05 - Flex Panel Gallery/index-jayhawk.html index cd8e641ae5..874d7ec2b7 100644 --- a/05 - Flex Panel Gallery/index-jayhawk.html +++ b/05 - Flex Panel Gallery/index-jayhawk.html @@ -32,6 +32,7 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { @@ -47,6 +48,11 @@ font-size: 20px; background-size: cover; background-position: center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } .panel1 { @@ -70,8 +76,23 @@ margin: 0; width: 100%; transition: transform 0.5s; + flex: 1 0 auto; + display: flex; + align-items: center; + justify-content: center; + } + .panel > *:first-child { + transform: translateY(-100%); + } + .panel > *:last-child { + transform: translateY(100%); + } + .panel.open-active > *:first-child { + transform: translateY(0); + } + .panel.open-active > *:last-child { + transform: translateY(0); } - .panel p { text-transform: uppercase; font-family: "Amatic SC", cursive; @@ -85,6 +106,7 @@ .panel.open { font-size: 40px; + flex: 5; } @@ -116,6 +138,20 @@ - + From e97b1f8b1db653382b71ef152332deee8d435065 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Sat, 2 Jan 2021 03:21:10 +0530 Subject: [PATCH 08/14] Day 5 --- 06 - Type Ahead/index-jayhawk.html | 52 ++++++++++++++++++++++++++++++ 06 - Type Ahead/style.css | 18 +++++++---- 2 files changed, 63 insertions(+), 7 deletions(-) create mode 100644 06 - Type Ahead/index-jayhawk.html diff --git a/06 - Type Ahead/index-jayhawk.html b/06 - Type Ahead/index-jayhawk.html new file mode 100644 index 0000000000..f71835ed64 --- /dev/null +++ b/06 - Type Ahead/index-jayhawk.html @@ -0,0 +1,52 @@ + + + + + Type Ahead 👀 + + + + + + + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 0c8c74e01b..e7a4921c75 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,15 +1,16 @@ html { box-sizing: border-box; background: #ffc600; - font-family: 'helvetica neue'; + font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; } - input { width: 100%; padding: 20px; @@ -24,7 +25,7 @@ input.search { margin: 0; text-align: center; outline: 0; - border: 10px solid #F7F7F7; + border: 10px solid #f7f7f7; width: 120%; left: -10%; position: relative; @@ -45,7 +46,7 @@ input.search { .suggestions li { background: white; list-style: none; - border-bottom: 1px solid #D8D8D8; + border-bottom: 1px solid #d8d8d8; box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); margin: 0; padding: 20px; @@ -57,12 +58,12 @@ input.search { .suggestions li:nth-child(even) { transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); + background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%); } .suggestions li:nth-child(odd) { transform: perspective(100px) rotateX(-3deg) translateY(3px); - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); + background: linear-gradient(to top, #ffffff 0%, #efefef 100%); } span.population { @@ -72,3 +73,6 @@ span.population { .hl { background: #ffc600; } +.name { + background: transparent; +} From 94571d536fb59449f062b23d836b4da0acfbd222 Mon Sep 17 00:00:00 2001 From: Anubhav Gupta <38766415+jayhawk24@users.noreply.github.com> Date: Sat, 2 Jan 2021 14:08:29 +0530 Subject: [PATCH 09/14] dat 8 --- 01 - JavaScript Drum Kit/sounds/boom.wav | Bin 01 - JavaScript Drum Kit/sounds/clap.wav | Bin 01 - JavaScript Drum Kit/sounds/hihat.wav | Bin 01 - JavaScript Drum Kit/sounds/kick.wav | Bin 01 - JavaScript Drum Kit/sounds/openhat.wav | Bin 01 - JavaScript Drum Kit/sounds/ride.wav | Bin 01 - JavaScript Drum Kit/sounds/snare.wav | Bin 01 - JavaScript Drum Kit/sounds/tom.wav | Bin 03 - CSS Variables/.vscode/settings.json | 3 + 03 - CSS Variables/index-START.html | 87 ++++++++++------- 03 - CSS Variables/index-jayhawk.html | 91 ++++++++++++++++++ 08 - Fun with HTML5 Canvas/index-jayhawk.html | 59 ++++++++++++ 19 - Webcam Fun/index.html | 0 19 - Webcam Fun/package.json | 0 19 - Webcam Fun/scripts-FINISHED.js | 0 19 - Webcam Fun/style.css | 0 20 - Speech Detection/package.json | 0 21 - Geolocation/package.json | 0 notes.md | 45 +++++++++ 19 files changed, 248 insertions(+), 37 deletions(-) mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/boom.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/clap.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/hihat.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/kick.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/openhat.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/ride.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/snare.wav mode change 100755 => 100644 01 - JavaScript Drum Kit/sounds/tom.wav create mode 100644 03 - CSS Variables/.vscode/settings.json create mode 100644 03 - CSS Variables/index-jayhawk.html create mode 100644 08 - Fun with HTML5 Canvas/index-jayhawk.html mode change 100755 => 100644 19 - Webcam Fun/index.html mode change 100755 => 100644 19 - Webcam Fun/package.json mode change 100755 => 100644 19 - Webcam Fun/scripts-FINISHED.js mode change 100755 => 100644 19 - Webcam Fun/style.css mode change 100755 => 100644 20 - Speech Detection/package.json mode change 100755 => 100644 21 - Geolocation/package.json create mode 100644 notes.md diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav b/01 - JavaScript Drum Kit/sounds/boom.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav b/01 - JavaScript Drum Kit/sounds/clap.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav b/01 - JavaScript Drum Kit/sounds/hihat.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav b/01 - JavaScript Drum Kit/sounds/kick.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav b/01 - JavaScript Drum Kit/sounds/openhat.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav b/01 - JavaScript Drum Kit/sounds/ride.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav b/01 - JavaScript Drum Kit/sounds/snare.wav old mode 100755 new mode 100644 diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav b/01 - JavaScript Drum Kit/sounds/tom.wav old mode 100755 new mode 100644 diff --git a/03 - CSS Variables/.vscode/settings.json b/03 - CSS Variables/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/03 - CSS Variables/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..4871f253a3 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,64 @@ - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

+ + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

- Spacing: - +

+ Spacing: + - Blur: - + Blur: + - Base Color - -

+ Base Color + +

- + .controls { + margin-bottom: 50px; + } - + input { + width: 100px; + } + - + + diff --git a/03 - CSS Variables/index-jayhawk.html b/03 - CSS Variables/index-jayhawk.html new file mode 100644 index 0000000000..111e592f2c --- /dev/null +++ b/03 - CSS Variables/index-jayhawk.html @@ -0,0 +1,91 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +

+ Spacing: + + + Blur: + + + Base Color + +

+ +

+ + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-jayhawk.html b/08 - Fun with HTML5 Canvas/index-jayhawk.html new file mode 100644 index 0000000000..ac672b408c --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-jayhawk.html @@ -0,0 +1,59 @@ + + + + + HTML5 Canvas + + +

+ + + + + diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html old mode 100755 new mode 100644 diff --git a/19 - Webcam Fun/package.json b/19 - Webcam Fun/package.json old mode 100755 new mode 100644 diff --git a/19 - Webcam Fun/scripts-FINISHED.js b/19 - Webcam Fun/scripts-FINISHED.js old mode 100755 new mode 100644 diff --git a/19 - Webcam Fun/style.css b/19 - Webcam Fun/style.css old mode 100755 new mode 100644 diff --git a/20 - Speech Detection/package.json b/20 - Speech Detection/package.json old mode 100755 new mode 100644 diff --git a/21 - Geolocation/package.json b/21 - Geolocation/package.json old mode 100755 new mode 100644 diff --git a/notes.md b/notes.md new file mode 100644 index 0000000000..8697577197 --- /dev/null +++ b/notes.md @@ -0,0 +1,45 @@ +# These are some important notes related to each topic each day. + +## Day 1: + +- Get keys pressed in js using event keydown, keyup or keypress +- Get ascii code of pressed key with event.keyCode +- ES6 formatting + ``` + `div[data-key="${code}"]` + ``` +- Add css classes in javascript using .classList.add("classname") +- datasets can be used in js as `this.dataset.dataname` where dataname is declared in HTML as an attribute `data-dataname="anything"` + +## Day 2: + +- use window.setInterval(functioname, timeoutMS) to call a function after every given number of timeout. + +## Day 3: + +### CSS Variables + +- Declaring and using CSS variables + ``` + :root{ + --base: yellow; + --spacing: 10px; + --blur: 10px; + } + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + } + ``` +- Accessing CSS variables + ``` + document.documentElement.style.setProperty(--`${this.name}` , this.value) + ``` + +## Day 4: + +- filter() : returns array of object under some condition specified in function. +- map() : returns array from an object where you want a specific part of object like first name or last name. +- sort() : sorts the array . takes a compare function as an argument and in that function we pass first and second value of object and compare them on certain value and return 1 or -1. +- reduce() : it takes two params accumulator and reducer . Helpful in creating dictionary from array with key value pairs. From f87f846dc6cde2c5437167806be030ee5844e17a Mon Sep 17 00:00:00 2001 From: Anubhav Gupta <38766415+jayhawk24@users.noreply.github.com> Date: Sat, 2 Jan 2021 15:55:35 +0530 Subject: [PATCH 10/14] Day 9 --- 09 - Dev Tools Domination/index-jayhawk.html | 47 ++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 09 - Dev Tools Domination/index-jayhawk.html diff --git a/09 - Dev Tools Domination/index-jayhawk.html b/09 - Dev Tools Domination/index-jayhawk.html new file mode 100644 index 0000000000..aa5ecdce07 --- /dev/null +++ b/09 - Dev Tools Domination/index-jayhawk.html @@ -0,0 +1,47 @@ + + + + + Console Tricks! + + +

×BREAK×DOWN×

+ + + + From a4426299e3e3afc2bf44551396330ac6dae664f8 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Sat, 2 Jan 2021 17:21:47 +0530 Subject: [PATCH 11/14] day 5 --- 07 - Array Cardio Day 2/index-jayhawk.html | 52 ++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-jayhawk.html diff --git a/07 - Array Cardio Day 2/index-jayhawk.html b/07 - Array Cardio Day 2/index-jayhawk.html new file mode 100644 index 0000000000..4a7e7bea98 --- /dev/null +++ b/07 - Array Cardio Day 2/index-jayhawk.html @@ -0,0 +1,52 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 043bea7c7b7ae1f86f3bee31c960b985d05890d2 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Mon, 4 Jan 2021 20:05:19 +0530 Subject: [PATCH 12/14] day 10 --- 03 - CSS Variables/.vscode/settings.json | 3 + 03 - CSS Variables/index-START.html | 87 ++++++++++-------- 03 - CSS Variables/index-jayhawk.html | 91 +++++++++++++++++++ 08 - Fun with HTML5 Canvas/index-jayhawk.html | 18 ++++ notes.md | 45 +++++++++ 5 files changed, 207 insertions(+), 37 deletions(-) create mode 100644 03 - CSS Variables/.vscode/settings.json create mode 100644 03 - CSS Variables/index-jayhawk.html create mode 100644 08 - Fun with HTML5 Canvas/index-jayhawk.html create mode 100644 notes.md diff --git a/03 - CSS Variables/.vscode/settings.json b/03 - CSS Variables/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/03 - CSS Variables/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..4871f253a3 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,64 @@ - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

+ + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

- Spacing: - +

+ Spacing: + - Blur: - + Blur: + - Base Color - -

+ Base Color + +

Update CSS Variables with JS

+ +

+ Spacing: + + + Blur: + + + Base Color + +

+ +

+ + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-jayhawk.html b/08 - Fun with HTML5 Canvas/index-jayhawk.html new file mode 100644 index 0000000000..7e7b7a82c6 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-jayhawk.html @@ -0,0 +1,18 @@ + + + + + HTML5 Canvas + + +

+ + + + + diff --git a/notes.md b/notes.md new file mode 100644 index 0000000000..8697577197 --- /dev/null +++ b/notes.md @@ -0,0 +1,45 @@ +# These are some important notes related to each topic each day. + +## Day 1: + +- Get keys pressed in js using event keydown, keyup or keypress +- Get ascii code of pressed key with event.keyCode +- ES6 formatting + ``` + `div[data-key="${code}"]` + ``` +- Add css classes in javascript using .classList.add("classname") +- datasets can be used in js as `this.dataset.dataname` where dataname is declared in HTML as an attribute `data-dataname="anything"` + +## Day 2: + +- use window.setInterval(functioname, timeoutMS) to call a function after every given number of timeout. + +## Day 3: + +### CSS Variables + +- Declaring and using CSS variables + ``` + :root{ + --base: yellow; + --spacing: 10px; + --blur: 10px; + } + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + } + ``` +- Accessing CSS variables + ``` + document.documentElement.style.setProperty(--`${this.name}` , this.value) + ``` + +## Day 4: + +- filter() : returns array of object under some condition specified in function. +- map() : returns array from an object where you want a specific part of object like first name or last name. +- sort() : sorts the array . takes a compare function as an argument and in that function we pass first and second value of object and compare them on certain value and return 1 or -1. +- reduce() : it takes two params accumulator and reducer . Helpful in creating dictionary from array with key value pairs. From 0bf6900c78b258a26165d809a6497b91c24bcb18 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Mon, 4 Jan 2021 21:00:02 +0530 Subject: [PATCH 13/14] day 10 --- 09 - Dev Tools Domination/index-jayhawk.html | 47 ------- .../index-jayhawk.html | 125 ++++++++++++++++++ 2 files changed, 125 insertions(+), 47 deletions(-) delete mode 100644 09 - Dev Tools Domination/index-jayhawk.html create mode 100644 10 - Hold Shift and Check Checkboxes/index-jayhawk.html diff --git a/09 - Dev Tools Domination/index-jayhawk.html b/09 - Dev Tools Domination/index-jayhawk.html deleted file mode 100644 index aa5ecdce07..0000000000 --- a/09 - Dev Tools Domination/index-jayhawk.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - Console Tricks! - - -

×BREAK×DOWN×

- - - - diff --git a/10 - Hold Shift and Check Checkboxes/index-jayhawk.html b/10 - Hold Shift and Check Checkboxes/index-jayhawk.html new file mode 100644 index 0000000000..da2b41da0d --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-jayhawk.html @@ -0,0 +1,125 @@ + + + + + Hold Shift to Check Multiple Checkboxes + + + + +

+ +

This is an inbox layout.

+ +

Check one item

+ +

Hold down your Shift key

+ +

Check a lower item

+ +

Everything in between should also be set to checked

+ +

Try to do it without any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + + From 85045886d91e81883b8945b188839c4a0a6997e8 Mon Sep 17 00:00:00 2001 From: jayhawk24 Date: Wed, 6 Jan 2021 01:04:50 +0530 Subject: [PATCH 14/14] day 12 --- 12 - Key Sequence Detection/index-START.html | 35 +++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index dc53c4e9e1..0d478cf98e 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -1,12 +1,29 @@ - - - Key Detection - - - - - + + + Key Detection + + + + +