diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..079bfdc5f9 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    if(!audio) return; // stops the function from running all together
+    audio.currentTime = 0;   // rewinds to the start of the audio
+    audio.play();
 
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    key.classList.add('playing');
+  };
+
+  function removeTransition(e) {
+    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);
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
index 246639f990..cb1a5ed038 100644
--- a/01 - JavaScript Drum Kit/index.html	
+++ b/01 - JavaScript Drum Kit/index.html	
@@ -6,8 +6,7 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
-
+  <!--Testing-->
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
@@ -58,8 +57,6 @@
   <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}"]`);
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..3e7087bca8 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -5,7 +5,7 @@
   <title>JS + CSS Clock</title>
 </head>
 <body>
-
+  <!-- TODO: Fix the glitch when the clock goes around -->
 
     <div class="clock">
       <div class="clock-face">
@@ -61,12 +61,43 @@
       background:black;
       position: absolute;
       top:50%;
+      /*Default is typically 50%, but we are doing 100% so the pivot point on the x-axis is at the center*/
+      transform-origin: 100%;
+      /*This is the degrees with which the hand will tick*/
+      transform: rotate(90deg);
+      /*All of the hands will transition every .05s */
+      transition: all 0.05s;
+      /*This gives it the snappy tick tick tick of the clock hands*/
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
-  <script>
+  <script
+    // Grabs all of the HTML elements
+    const secondHand = document.querySelector('.second-hand');
+    const minHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
+
+    // This function goes through all of the time hands and sets the time with the
+    // amount of degrees that it should turn
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360 + 90);
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const mins = now.getMinutes();
+      const minsDegrees = ((mins / 60) * 360) + 90;
+      minHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+      const hour = now.getMinutes();
+      const hourDegrees = ((mins / 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+
+    }
 
+    setInterval(setDate, 1000);
 
   </script>
 </body>
