JS Drum Kit

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); + } + + 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(); + + 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); + }); + + 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); + + 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

- + + 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 👀 + + + + + + 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); + + 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" + } +}