diff --git a/01 - JavaScript Drum Kit/my-index.html b/01 - JavaScript Drum Kit/my-index.html new file mode 100644 index 0000000000..684a41fc59 --- /dev/null +++ b/01 - JavaScript Drum Kit/my-index.html @@ -0,0 +1,64 @@ + + + + + JS Drum Kit + + + + + +
+
+ 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/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..37c44ede62 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,22 @@ +/** + * Created by iraquitan on 11/12/16. + */ + +function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + if (!audio) return; // stop the function from running all together + + audio.currentTime = 0; // rewind to the start + audio.play(); + key.classList.add('playing'); +} + +function removeTransition(e) { + if (e.propertyName !== 'transform') return; // skip if not transform transition + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +window.addEventListener('keydown', playSound); diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS_plus_CSS Clock/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS_plus_CSS Clock/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS_plus_CSS Clock/index-START.html similarity index 100% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS_plus_CSS Clock/index-START.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS_plus_CSS Clock/index.html similarity index 100% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS_plus_CSS Clock/index.html diff --git a/02 - JS_plus_CSS Clock/my-index.html b/02 - JS_plus_CSS Clock/my-index.html new file mode 100644 index 0000000000..39d982bc80 --- /dev/null +++ b/02 - JS_plus_CSS Clock/my-index.html @@ -0,0 +1,21 @@ + + + + + JS + CSS Clock + + + + + +
+
+
+
+
+
+
+ + + + diff --git a/02 - JS_plus_CSS Clock/script.js b/02 - JS_plus_CSS Clock/script.js new file mode 100644 index 0000000000..a0926cad08 --- /dev/null +++ b/02 - JS_plus_CSS Clock/script.js @@ -0,0 +1,61 @@ +/** + * Created by iraquitan on 12/12/16. + */ + +function secToDeg(s) { + return 90+(360*s/60); +} + +function minToDeg(m) { + return 90+(360*m/60); +} + +function hourToDeg(h) { + return 90+(360*h/12); +} + +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +for (var h of [hourHand, minuteHand, secondHand]) { + h.style.transition = 'all 2s'; + h.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)'; +} + +function setDate() { + // Turn off transition effects + for (var h of [hourHand, minuteHand, secondHand]) { + h.style.transition = 'none'; + } + const now = new Date(); + const hours = now.getHours() + (now.getMinutes() / 60); + const minutes = now.getMinutes() + (now.getSeconds() / 60); + const seconds = now.getSeconds(); + + if (seconds <= 0 || seconds >= 59) { + secondHand.style.transition = 'none'; + } else { + secondHand.style.transition = 'all 0.05s'; + secondHand.style.transitionTimingFunction = 'cubic-bezier(0.1, 3.5, 0.25, 1)'; + } + + hourHand.style.transform = `rotate(${hourToDeg(hours)}deg)`; + minuteHand.style.transform = `rotate(${minToDeg(minutes)}deg)`; + secondHand.style.transform = `rotate(${secToDeg(seconds)}deg)`; +} + +function initClock() { + const now = new Date(); + const hours = now.getHours() + (now.getMinutes() / 60); + const minutes = now.getMinutes() + (now.getSeconds() / 60); + const seconds = now.getSeconds(); + + hourHand.style.transform = `rotate(${hourToDeg(hours)}deg)`; + minuteHand.style.transform = `rotate(${minToDeg(minutes)}deg)`; + secondHand.style.transform = `rotate(${secToDeg(seconds)}deg)`; + + setTimeout(setInterval.bind(null, setDate, 1000), 1000); +} + +setTimeout(initClock, 0); \ No newline at end of file diff --git a/02 - JS_plus_CSS Clock/sounds/tick.mp3 b/02 - JS_plus_CSS Clock/sounds/tick.mp3 new file mode 100644 index 0000000000..5e714310c7 Binary files /dev/null and b/02 - JS_plus_CSS Clock/sounds/tick.mp3 differ diff --git a/02 - JS_plus_CSS Clock/style.css b/02 - JS_plus_CSS Clock/style.css new file mode 100644 index 0000000000..aa90202906 --- /dev/null +++ b/02 - JS_plus_CSS Clock/style.css @@ -0,0 +1,57 @@ +html { + background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50); + background-size:cover; + font-family:'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + 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); +} + +.hour-hand { + width:25%; + left:25%; +} + +.second-hand { + height: 3px; + background: crimson; +} \ No newline at end of file