wesbos · ericbooker12 · Dec 10, 2016
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html → ...t Drum KitP_completed/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html → ...t Drum KitP_completed/index-FINISHED.html
diff --git a/01 - JavaScript Drum Kit/index.html → ...JavaScript Drum KitP_completed/index.html b/01 - JavaScript Drum Kit/index.html → ...JavaScript Drum KitP_completed/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -58,26 +58,28 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
-
   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
+    const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
+    const key = document.querySelector(`.key[data-key="${event.keyCode}"]`)
+    if(!audio) return;
+    audio.currentTime = 0; //Rewind to the start
     audio.play();
     key.classList.add('playing');
+    // key.classList.remove('playing');
   }
+
   function removeTransition(e) {
-    if (e.propertyName !== 'transform') return; // skip it if it's not a transform
-    this.classList.remove('playing');
+    if(e.propertyName !== 'transform') return //only listen for tranform
+    this.classList.remove('playing')
   }
 
   const keys = document.querySelectorAll('.key');
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition))
+
   window.addEventListener('keydown', playSound);
 
-</script>
+  </script>
+
 
 </body>
 </html>
diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav → ...cript Drum KitP_completed/sounds/boom.wav b/01 - JavaScript Drum Kit/sounds/boom.wav → ...cript Drum KitP_completed/sounds/boom.wav
diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav → ...cript Drum KitP_completed/sounds/clap.wav b/01 - JavaScript Drum Kit/sounds/clap.wav → ...cript Drum KitP_completed/sounds/clap.wav
diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav → ...ript Drum KitP_completed/sounds/hihat.wav b/01 - JavaScript Drum Kit/sounds/hihat.wav → ...ript Drum KitP_completed/sounds/hihat.wav
diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav → ...cript Drum KitP_completed/sounds/kick.wav b/01 - JavaScript Drum Kit/sounds/kick.wav → ...cript Drum KitP_completed/sounds/kick.wav
diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav → ...pt Drum KitP_completed/sounds/openhat.wav b/01 - JavaScript Drum Kit/sounds/openhat.wav → ...pt Drum KitP_completed/sounds/openhat.wav
diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav → ...cript Drum KitP_completed/sounds/ride.wav b/01 - JavaScript Drum Kit/sounds/ride.wav → ...cript Drum KitP_completed/sounds/ride.wav
diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav → ...ript Drum KitP_completed/sounds/snare.wav b/01 - JavaScript Drum Kit/sounds/snare.wav → ...ript Drum KitP_completed/sounds/snare.wav
diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav → ...cript Drum KitP_completed/sounds/tink.wav b/01 - JavaScript Drum Kit/sounds/tink.wav → ...cript Drum KitP_completed/sounds/tink.wav
diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav → ...Script Drum KitP_completed/sounds/tom.wav b/01 - JavaScript Drum Kit/sounds/tom.wav → ...Script Drum KitP_completed/sounds/tom.wav
diff --git a/01 - JavaScript Drum Kit/style.css → ... JavaScript Drum KitP_completed/style.css b/01 - JavaScript Drum Kit/style.css → ... JavaScript Drum KitP_completed/style.css
@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all .20s;
   width:100px;
   text-align: center;
   color:white;
@@ -34,6 +34,7 @@ body,html {
 .playing {
   transform:scale(1.1);
   border-color:#ffc600;
+  border-radius: 10%;
   box-shadow: 0 0 10px #ffc600;
 }
 

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
diff --git a/02 - JS + CSS Clock/index-FINISHED.html → ...+ CSS Clock_completed/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html → ...+ CSS Clock_completed/index-FINISHED.html
diff --git a/02 - JS + CSS Clock/index.html → 02 - JS + CSS Clock_completed/index.html b/02 - JS + CSS Clock/index.html → 02 - JS + CSS Clock_completed/index.html
@@ -64,33 +64,35 @@
       transform-origin: 100%;
       transform: rotate(90deg);
       transition: all 0.05s;
-      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+      transition-timing-function: cubic-bezier(0.25, 0, 0.15, 1.01);
     }
-</style>
 
-<script>
-  const secondHand = document.querySelector('.second-hand');
-  const minsHand = document.querySelector('.min-hand');
-  const hourHand = document.querySelector('.hour-hand');
+  </style>
 
-  function setDate() {
-    const now = new Date();
+  <script>
 
-    const seconds = now.getSeconds();
-    const secondsDegrees = ((seconds / 60) * 360) + 90;
-    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
-    const mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + 90;
-    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const minutes = now.getMinutes();
+      const hours = now.getHours();
 
-    const hour = now.getMinutes();
-    const hourDegrees = ((mins / 12) * 360) + 90;
-    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
-  }
+      const secondsDegrees = ((seconds/60) * 360) + 90;
+      const minutesDegrees = ((minutes/12) * 360) + 90;
+      const hoursDegrees = ((hours/60) * 360) + 90;
 
-  setInterval(setDate, 1000);
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`
+      console.log(hours, minutes, seconds)
+    }
+
+    setInterval(setDate, 1000);
 
-</script>
+  </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-FINISHED.html → ...S Variables_completed/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html → ...S Variables_completed/index-FINISHED.html
diff --git a/03 - CSS Variables/index-START.html → 03 - CSS Variables_completed/index.html b/03 - CSS Variables/index-START.html → 03 - CSS Variables_completed/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -12,10 +12,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
     <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+    <input type="range" name="blur" min="0" max="5" value="0" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input type="color" name="base" value="#0000ff">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -26,6 +26,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       misc styles, nothing to do with CSS variables
     */
 
+    :root {
+      --base: #BADA55;
+      --spacing: 10px;
+      --blur: 0px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl {
+      color: var(--base);
+    }
+
     body {
       text-align: center;
     }
@@ -53,7 +69,29 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll(`.controls input`);
+
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
   </script>
 
 </body>
 </html>
+
+
+
+
+
+
+
+
+
+
+
+