Merge branch 'master' of https://github.com/wesbos/JavaScript30

Author: John Walker

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 *.log
 haters/
+.idea/

01 - JavaScript Drum Kit/style.css

@@ -1,6 +1,6 @@
 html {
   font-size: 10px;
-  background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
+  background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
   background-size: cover;
 }
 body,html {
@@ -10,41 +10,41 @@ body,html {
 }
 
 .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;
 }

02 - JS + CSS Clock/index-FINISHED.html renamed to 02 - JS and CSS Clock/index-FINISHED.html

@@ -26,6 +26,7 @@
     }
 
     body {
+      margin: 0;
       font-size: 2rem;
       display:flex;
       flex:1;
@@ -81,11 +82,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 = ((hour / 12) * 360) + 90;
+    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
     hourHand.style.transform = `rotate(${hourDegrees}deg)`;
   }
 

02 - JS + CSS Clock/index-START.html renamed to 02 - JS and CSS Clock/index-START.html

@@ -26,6 +26,7 @@
     }
 
     body {
+      margin: 0;
       font-size: 2rem;
       display:flex;
       flex:1;

03 - CSS Variables/index-FINISHED.html

@@ -9,13 +9,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input id="spacing" 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 id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -43,9 +43,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
     body {
       text-align: center;
-    }
-
-    body {
       background: #193549;
       color: white;
       font-family: 'helvetica neue', sans-serif;

03 - CSS Variables/index-START.html

@@ -9,13 +9,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input id="spacing" 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 id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -28,9 +28,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
     body {
       text-align: center;
-    }
-
-    body {
       background: #193549;
       color: white;
       font-family: 'helvetica neue', sans-serif;

04 - Array Cardio Day 1/index-START.html

@@ -27,7 +27,7 @@
       { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
-    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's

05 - Flex Panel Gallery/index-FINISHED.html

@@ -86,11 +86,6 @@
       font-size:40px;
     }
 
-    .cta {
-      color:white;
-      text-decoration: none;
-    }
-
   </style>
 
 

05 - Flex Panel Gallery/index-START.html

@@ -70,11 +70,6 @@
       font-size:40px;
     }
 
-    .cta {
-      color:white;
-      text-decoration: none;
-    }
-
   </style>
 
 

06 - Type Ahead/style.css

@@ -66,20 +66,10 @@
       font-size: 15px;
     }
 
-
-    .details {
-      text-align: center;
-      font-size: 15px;
-    }
-
     .hl {
       background:#ffc600;
     }
 
-    .love {
-      text-align: center;
-    }
-
     a {
       color:black;
       background:rgba(0,0,0,0.1);