JS Drum Kit

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare + + + JS Drum Kit + + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

- K - tom -

- L - tink -

- -

- - + function removeTransition(e) { + if (e.propertyName !== "transition") return; //ignore if not transition + console.log(e.propertyName); + } - + const keys = document.querySelectorAll(".key"); + keys.forEach((key) => + key.addEventListener("transitionend", removeTransition) + ); + + From 06246656b964fc55db4a7487f63ef5cb5a224aea Mon Sep 17 00:00:00 2001 From: ayoung90 Date: Fri, 19 May 2023 21:41:56 +1000 Subject: [PATCH 3/5] finish tutorial and refactor codeto final version --- 01 - JavaScript Drum Kit/index-START.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 10d7022a62..b59faca8eb 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,26 +57,29 @@

From 8abbfc232d432fd3f026a30010ad634a2fe4d425 Mon Sep 17 00:00:00 2001 From: ayoung90 Date: Tue, 23 May 2023 22:19:13 +1000 Subject: [PATCH 4/5] complete exercise --- 04 - Array Cardio Day 1/index-START.html | 50 ++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..3d8d6a39b8 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -38,29 +38,79 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(inventor => { + return inventor.year >= 1500 && inventor.year <= 1599; + }) + + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors first and last names + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.table(fullNames); + // 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 + const oldest = inventors.sort( (a, b) => { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + + return lastGuy < nextGuy ? 1 : -1; + + }) + + console.table(oldest); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // const category = document.querySelector('.mw-category'); + // const links = Array.from(category.querySelectorAll('a')); + + // const de = links.map(link => link.textContent) + // .filter(name => name.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const lastSort = people.sort((a, b) => { + const aLast = a.split(', ')[0]; + const bLast = b.split(', ')[0]; + return aLast > bLast ? 1 : -1 + }); + console.table(lastSort); // 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 transportation = data.reduce((obj, item) => { + console.log(item); + if (!obj[item]) { + obj[item] = 0; + } + + obj[item]++; + + return obj; + }, {} + ); + + console.table(transportation); + From 5b3931eeb42938703f82831f23ccc6229050a840 Mon Sep 17 00:00:00 2001 From: ayoung90 Date: Fri, 26 May 2023 20:13:00 +1000 Subject: [PATCH 5/5] finish tutorial --- 07 - Array Cardio Day 2/index-START.html | 107 ++++++++++++++--------- 1 file changed, 68 insertions(+), 39 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..0957b3fa66 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,42 +1,71 @@ - - - Array Cardio 💪💪 - - - -

Psst: have a look at the JavaScript Console 💁

- - + + + Array Cardio 💪💪 + + + + +

Psst: have a look at the JavaScript Console 💁

+ +