wesbos · emillind · Dec 11, 2016 · Dec 11, 2016 · Dec 12, 2016
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -58,7 +58,21 @@
  <audio data-key="76" src="sounds/tink.wav"></audio>

 <script>
+	const keys = document.querySelectorAll('.key');
+	// Remove playing class from key after transition has ended.
+	keys.forEach(key => key.addEventListener('transitionend', function(e) {
+		this.classList.remove('playing');
+	}));

+	// Listens for keystrokes and querys the corresponding button and audio.
+	window.addEventListener("keydown", function(e) {
+		var audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+		if (!audio) return;
+		var key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+		key.classList.add('playing')
+		audio.currentTime = 0; //Does not work in Safari
+		audio.play();
+	})
 </script>



diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -61,12 +61,31 @@
      background:black;
      position: absolute;
      top:50%;
+	  transform: rotate(90deg);
+	  transition-timing-function: ease-in-out;
+	  transform-origin: 100%;
+	  transition-duration: 0.1s;
    }

  </style>

  <script>
+  	const secondHand = document.querySelector(`.second-hand`);
+	const minuteHand = document.querySelector(`.min-hand`);
+	const hourHand = document.querySelector(`.hour-hand`);
+	function time() {
+		var date = new Date();
+		var seconds = 90 + date.getSeconds()*6
+		secondHand.style.transform = `rotate(${seconds}deg)`;

+		var minutes = 90 + date.getMinutes()*6
+		minuteHand.style.transform = `rotate(${minutes}deg)`;
+
+		var hours = 90 + date.getHours()*30
+		hourHand.style.transform = `rotate(${hours}deg)`;
+	}
+
+	setInterval(time, 1000);

  </script>
 </body>

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -22,6 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <style>

+	:root {
+		--base: yellow;
+		--spacing: 10px;
+		--blur: 10px;
+	}
+
+	img {
+		padding: var(--spacing);
+		background: var(--base);
+		filter: blur(var(--blur));
+	}
+
+	.hl {
+		color: var(--base);
+	}
    /*
      misc styles, nothing to do with CSS variables
    */
@@ -53,6 +68,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
  </style>

  <script>
+	function change() {
+		var suffix = this.dataset.sizing || '';
+		document.documentElement.style.setProperty(`--${this.name}`, (this.value+suffix));
+	}
+
+  	const inputs = document.querySelectorAll(`.controls input`);
+	inputs.forEach(input => input.addEventListener('input', change));
  </script>

 </body>