JS Drum Kit

From e51321b52a01c7f8bbb23d60644a70a65425c64b Mon Sep 17 00:00:00 2001 From: Hongyu Yang Date: Mon, 28 Oct 2024 18:54:36 +0300 Subject: [PATCH 1/4] Day 01 - TypeScript A TypeScript implementation that adds an event listener on keydown event, and use querySelector to start playing the audio as well as changing the div element's style class. --- 01 - JavaScript Drum Kit/index-START.html | 1 + 01 - JavaScript Drum Kit/index.js | 10 ++++++++++ 01 - JavaScript Drum Kit/index.ts | 13 +++++++++++++ 3 files changed, 24 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index.js create mode 100644 01 - JavaScript Drum Kit/index.ts diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..63ca46985d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -5,6 +5,7 @@ JS Drum Kit + diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..8aec6fd3b1 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,10 @@ +var audioElems = document.querySelectorAll("audio"); +window.addEventListener("keydown", function (event) { + console.log(event.keyCode); + var audio = document.querySelector("audio[data-key=\"".concat(event.keyCode, "\"]")); + var div = document.querySelector("div[data-key=\"".concat(event.keyCode, "\"]")); + audio.play().then(function () { + div.classList.add("playing"); + setTimeout(function () { div.classList.remove("playing"); }, 500); + }); +}); diff --git a/01 - JavaScript Drum Kit/index.ts b/01 - JavaScript Drum Kit/index.ts new file mode 100644 index 0000000000..982ff79d92 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.ts @@ -0,0 +1,13 @@ +const audioElems = document.querySelectorAll("audio"); + + +window.addEventListener("keydown", (event) => { + console.log(event.keyCode); + const audio: HTMLAudioElement = document.querySelector(`audio[data-key="${event.keyCode}"]`); + const div = document.querySelector(`div[data-key="${event.keyCode}"]`); + audio.play().then(() => { + div.classList.add("playing"); + setTimeout(() => {div.classList.remove("playing")}, 500); + }); + +}) From 5efa677e5d6b923ea60adb1b907a6ed1159307ff Mon Sep 17 00:00:00 2001 From: Hongyu Yang Date: Mon, 28 Oct 2024 19:28:00 +0300 Subject: [PATCH 2/4] Day 02 - TypeScript Use setInterval and querySelector to regularly update the style of the elements. --- 02 - JS and CSS Clock/index-START.html | 7 +++---- 02 - JS and CSS Clock/index.js | 15 +++++++++++++++ 02 - JS and CSS Clock/index.ts | 18 ++++++++++++++++++ 3 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 02 - JS and CSS Clock/index.js create mode 100644 02 - JS and CSS Clock/index.ts diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..4047f19bfa 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -4,6 +4,7 @@ JS + CSS Clock + @@ -63,13 +64,11 @@ background: black; position: absolute; top: 50%; + transform-origin: 100%; } - - - diff --git a/02 - JS and CSS Clock/index.js b/02 - JS and CSS Clock/index.js new file mode 100644 index 0000000000..5532917e63 --- /dev/null +++ b/02 - JS and CSS Clock/index.js @@ -0,0 +1,15 @@ +setInterval(function () { + var date = new Date(); + var hours = date.getHours(); + var minutes = date.getMinutes(); + var seconds = date.getSeconds(); + var hour_transform = "rotate(".concat(hours * 15, "deg)"); + var minute_transform = "rotate(".concat(minutes * 6, "deg)"); + var second_transform = "rotate(".concat(seconds * 6, "deg)"); + var hourElem = document.querySelector(".hand.hour-hand"); + var minuteElem = document.querySelector(".hand.min-hand"); + var secondElem = document.querySelector(".hand.second-hand"); + hourElem.style.transform = hour_transform; + minuteElem.style.transform = minute_transform; + secondElem.style.transform = second_transform; +}, 1000); diff --git a/02 - JS and CSS Clock/index.ts b/02 - JS and CSS Clock/index.ts new file mode 100644 index 0000000000..6b4ed18cd4 --- /dev/null +++ b/02 - JS and CSS Clock/index.ts @@ -0,0 +1,18 @@ +setInterval(() => { + const date = new Date(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + const seconds = date.getSeconds(); + + const hour_transform = `rotate(${hours*15}deg)`; + const minute_transform = `rotate(${minutes*6}deg)`; + const second_transform = `rotate(${seconds*6}deg)`; + + const hourElem: HTMLElement = document.querySelector(".hand.hour-hand"); + const minuteElem: HTMLElement = document.querySelector(".hand.min-hand"); + const secondElem: HTMLElement = document.querySelector(".hand.second-hand"); + hourElem.style.transform = hour_transform; + minuteElem.style.transform = minute_transform; + secondElem.style.transform = second_transform; + +}, 1000); \ No newline at end of file From b7c53c583c9cfcd7186432683959bd2bfbbc30be Mon Sep 17 00:00:00 2001 From: Hongyu Yang Date: Mon, 28 Oct 2024 20:13:46 +0300 Subject: [PATCH 3/4] Day 03 - TypeScript Important lesson learned: put the script towards the end of the html to ensure that the elements were already created before the script can access them. --- 03 - CSS Variables/index-START.html | 20 ++++++++++++++++++-- 03 - CSS Variables/index.js | 11 +++++++++++ 03 - CSS Variables/index.ts | 15 +++++++++++++++ 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 03 - CSS Variables/index.js create mode 100644 03 - CSS Variables/index.ts diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..79a086646f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -4,6 +4,7 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -22,7 +23,21 @@

