From 0e49f5a1f6985d316d9f31da9a3e838347c954f4 Mon Sep 17 00:00:00 2001 From: olegon Date: Mon, 4 Jun 2018 15:26:30 -0300 Subject: [PATCH 1/2] Day 01 - JavaSCript Drum Kit --- 01 - JavaScript Drum Kit/index-START.html | 12 +++++------- 01 - JavaScript Drum Kit/index.js | 20 ++++++++++++++++++++ 01 - JavaScript Drum Kit/style.css | 2 +- 3 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 01 - JavaScript Drum Kit/index.js diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..a767b7bfe2 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,12 +1,13 @@ + JS Drum Kit - +
@@ -57,10 +58,7 @@ - - - + - + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..02b639ee51 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,20 @@ +[...document.querySelectorAll('.key')] +.forEach(key => { + key.addEventListener('transitionend', (e) => { + // This event is called for each property that ended a transition. + + key.classList.remove('playing'); + }); +}); + +window.addEventListener('keyup', ({ keyCode }) => { + const keyElement = document.querySelector(`.key[data-key="${keyCode}"]`); + const audioElement = document.querySelector(`audio[data-key="${keyCode}"]`); + + if (keyElement && audioElement) { + audioElement.currentTime = 0; // rewind to start + audioElement.play(); + + keyElement.classList.add('playing'); + } +}); diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..2f6ecca596 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 .15s ease-in-out; width: 10rem; text-align: center; color: white; From 8111ec4e8e87ee89de0e21e5a64ea6fae2507eed Mon Sep 17 00:00:00 2001 From: olegon Date: Fri, 8 Jun 2018 14:04:57 -0300 Subject: [PATCH 2/2] Day 02 - JS + CSS Clock --- .../index-START-pure-css.html | 99 +++++++++++++++++++ 02 - JS and CSS Clock/index-START.html | 82 +++++++++------ 2 files changed, 152 insertions(+), 29 deletions(-) create mode 100644 02 - JS and CSS Clock/index-START-pure-css.html diff --git a/02 - JS and CSS Clock/index-START-pure-css.html b/02 - JS and CSS Clock/index-START-pure-css.html new file mode 100644 index 0000000000..d16f3bf6bb --- /dev/null +++ b/02 - JS and CSS Clock/index-START-pure-css.html @@ -0,0 +1,99 @@ + + + + + + JS + CSS Clock + + + +
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..117c0b055e 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,26 +1,26 @@ + JS + CSS Clock - - -
-
-
-
-
-
+ +
+
+
+
+
+
- + + \ No newline at end of file