JS + CSS Clock

A clap

S hihat

D kick

F openhat

G boom

H ride

J snare

K tom

L tink

- diff --git a/01 - JavaScript Drum Kit/js/main.js b/01 - JavaScript Drum Kit/js/main.js new file mode 100644 index 0000000000..7c1d525880 --- /dev/null +++ b/01 - JavaScript Drum Kit/js/main.js @@ -0,0 +1,17 @@ +var playSound = function (event) { + var audio = document.querySelector(".s"+event.keyCode); + var key = document.querySelector(".k"+event.keyCode); + if (!audio) return; // quicker way to end the program if the key clicked is not a part of the keyboard + audio.currentTime = 0; // reset the WAV sound + audio.play(); + key.classList.add('playing'); +}; + +var removeTransition = function(event) { + if (event.propertyName !== 'transform') return; // skip it if it's not a transform + this.classList.remove('playing'); +}; + +keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +window.addEventListener('keydown', playSound); diff --git a/02 - JS + CSS Clock/css/style.css b/02 - JS + CSS Clock/css/style.css new file mode 100644 index 0000000000..f253c368bd --- /dev/null +++ b/02 - JS + CSS Clock/css/style.css @@ -0,0 +1,35 @@ +body { + background-image: url(http://unsplash.it/1500/1000?blur=50); + background-size:cover; + font-size: 2rem; + display:flex; + flex:1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 20rem; + height: 20rem; + border:20px solid white; + border-radius:15%; + margin:50px auto; + position: relative; + padding:2rem; + box-shadow: 0 0 0 4px rgba(0,0,0,0.2), inset 0 0 0 3px #EFEFEF, 0 0 10px rgba(0,0,0,0.2); +} + + + +.hand { + width:45%; + height:6px; + background:black; + position: absolute; + top: calc( 50% - 2px ); + left: calc( 5% - 3px) ; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0, 2, 0.8, 1); +} diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..2e1d16b0a4 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -2,6 +2,7 @@ + JS + CSS Clock @@ -16,58 +17,6 @@

- - - + diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 1c777557da..a2390414c5 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -2,11 +2,12 @@ + JS + CSS Clock - +

@@ -16,81 +17,6 @@

- - - + diff --git a/02 - JS + CSS Clock/js/main.js b/02 - JS + CSS Clock/js/main.js new file mode 100644 index 0000000000..bee2f5bf6a --- /dev/null +++ b/02 - JS + CSS Clock/js/main.js @@ -0,0 +1,22 @@ +'use strict'; + +const secondHand = document.querySelector('.second-hand'), + minuteHand = document.querySelector('.min-hand'), + hourHand = document.querySelector('.hour-hand'); + +function setDate() { + const now = new Date(); + + const seconds = now.getSeconds() * 6 + 90; + const minutes = now.getMinutes() * 6 + 90; + const hours = (minutes - 90) * 5 + 90; + + secondHand.style.transform = `rotate(${seconds}deg)`; + + minuteHand.style.transform = `rotate(${minutes}deg)`; + + hourHand.style.transform = `rotate(${hours}deg)`; +} + +setInterval(setDate, 1000); +setDate(); diff --git a/03 - CSS Variables/css/style.css b/03 - CSS Variables/css/style.css new file mode 100644 index 0000000000..e5208bd4d9 --- /dev/null +++ b/03 - CSS Variables/css/style.css @@ -0,0 +1,37 @@ +:root { + --base: #429942; + --spacing: 3px; + --blur: 2px; +} + +img { + background: var(--base); + padding: var(--spacing); + filter: blur(var(--blur)); +} + +.hl { + color: var(--base); +} + +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +.controls { + margin-bottom: 50px; +} + +a { + color: var(--base); + text-decoration: none; +} + +input { + width:100px; +} diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html similarity index 57% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index.html index bf0f33e3ba..41f3141d78 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index.html @@ -2,6 +2,7 @@ + Scoped CSS Variables and JS @@ -20,40 +21,7 @@

Update CSS Variables with JS

- - - + diff --git a/03 - CSS Variables/js/main.js b/03 - CSS Variables/js/main.js new file mode 100644 index 0000000000..f072f2d02f --- /dev/null +++ b/03 - CSS Variables/js/main.js @@ -0,0 +1,9 @@ +function handleUpdate() { + debugger + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); +} + +const inputs = document.querySelectorAll('.controls input'); + +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));