Update CSS Variables with JS

- + + + diff --git a/03 - CSS Variables/index.js b/03 - CSS Variables/index.js new file mode 100644 index 0000000000..4f8ab3b53f --- /dev/null +++ b/03 - CSS Variables/index.js @@ -0,0 +1,11 @@ +var controls = document.querySelector("div.controls"); +var inputs = controls.querySelectorAll("input"); +console.log(inputs); +function handleChange() { + var suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty("--".concat(this.name), this.value + suffix); +} +inputs.forEach(function (input) { + input.addEventListener("change", handleChange); + console.log(input.name); +}); diff --git a/03 - CSS Variables/index.ts b/03 - CSS Variables/index.ts new file mode 100644 index 0000000000..484a0b0c7d --- /dev/null +++ b/03 - CSS Variables/index.ts @@ -0,0 +1,15 @@ +// Learned the hard lesson: put the script towards the end of the html, not the head +// This script doesn't work initially because the elements were not created yet + +const controls = document.querySelector("div.controls"); +const inputs: NodeListOf = controls.querySelectorAll("input"); +console.log(inputs); + +function handleChange(this: HTMLInputElement) { + const suffix: string = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value+suffix); +} +inputs.forEach((input) => { + input.addEventListener("change", handleChange) + console.log(input.name); +}) \ No newline at end of file From 0f10cd84dc179447cfdb24bf0febc51511a01899 Mon Sep 17 00:00:00 2001 From: Hongyu Yang Date: Mon, 28 Oct 2024 21:01:25 +0300 Subject: [PATCH 4/4] Day 04 - TypeScript Added interface for the typing of inventors, and used fetch api to query the wikipedia page, which would then be parsed as a DOM Document. --- 04 - Array Cardio Day 1/index-START.html | 54 +--------- 04 - Array Cardio Day 1/index.js | 101 ++++++++++++++++++ 04 - Array Cardio Day 1/index.ts | 125 +++++++++++++++++++++++ 3 files changed, 227 insertions(+), 53 deletions(-) create mode 100644 04 - Array Cardio Day 1/index.js create mode 100644 04 - Array Cardio Day 1/index.ts diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..d52c857b58 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,60 +7,8 @@

Psst: have a look at the JavaScript Console 💁

