- A
- clap
+
+
-
+ A
+ clap
+
+
+
+
+
+
- S
- hihat
+
+
-
+ S
+ hihat
+
+
+
+
+
+
- D
- kick
+
+
-
+ D
+ kick
+
+
+
+
+
+
- F
- openhat
+
+
-
+ F
+ openhat
+
+
+
+
+
+
- G
- boom
+
+
-
+ G
+ boom
+
+
+
+
+
+
- H
- ride
+
+
-
+ H
+ ride
+
+
+
+
+
+
- J
- snare
+
+
-
+ J
+ snare
+
+
+
+
+
+
- K
- tom
+ Document
-
-
-
-
- Document
-
-
-
-
- Document
-
-
-
-
- JS + CSS Clock
+
+
+
+
+
+ Scoped CSS Variables and JS
-
-
- 
-
-
-
-
-
-
-
-
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html
similarity index 60%
rename from 03 - CSS Variables/index-START.html
rename to 03 - CSS Variables/index.html
index bf0f33e3ba..0f636fde03 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index.html
@@ -9,13 +9,13 @@
@@ -26,11 +26,20 @@
+
-
+ K
+ tom
+
+
+
+
+
+
- L
- tink
+
@@ -57,27 +120,7 @@
-
-
+
+
diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js
new file mode 100644
index 0000000000..806dd7ec7d
--- /dev/null
+++ b/01 - JavaScript Drum Kit/script.js
@@ -0,0 +1,59 @@
+const beatPeriod = 1000
+const tempoKeys = (new Array(9)).fill(0)
+const keys = Array.from(document.querySelectorAll('.key'))
+const audios = Array.from(document.querySelectorAll('audio'))
+
+let beat = 1
+let tempo = () => {
+ tempoKeys.forEach((key, idx) => {
+ // if the current key is set, play it if it matches the beat
+ if (key >= beat) {
+ keys[idx].classList.add('playing-' + beat)
+ audios[idx].currentTime = 0
+ audios[idx].play()
+ }
+ })
+
+ beat = beat % 3 + 1
+}
+
+Array.from(document.querySelectorAll('.key-container')).forEach(
+ (container, idx) => container.addEventListener('click', () => {
+ const spans = container.querySelectorAll('.key-repeat span')
+ let i = tempoKeys[idx]
+
+ // update key
+ if (i !== 0) {
+ spans[i - 1].classList.remove('active')
+ }
+
+ if (i !== 3) {
+ spans[i].classList.add('active')
+ // set key
+ tempoKeys[idx]++
+ } else {
+ // reset key
+ tempoKeys[idx] = 0
+ }
+ })
+)
+
+keys.forEach(
+ key => key.addEventListener('transitionend', e => {
+ if (e.propertyName !== 'transform') return
+
+ ['playing', 'playing-1', 'playing-2', 'playing-3'].forEach(
+ c => e.target.classList.remove(c)
+ )
+ })
+)
+
+window.addEventListener('keydown', e => {
+ const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+ if (!audio) return
+ audio.currentTime = 0
+ audio.play()
+
+ document.querySelector(`div[data-key="${e.keyCode}"]`).classList.add('playing')
+})
+window.setInterval(tempo, beatPeriod)
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..dbb965b841 100644
--- a/01 - JavaScript Drum Kit/style.css
+++ b/01 - JavaScript Drum Kit/style.css
@@ -1,50 +1,109 @@
+:root {
+ --color-primary: #FFC600;
+ --color-secondary: #00A0FF;
+ --color-ternary: #5CF2E8;
+ --color-quaternary: #F71E35;
+}
+
html {
font-size: 10px;
- background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
+ background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
background-size: cover;
}
-body,html {
+
+body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.keys {
- display:flex;
- flex:1;
- min-height:100vh;
+ display: flex;
+ flex: 1;
+ min-height: 100vh;
align-items: center;
justify-content: center;
}
.key {
- border:4px solid black;
- border-radius:5px;
- margin:1rem;
+ border: .4rem solid white;
+ border-radius: .5rem;
+ margin: 1rem;
font-size: 1.5rem;
- padding:1rem .5rem;
- transition:all .07s;
- width:100px;
+ padding: 1rem .5rem;
+ transition: all .07s ease;
+ width: 10rem;
text-align: center;
- color:white;
- background:rgba(0,0,0,0.4);
- text-shadow:0 0 5px black;
+ color: black;
+ background: rgba(255, 255, 255, 0.6);
+ text-shadow: 0 0 .5rem white;
+ cursor: pointer;
}
.playing {
- transform:scale(1.1);
- border-color:#ffc600;
- box-shadow: 0 0 10px #ffc600;
+ transform: scale(1.1);
+ border-color: var(--color-primary);
+ box-shadow: 0 0 1rem var(--color-primary);
+ background: var(--color-primary);
+ opacity: 0.6;
+}
+
+.playing-1 {
+ transform: scale(1.1);
+ border-color: var(--color-secondary);
+ box-shadow: 0 0 1rem var(--color-secondary);
+ background: var(--color-secondary);
+ opacity: 0.6;
+}
+
+.playing-2 {
+ transform: scale(1.1);
+ border-color: var(--color-ternary);
+ box-shadow: 0 0 1rem var(--color-ternary);
+ background: var(--color-ternary);
+ opacity: 0.6;
+}
+
+.playing-3 {
+ transform: scale(1.1);
+ border-color: var(--color-quaternary);
+ box-shadow: 0 0 1rem var(--color-quaternary);
+ background: var(--color-quaternary);
+ opacity: 0.6;
}
kbd {
display: block;
- font-size: 40px;
+ font-size: 4rem;
}
.sound {
font-size: 1.2rem;
+ font-weight: 600;
text-transform: uppercase;
- letter-spacing: 1px;
- color:#ffc600;
+ letter-spacing: .1rem;
+}
+
+.key-repeat {
+ width: 11rem;
+ margin: 1.4rem;
+ font-size: 0;
+}
+
+.key-repeat span {
+ height: 1.2rem;
+ width: 3.66rem;
+ display: inline-block;
+}
+
+.repeat-1.active {
+ background: var(--color-secondary);
+}
+
+.repeat-2.active {
+ background: var(--color-ternary);
+}
+
+.repeat-3.active {
+ background: var(--color-quaternary);
}
diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html
deleted file mode 100644
index 220faf779d..0000000000
--- a/02 - JS + CSS Clock/index-FINISHED.html
+++ /dev/null
@@ -1,98 +0,0 @@
-
-
-
-
-
+
+ L
+ tink
+
+
+
+
+
+
-
-
-
-
-
-
-
-
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
deleted file mode 100644
index 240705d8fe..0000000000
--- a/02 - JS + CSS Clock/index-START.html
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html
deleted file mode 100644
index d5c9ec9596..0000000000
--- a/02 - JS + CSS Clock/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html
new file mode 100644
index 0000000000..adf94efbd8
--- /dev/null
+++ b/02 - JS and CSS Clock/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
diff --git a/02 - JS and CSS Clock/script.js b/02 - JS and CSS Clock/script.js
new file mode 100644
index 0000000000..cc3efe55ac
--- /dev/null
+++ b/02 - JS and CSS Clock/script.js
@@ -0,0 +1,22 @@
+const secondHand = document.querySelector('.second-hand')
+const minsHand = document.querySelector('.min-hand')
+const hourHand = document.querySelector('.hour-hand')
+
+let setDate = () => {
+ const now = new Date()
+
+ const seconds = now.getSeconds()
+ const secondsDegrees = (seconds * 6) + 90
+ secondHand.style.transform = `rotate(${secondsDegrees}deg)`
+
+ const mins = now.getMinutes()
+ const minsDegrees = (mins * 6) + (seconds / 10) + 90
+ minsHand.style.transform = `rotate(${minsDegrees}deg)`
+
+ const hour = now.getHours()
+ const hourDegrees = (hour * 30) + (mins / 2) + 90
+ hourHand.style.transform = `rotate(${hourDegrees}deg)`
+}
+
+setInterval(setDate, 1000)
+setDate()
diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css
new file mode 100644
index 0000000000..efd51e3051
--- /dev/null
+++ b/02 - JS and CSS Clock/style.css
@@ -0,0 +1,61 @@
+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;
+ position: absolute;
+ top: 50%;
+ transform-origin: 100%;
+ transform: rotate(90deg);
+ transition: all 0.5s cubic-bezier(.22, .78, .44, 1.54);
+}
+
+.hour-hand {
+ background: red;
+}
+
+.min-hand {
+ background: black;
+}
+
+.second-hand {
+ background: #DDDDDD;
+}
diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
deleted file mode 100644
index 9401d7b339..0000000000
--- a/03 - CSS Variables/index-FINISHED.html
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-
-
-
+
+
+
+
+ Update CSS Variables with JS
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html
similarity index 60%
rename from 03 - CSS Variables/index-START.html
rename to 03 - CSS Variables/index.html
index bf0f33e3ba..0f636fde03 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index.html
@@ -9,13 +9,13 @@ Update CSS Variables with JS
-
+
-
+
-
+
@@ -26,11 +26,20 @@