diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..3c1c42d1fa 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,9 +57,7 @@ - + diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..162c1d3580 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,23 @@ +window.addEventListener("load", () => { + const keys = Array.from(document.getElementsByClassName("key")); + const audio = Array.from(document.getElementsByTagName("audio")); + + document.addEventListener("keydown", e => { + const keyCode = String(e.keyCode); + const key = keys.find(key => key.dataset.key === keyCode); + + if (key) { + const sound = audio.find(sound => sound.dataset.key === keyCode); + key.classList.add("playing"); + sound.play(); + } + }); + document.addEventListener("keyup", e => { + const keyCode = String(e.keyCode); + const key = keys.find(key => key.dataset.key === keyCode); + + if (key) { + key.classList.remove("playing"); + } + }); +}); diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 12f721b183..038e1df892 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -18,7 +18,7 @@ - + diff --git a/02 - JS and CSS Clock/index.js b/02 - JS and CSS Clock/index.js new file mode 100644 index 0000000000..27f8f57a36 --- /dev/null +++ b/02 - JS and CSS Clock/index.js @@ -0,0 +1,23 @@ +hourHand = document.querySelector('div.hour-hand'); +minuteHand = document.querySelector('div.min-hand'); +secondHand = document.querySelector('div.second-hand'); + +setInterval(setDate, 1000); + +setDate(); + +function setDate() { + + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + + const setHour = ((hours / 12) * 360) + ((minutes/60)*30) + 90; + const setMinute = ((minutes / 60) * 360) + ((seconds/60)*6) + 90; + const setSeconds = ((seconds / 60) * 360) + 90; + + hourHand.setAttribute('style', `transform: rotate(${setHour}deg);`); + minuteHand.setAttribute('style', `transform: rotate(${setMinute}deg);`); + secondHand.setAttribute('style', `transform: rotate(${setSeconds}deg);`); +} diff --git a/03 - CSS Variables/app.js b/03 - CSS Variables/app.js new file mode 100644 index 0000000000..551483bac7 --- /dev/null +++ b/03 - CSS Variables/app.js @@ -0,0 +1,10 @@ +const inputs = document.querySelectorAll('.controls input'); + +function handleUpdate() { + const suffix = this.dataset.sizing || ''; + + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); +} + +inputs.forEach(input => input.addEventListener('change', handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..55ba6a8a9e 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,6 +22,22 @@

Update CSS Variables with JS

- diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..e59c8ba511 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,17 +31,33 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const oldDudes = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1599); + console.table(oldDudes); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const names = inventors.map(inventor => { + const firstName = inventor.first; + const lastName = inventor.last; + return `${firstName} ${lastName}`; + }) + + console.log(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - + const birthdate = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(birthdate); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalLife = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + console.log(totalLife); // 5. Sort the inventors by years lived + const yearLived = inventors.sort((a, b) => (a.passed - a.year) < (b.passed - b.year) ? 1 : -1); + console.table(yearLived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -49,11 +65,27 @@ // 7. sort Exercise // Sort the people alphabetically by last name + const lastNames = people.sort((a, b) => { + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + return aLast > bLast ? 1 : -1; + }); + + console.log(lastNames); // 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 instances = data.reduce((obj, item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log(instances); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..d2153ab817 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,10 +1,12 @@ + Flex Panels 💪 + @@ -105,10 +149,23 @@ + function toggleOpen() { + this.classList.toggle('open'); + } + function toggleActive(e) { + if (e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } + } + pannels.forEach(panel => panel.addEventListener('click', toggleOpen)); + pannels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + + - + + \ No newline at end of file