- + diff --git a/04 - Array Cardio Day 1/index.js b/04 - Array Cardio Day 1/index.js new file mode 100644 index 0000000000..35c695f322 --- /dev/null +++ b/04 - Array Cardio Day 1/index.js @@ -0,0 +1,101 @@ +var inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } +]; +var people = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', + 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' +]; +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +var inventors1500s = inventors.filter(function (person) { + return person.year >= 1500 && person.year <= 1599; +}); +console.log("1. Inventors born in the 1500s"); +console.log(inventors1500s); +// Array.prototype.map() +// 2. Give us an array of the inventors first and last names +var names = inventors.map(function (person) { + return { + first: person.first, + last: person.last, + }; +}); +console.log("2. Inventors' names"); +console.log(names); +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +var sortedInventors = inventors.sort(function (a, b) { return a.year - b.year; }); +console.log("3. Inventors sorted by birthdate"); +console.log(sortedInventors); +// Array.prototype.reduce() +// 4. How many years did all the inventors live all together? +var totalYears = sortedInventors + .map(function (person) { return person.passed - person.year; }) + .reduce(function (total, current) { return total + current; }, 0); +console.log("4. Total Years: " + totalYears); +// 5. Sort the inventors by years lived +var sortedByLifespan = inventors.sort(function (a, b) { return (a.passed - a.year) - (b.passed - b.year); }); +console.log("5. Sorted By lifespan"); +console.log(sortedByLifespan); +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +fetch("https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris") + .then(function (response) { return response.text(); }) + .then(function (text) { + var parser = new DOMParser(); + var htmlDocument = parser.parseFromString(text, "text/html"); + var div = htmlDocument.getElementById("mw-pages"); + // @ts-ignore + var links = Array.from(div.querySelectorAll("a")); + var namesWithDe = links.filter(function (link) { return /\sde\s/.test(link.title); }).map(function (link) { return link.title; }); + console.log("6. I only want to get names that have the preposition 'de':"); + namesWithDe.forEach(function (name) { + console.log(name); + }); +}); +// 7. sort Exercise +// Sort the people alphabetically by last name +var sortedNames = people.sort(function (a, b) { + var nameA = a.split(","); + var nameB = b.split(","); + if (nameA < nameB) { + return -1; + } + else if (nameA > nameB) { + return 1; + } + else { + return 0; + } +}); +console.log("7. Names sorted alphabetically by last name"); +console.log(sortedNames); +// 8. Reduce Exercise +// Sum up the instances of each of these +var data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']; +// forEach seems more natural? +var counter = {}; +data.forEach(function (name) { + if (counter.hasOwnProperty(name)) { + counter[name] += 1; + } + else { + counter[name] = 1; + } +}); +console.log("8. A counter for occurrences of different means of transportation"); +console.log(counter); diff --git a/04 - Array Cardio Day 1/index.ts b/04 - Array Cardio Day 1/index.ts new file mode 100644 index 0000000000..69b924b810 --- /dev/null +++ b/04 - Array Cardio Day 1/index.ts @@ -0,0 +1,125 @@ + +// Get your shorts on - this is an array workout! +// ## Array Cardio Day 1 +interface Name { + first: string; + last: string; +} +// Some data we can work with +interface Person extends Name { + year: number; + passed: number; +} + +const inventors: Person[] = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } +]; + +const people = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', + 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' +]; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +const inventors1500s: Person[] = inventors.filter(person => { + return person.year >= 1500 && person.year <= 1599; +}) +console.log("1. Inventors born in the 1500s") +console.log(inventors1500s) + +// Array.prototype.map() +// 2. Give us an array of the inventors first and last names +const names: Name[] = inventors.map(person => { + return { + first: person.first, + last: person.last, + } +}); +console.log("2. Inventors' names") +console.log(names) + + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +const sortedInventors = inventors.sort((a, b) => a.year - b.year) +console.log("3. Inventors sorted by birthdate") +console.log(sortedInventors) + +// Array.prototype.reduce() +// 4. How many years did all the inventors live all together? +const totalYears = sortedInventors + .map(person => person.passed-person.year) + .reduce((total, current) => total+current, 0); +console.log("4. Total Years: " + totalYears); + +// 5. Sort the inventors by years lived +const sortedByLifespan = inventors.sort((a, b) => (a.passed-a.year) - (b.passed-b.year)) +console.log("5. Sorted By lifespan") +console.log(sortedByLifespan); + +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + +fetch("https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris") + .then(response => response.text()) + .then(text => { + const parser = new DOMParser(); + const htmlDocument = parser.parseFromString(text, "text/html"); + const div = htmlDocument.getElementById("mw-pages"); + // @ts-ignore + const links = Array.from(div.querySelectorAll("a")); + const namesWithDe = links.filter(link => /\sde\s/.test(link.title)).map(link => link.title); + console.log("6. I only want to get names that have the preposition 'de':") + namesWithDe.forEach(name => { + console.log(name); + }) + }) + + + +// 7. sort Exercise +// Sort the people alphabetically by last name +const sortedNames = people.sort((a, b) => { + const nameA = a.split(","); + const nameB = b.split(","); + if (nameA < nameB){ + return -1; + } else if (nameA > nameB){ + return 1; + } else { + return 0; + } +}) +console.log("7. Names sorted alphabetically by last name"); +console.log(sortedNames); + +// 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' ]; +// forEach seems more natural? + +let counter = {}; +data.forEach(name => { + if(counter.hasOwnProperty(name)){ + counter[name]+= 1; + } else { + counter[name] = 1; + } +}) +console.log("8. A counter for occurrences of different means of transportation"); +console.log(counter); \ No newline at end of file