From cfe03fd6dd120f3075ff993f4895caf88d2c201e Mon Sep 17 00:00:00 2001
From: ttlekich <ttlekich@gmail.com>
Date: Tue, 14 Aug 2018 16:30:33 -0700
Subject: [PATCH 1/3] Start: 01

---
 01 - JavaScript Drum Kit/index-START.html | 4 +---
 01 - JavaScript Drum Kit/index.js         | 3 +++
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 01 - JavaScript Drum Kit/index.js

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..85de0afbfd 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -57,9 +57,7 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
-
-</script>
+<script src="index.js"></script>
 
 
 </body>
diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js
new file mode 100644
index 0000000000..2b3eb48e1d
--- /dev/null
+++ b/01 - JavaScript Drum Kit/index.js	
@@ -0,0 +1,3 @@
+window.addEventListener("keydown", (e) => {
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+});
\ No newline at end of file

From 740a935fcb6a61781976b0a83016f0dd5be41d63 Mon Sep 17 00:00:00 2001
From: ttlekich <ttlekich@gmail.com>
Date: Sat, 25 Aug 2018 14:21:55 -0700
Subject: [PATCH 2/3] JS30 Day1

---
 .../{index-START.html => index.html}          |  0
 01 - JavaScript Drum Kit/index.js             | 20 ++++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)
 rename 01 - JavaScript Drum Kit/{index-START.html => index.html} (100%)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index.html
similarity index 100%
rename from 01 - JavaScript Drum Kit/index-START.html
rename to 01 - JavaScript Drum Kit/index.html
diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js
index 2b3eb48e1d..f52fc4f9fd 100644
--- a/01 - JavaScript Drum Kit/index.js	
+++ b/01 - JavaScript Drum Kit/index.js	
@@ -1,3 +1,17 @@
-window.addEventListener("keydown", (e) => {
-  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
-});
\ No newline at end of file
+const playSound = e => {
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  if (!audio) return;
+  audio.currentTime = 0;
+  audio.play();
+  key.classList.add("playing");
+};
+
+const removeTransition = e => {
+  if (e.propertyName !== "transform") return;
+  e.target.classList.remove("playing");
+};
+
+const keys = document.querySelectorAll(".key");
+keys.forEach(key => key.addEventListener("transitionend", removeTransition));
+window.addEventListener("keydown", playSound);

From 650e576afcfa0251880b334a7eec6d81d7d0d677 Mon Sep 17 00:00:00 2001
From: ttlekich <ttlekich@gmail.com>
Date: Fri, 14 Sep 2018 15:06:56 -0500
Subject: [PATCH 3/3] Completed: JavaScript30 Day 2: CSS Clock

---
 02 - JS and CSS Clock/app.js     | 21 +++++++++
 02 - JS and CSS Clock/clock.html | 76 ++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 02 - JS and CSS Clock/app.js
 create mode 100644 02 - JS and CSS Clock/clock.html

diff --git a/02 - JS and CSS Clock/app.js b/02 - JS and CSS Clock/app.js
new file mode 100644
index 0000000000..3be0758d9d
--- /dev/null
+++ b/02 - JS and CSS Clock/app.js	
@@ -0,0 +1,21 @@
+const secondHand = document.querySelector('.second-hand');
+const minuteHand = 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)`;
+
+  const minutes = now.getMinutes();
+  const minutesDegrees = (minutes / 60) * 360 + 90;
+  minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+  const hours = now.getHours();
+  const hoursDegrees = (hours / 12) * 360 + 90;
+  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+}
+
+setInterval(setDate, 1000);
diff --git a/02 - JS and CSS Clock/clock.html b/02 - JS and CSS Clock/clock.html
new file mode 100644
index 0000000000..c4445b7626
--- /dev/null
+++ b/02 - JS and CSS Clock/clock.html	
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Clock</title>
+</head>
+
+<body>
+
+
+  <div class="clock">
+    <div class="clock-face">
+      <div class="hand hour-hand"></div>
+      <div class="hand min-hand"></div>
+      <div class="hand second-hand"></div>
+    </div>
+  </div>
+
+
+  <style>
+    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);
+    }
+  </style>
+  <script src="app.js"></script>
+</body>
+
+</html>
\ No newline at end of file