@@ -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;
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