diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..4ad13c9c9f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,65 +1,64 @@ - - JS Drum Kit - + + JS Drum Kit + +
+
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+
-
-
- 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/scripts.js b/01 - JavaScript Drum Kit/scripts.js new file mode 100644 index 0000000000..830a6eb336 --- /dev/null +++ b/01 - JavaScript Drum Kit/scripts.js @@ -0,0 +1,28 @@ +/******************************************** + * Call functions on Window Event Listener +********************************************/ +function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + + // stop the function from running all together + if (!audio) return; + + // Rewinds audio file to start + audio.currentTime = 0; + + // Plays audio file + audio.play(); + key.classList.add('playing'); +} + +function removeTransition(e) { + // skip if it's not a transform + if(e.propertyName !== 'transform') return; + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + +window.addEventListener('keydown', playSound); \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 0673a8752a..42b7ab3ae3 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -49,3 +49,14 @@ kbd { letter-spacing: .1rem; color: #ffc600; } + +.keywrap { + display: flex; + justify-content: center; +} + +@media (max-width: 950px) { + .keywrap { + flex-wrap: wrap; + } +} diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..99da02af8d 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,20 @@ - - JS + CSS Clock + + JS + CSS Clock + +
+
+
+
+
+
+
-
-
-
-
-
-
-
- - - - - + diff --git a/02 - JS and CSS Clock/scripts.js b/02 - JS and CSS Clock/scripts.js new file mode 100644 index 0000000000..3c40c35424 --- /dev/null +++ b/02 - JS and CSS Clock/scripts.js @@ -0,0 +1,27 @@ +/******************************************** + * Call functions on Window Event Listener +********************************************/ +const secondHand = document.querySelector('.second-hand'); +const minsHand = document.querySelector('.min-hand'); +const hourHand = document.querySelector('.hour-hand'); + + +function setDate() { + const now = new Date(); + const seconds = now.getSeconds(); + const secondsDegrees = ((seconds / 60) * 360) + 90; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + // console.log(seconds); + + const mins = now.getMinutes(); + const minsDegrees = ((mins / 60) * 360) + 90; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + // console.log(minutes); + + const hours = now.getHours(); + const hoursDegrees = ((hours / 12) * 360) + 90; + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; + // console.log(hours); + +} +setInterval(setDate, 1000); diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..08e9da8704 --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,50 @@ +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 { + 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) +} \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..0f832e90fa 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,27 @@ - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS + -

Update CSS Variables with JS

+

Update CSS Variables with JS

-
- - +
+ + - - + + - - -
+ + +
- + - - - + diff --git a/03 - CSS Variables/scripts.js b/03 - CSS Variables/scripts.js new file mode 100644 index 0000000000..05f6e05df2 --- /dev/null +++ b/03 - CSS Variables/scripts.js @@ -0,0 +1,15 @@ +const inputs = document.querySelectorAll('.controls input'); + +function handleUpdate(params) { + // console.log(this.value); + + const suffix = this.dataset.sizing || ''; + // console.log(suffix); + + // console.log(this.name); + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); +} + +inputs.forEach(input => input.addEventListener('change', handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); + diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..6880ec8eb8 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,41 @@ +/* + misc styles, nothing to do with CSS variables +*/ +:root { + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} + +img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); +} + +.hl { + color: var(--base); +} + +#base { + margin: 0; + padding: 0; + border: none; +} + +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +.controls { + margin-bottom: 50px; +} + +input { + width: 100px; +} \ No newline at end of file