JS + CSS Clock

A clap

S hihat

D kick

F openhat

G boom

H ride

J snare

K tom

L tink

+ + + window.addEventListener('keydown', e => { + const AUDIO = document.querySelector(`audio[data-key='${e.code}']`); + const KEY = document.querySelector(`.key[data-key='${e.code}']`); + const KEYS = document.querySelectorAll(`.keys`); + const REMOVE_TRANSITION = e => e.target.classList.remove(`playing`); - - - + if (AUDIO) { + console.log(e); + AUDIO.currentTime = 0; // start audio from beginning + AUDIO.play(); + KEY.classList.add('playing'); + KEYS.forEach(key => { key.addEventListener(`transitionend`, REMOVE_TRANSITION) }); + } else { + console.log(`There is no sound currently associated with ${KEYBOARD_MAP[e.keyCode]}. Please use A, S, D, F, G, H, J, K, or L.`); + } + }); + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..a3d407cf27 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -23,7 +23,7 @@ body,html { margin: 1rem; font-size: 1.5rem; padding: 1rem .5rem; - transition: all .07s ease; + transition: all .5s ease; width: 10rem; text-align: center; color: white; diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..f1ca8ee0ba 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,249 @@ - - JS + CSS Clock + + JS + CSS Clock + + +

- -

- - - - - +

+ + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..ffed44f828 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,71 @@ - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -

- Spacing: - + + Scoped CSS Variables and JS - Blur: - + + + +

Update CSS Variables with JS

- .controls { - margin-bottom: 50px; - } +

+ Spacing: + - input { - width:100px; - } - + Blur: + - + Base Color + +

+ + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..199822c2be 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,59 +1,175 @@ - - Array Cardio 💪 + + Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

- - - + // 7. sort Exercise + // Sort the people alphabetically by last name + const PEOPLE_ORDER_BY_LAST_NAME = people.sort(); + console.log(PEOPLE_ORDER_BY_LAST_NAME); + + // 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 dataSort = data.reduce((total) => {}); + }); + From 45bc921142ca2b66414f227c0ad4473c59e73203 Mon Sep 17 00:00:00 2001 From: "aaron.dewberry" Date: Tue, 23 Jan 2018 19:03:06 -0600 Subject: [PATCH 2/2] Finished Cardio 1 exercise #8 --- 04 - Array Cardio Day 1/index-START.html | 27 ++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 199822c2be..67b116ebe7 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -169,7 +169,30 @@ // 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 dataSort = data.reduce((total) => {}); + const DATA = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']; + const DATA_SORT = DATA.reduce((object, name) => { + if (name in object) { + object[name]++; + } else { + object[name] = 1; + } + + return object; + }, {}); + const SUM = object => { + let sum = 0; + + for (let key in object) { + if (object.hasOwnProperty(key)) { + sum += object[key]; + } + } + + return sum; + }; + + console.log('DATA_SORT'); + console.log(DATA_SORT); + console.log(SUM(DATA_SORT)); });