diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..3c397070ec 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,10 +1,12 @@ + JS Drum Kit + @@ -57,10 +59,28 @@ - + document.addEventListener('keydown', ({keyCode}) => { + const el = document.querySelector(`div[data-key="${keyCode}"]`); + const audio = document.querySelector(`audio[data-key="${keyCode}"]`); + if (!audio) return; + + el.classList.add('playing'); + audio.play(); + }); + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..c1404064e0 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,57 @@ + JS + CSS Clock + - + -
-
-
-
-
-
+
+
+
+
+
+
- - - - + diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..9ef2d57899 --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,51 @@ +html { + background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5); + background-size: cover; + font-family: 'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + margin: 0; + font-size: 2rem; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + position: relative; + padding: 2rem; + box-shadow: + 0 0 0 4px rgba(0, 0, 0, 0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0, 0, 0, 0.2); +} + +.clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); + /* account for the height of the clock hands */ +} + +.hand { + width: 50%; + height: 6px; + background: black; + position: absolute; + top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); +}