Nerajno · Nerajno · Aug 11, 2017 · Aug 11, 2017 · Aug 11, 2017 · Aug 11, 2017
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 node_modules/
 *.log
 haters/
+.idea/
diff --git a/01 - JavaScript Drum Kit/background.jpg b/01 - JavaScript Drum Kit/background.jpg
diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <title>JS Drum Kit</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://fav.farm/✅" />
 </head>
 <body>
 

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <title>JS Drum Kit</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://fav.farm/🔥" />
 </head>
 <body>
 

diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum Kit/sounds/tink.wav
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -1,50 +1,51 @@
 html {
   font-size: 10px;
-  background:url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3Ehttp://i.imgur.com/b9r5sEL%3C/span%3E.jpg) bottom center;
+  background: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E'./background%3C/span%3E.jpg%3Cspan%20class=%22x%20x-first%20x-last%22%3E'%3C/span%3E) bottom center;
   background-size: cover;
 }
+
 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 black;
+  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: white;
+  background: rgba(0,0,0,0.4);
+  text-shadow: 0 0 .5rem black;
 }
 
 .playing {
-  transform:scale(1.1);
-  border-color:#ffc600;
-  box-shadow: 0 0 10px #ffc600;
+  transform: scale(1.1);
+  border-color: #ffc600;
+  box-shadow: 0 0 1rem #ffc600;
 }
 
 kbd {
   display: block;
-  font-size: 40px;
+  font-size: 4rem;
 }
 
 .sound {
   font-size: 1.2rem;
   text-transform: uppercase;
-  letter-spacing: 1px;
-  color:#ffc600;
+  letter-spacing: .1rem;
+  color: #ffc600;
 }
diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html
diff --git a/02 - JS + CSS Clock/index-FINISHED.html → 02 - JS and CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html → 02 - JS and CSS Clock/index-FINISHED.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>JS + CSS Clock</title>
+  <link rel="icon" href="https://fav.farm/✅" />
 </head>
 <body>
 
@@ -18,29 +19,30 @@
 
   <style>
     html {
-      background:#018DED url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3Ehttp%3C/span%3E://unsplash.it/1500/1000?image=881&blur=%3Cspan%20class=%22x%20x-first%20x-last%22%3E50%3C/span%3E);
-      background-size:cover;
-      font-family:'helvetica neue';
+      background: #018DED url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3Ehttps%3C/span%3E://unsplash.it/1500/1000?image=881&blur=%3Cspan%20class=%22x%20x-first%20x-last%22%3E5%3C/span%3E);
+      background-size: cover;
+      font-family: 'helvetica neue';
       text-align: center;
       font-size: 10px;
     }
 
     body {
+      margin: 0;
       font-size: 2rem;
-      display:flex;
-      flex:1;
+      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;
+      border: 20px solid white;
+      border-radius: 50%;
+      margin: 50px auto;
       position: relative;
-      padding:2rem;
+      padding: 2rem;
       box-shadow:
         0 0 0 4px rgba(0,0,0,0.1),
         inset 0 0 0 3px #EFEFEF,
@@ -56,11 +58,11 @@
     }
 
     .hand {
-      width:50%;
-      height:6px;
-      background:black;
+      width: 50%;
+      height: 6px;
+      background: black;
       position: absolute;
-      top:50%;
+      top: 50%;
       transform-origin: 100%;
       transform: rotate(90deg);
       transition: all 0.05s;
@@ -81,11 +83,11 @@
     secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
 
     const mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + 90;
+    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
     minsHand.style.transform = `rotate(${minsDegrees}deg)`;
 
     const hour = now.getHours();
-    const hourDegrees = ((mins / 12) * 360) + 90;
+    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
     hourHand.style.transform = `rotate(${hourDegrees}deg)`;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ @@
     node_modules/
     *.log
     haters/
+    .idea/