From 7062abff348bf302d1fddd5dd20cfdc1901893b1 Mon Sep 17 00:00:00 2001 From: Andy Lincoln Date: Tue, 13 Dec 2016 20:08:07 -0500 Subject: [PATCH] First two days of JS30 --- 01 - JavaScript Drum Kit/index-START.html | 29 +++- 02 - JS + CSS Clock/index-START.html | 156 +++++++++++++++------- 2 files changed, 135 insertions(+), 50 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..58c004d307 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,9 +57,34 @@ - + function keyDownListener(e) { + + // Check if there exists an audio tag with the data-key that matches the + // triggered key. + const key = document.querySelector(`div.key[data-key="${e.keyCode}"]`); + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + + if (!audio) { return; } + // Only try to play if it exists, because audio will be null otherwise. + audio.currentTime = 0; + audio.play(); + + + key.classList.toggle("playing") + + const keys = document.querySelectorAll('div.key'); + keys.forEach(key => key.addEventListener("transitionend",removeTransition)); + + } + + window.addEventListener('keydown', keyDownListener); + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..af0bd77b58 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -7,66 +7,126 @@ -
-
-
-
-
-
+
+
+
+
+
+
+
+ .hand { + width: 50%; + height:6px; + background: black; + position: absolute; + top: 50%; + /* Default is 50%, in the center, 0 is left, 100% is right, we want right*/ + transform-origin: 100%; + /* Rotate 90deg for 12:00 starting point */ + transform: rotate(90deg); + /* Apply transitions to all inherited transitionable properties*/ + transition: all 0.5s; + /* Recreate that old clock look with bouncing hands */ + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + + } + + .min-hand { + } + + .hour-hand { + } + + .second-hand { + background-color: red; + } +