JS Drum Kit

From 3f7314dfc7d364318ff0019df6c916ec7c451584 Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Sat, 3 Apr 2021 14:09:33 +0200 Subject: [PATCH 1/8] chore: setup prettier --- package-lock.json | 14 ++++++++++++++ package.json | 23 +++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000000..c2efa447fd --- /dev/null +++ b/package-lock.json @@ -0,0 +1,14 @@ +{ + "name": "JavaScript30", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "prettier": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", + "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000000..f2429e5f10 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "JavaScript30", + "version": "1.0.0", + "description": "![](https://javascript30.com/images/JS3-social-share.png)", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/drazik/JavaScript30.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/drazik/JavaScript30/issues" + }, + "homepage": "https://github.com/drazik/JavaScript30#readme", + "devDependencies": { + "prettier": "^2.2.1" + } +} From 1960ef05933c86aea6b03ce3329b055e9eda32ab Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Sat, 3 Apr 2021 14:09:43 +0200 Subject: [PATCH 2/8] feat: day 1 solution --- 01 - JavaScript Drum Kit/index-START.html | 148 ++++++++++++++-------- 1 file changed, 92 insertions(+), 56 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..abd4c7b416 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,102 @@ - - - JS Drum Kit - - - + + + JS Drum Kit + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare -

- K - tom -

- L - tink -

+ + const resetKey = (e) => { + if (e.propertyName !== "transform") { + return; + } + e.target.classList.remove("playing"); + }; - + for (const key of keys.values()) { + key.addEventListener("transitionend", resetKey); + } + + From 087bc39e22d5e5c491ddd7b5dd75e9d543da772d Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Sat, 3 Apr 2021 16:28:03 +0200 Subject: [PATCH 3/8] feat: day 2 solution --- 02 - JS and CSS Clock/index-START.html | 128 ++++++++++++++----------- 1 file changed, 74 insertions(+), 54 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..f01b2c0f9b 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,82 @@

+ - .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); - } + - + setInterval(tick, 1000); + tick(); + + From b2cc4a67951ded6d0fc542780093767cdaa1ed41 Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Sun, 4 Apr 2021 18:05:51 +0200 Subject: [PATCH 4/8] feat: day 3 --- 03 - CSS Variables/index-START.html | 115 +++++++++++++++++++--------- 1 file changed, 79 insertions(+), 36 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..c4803df320 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,94 @@ - - - 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; - } + + document.documentElement.style.setProperty(variableName, value); + }; - + controls.forEach((control) => { + control.addEventListener("input", updateVariable); + }); + + From 0a8ad7aabf75b1c08c8fb0545de28921d66551b2 Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Mon, 5 Apr 2021 13:19:04 +0200 Subject: [PATCH 5/8] feat: day 4 --- 04 - Array Cardio Day 1/index-START.html | 201 +++++++++++++++++------ 1 file changed, 151 insertions(+), 50 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 21bec96e8c..d2a8456f37 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,65 +1,166 @@ - - - Array Cardio 💪 - - -

Psst: have a look at the JavaScript Console 💁

- - + // 7. sort Exercise + // Sort the people alphabetically by last name + const solution7 = people.sort((a, b) => { + const [aName] = a.split(", "); + const [bName] = b.split(", "); + + if (aName > bName) { + return 1; + } + + return -1; + }); + console.log(solution7); + + // 8. Reduce Exercise + // Sum up the instances of each of these + const data = [ + "car", + "car", + "truck", + "truck", + "bike", + "walk", + "car", + "van", + "bike", + "walk", + "car", + "van", + "car", + "truck", + ]; + const solution8 = data.reduce((instances, item) => { + instances[item] = instances[item] ? instances[item] + 1 : 1; + return instances; + }, {}); + console.table(solution8); + + From eaafc5f2f7861d86000463549becd142aa974153 Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Wed, 7 Apr 2021 09:46:05 +0200 Subject: [PATCH 6/8] feat: day 5 --- 05 - Flex Panel Gallery/index-START.html | 266 ++++++++++++++--------- 1 file changed, 160 insertions(+), 106 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..88c715817f 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,114 +1,168 @@ - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + Flex Panels 💪 + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- + + From 54df1e0d0273a1f2b2ab815df6c2cc556535dbb7 Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Thu, 8 Apr 2021 21:55:28 +0200 Subject: [PATCH 7/8] feat: day 6 --- 06 - Type Ahead/index-START.html | 99 ++++++++++++++++++++++++++------ 1 file changed, 80 insertions(+), 19 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 109c90fb36..95ffe14610 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,83 @@ - - - Type Ahead 👀 - - - - - - - + + + Type Ahead 👀 + + + + + + From 2c32697a55e03fb7c3b3a87a1fc29bc95d3b4a81 Mon Sep 17 00:00:00 2001 From: Cyrille Perois Date: Fri, 9 Apr 2021 08:46:39 +0200 Subject: [PATCH 8/8] feat: day 7 --- 07 - Array Cardio Day 2/index-START.html | 81 ++++++++++++++---------- 1 file changed, 49 insertions(+), 32 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..904742e81d 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,41 +1,58 @@ - - - Array Cardio 💪💪 - - -

Psst: have a look at the JavaScript Console 💁

- - + // Array.prototype.find() + // Find is like filter, but instead returns just the one you are looking for + // find the comment with the ID of 823423 + const solution3 = comments.find((comment) => comment.id === 823423); + console.table(solution3); + + // Array.prototype.findIndex() + // Find the comment with this ID + const index = comments.findIndex((comment) => comment.id === 823423); + // delete the comment with the ID of 823423 + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1), + ]; + console.table(newComments); + +