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

Zivi · Zivi · commit 3896cde1d3fa · 2017-01-02T11:00:36.000-08:00
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html
@@ -81,11 +81,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)`;
   }
 
diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html
diff --git a/03 - CSS Variables/index-FINISHED.html b/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">
diff --git a/03 - CSS Variables/index-START.html b/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">
diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html
@@ -81,8 +81,8 @@
     // 7. sort Exercise
     // Sort the people alphabetically by last name
     const alpha = people.sort((lastOne, nextOne) => {
-      const [aFirst, aLast] = lastOne.split(', ');
-      const [bFirst, bLast] = nextOne.split(', ');
+      const [aLast, aFirst] = lastOne.split(', ');
+      const [bLast, bFirst] = nextOne.split(', ');
       return aLast > bLast ? 1 : -1;
     });
     console.log(alpha);
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
@@ -30,9 +30,6 @@
     const year19 = year - 19;
     console.log('At least one person 19: ' + people.some(person => person.year < year19));
 
-    // Array.prototype.every() // is everyone 19?
-    console.log('Every person 19: ' + people.every(person => person.year < year19));
-
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Hold Shift to Check Multiple Checkboxes</title>
 </head>
 <body>
   <style>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Hold Shift to Check Multiple Checkboxes</title>
 </head>
 <body>
   <style>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -15,7 +15,7 @@
         <div class="progress__filled"></div>
        </div>
        <button class="player__button toggle" title="Toggle Play">►</button>
-       <input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
+       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
@@ -58,26 +58,6 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
-    const sliderImages = document.querySelectorAll('.slide-in');
-
-    function checkSlide(e) {
-      sliderImages.forEach(sliderImage => {
-        // half way through the image
-        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
-        // bottom of the image
-        const imageBottom = sliderImage.offsetTop + sliderImage.height;
-        const isHalfShown = slideInAt > sliderImage.offsetTop;
-        const isNotScrolledPast = window.scrollY < imageBottom;
-        if (isHalfShown && isNotScrolledPast) {
-          sliderImage.classList.add('active');
-        } else {
-          sliderImage.classList.remove('active');
-        }
-      });
-    }
-
-    window.addEventListener('scroll', debounce(checkSlide));
-
   </script>
 
   <style>
diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
@@ -57,18 +57,6 @@ <h1 class="speed">
     /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
   </style>
   <script>
-    const arrow = document.querySelector('.arrow');
-    const speed = document.querySelector('.speed-value');
-
-    navigator.geolocation.watchPosition((data) => {
-      console.log(data);
-      speed.textContent = data.coords.speed;
-      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
-    }, (err) => {
-      console.err(err);
-      alert('HEY! YOU GOTTA ALLOW THAT TO HAPPEN!!!');
-    });
-
   </script>
 </body>
 </html>
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
@@ -54,20 +54,7 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-  const nav = document.querySelector('#main');
-  const topOfNav = nav.offsetTop;
-
-  function fixNav() {
-    if(window.scrollY >= topOfNav) {
-      document.body.style.paddingTop = nav.offsetHeight + 'px';
-      document.body.classList.add('fixed-nav');
-    } else {
-      document.body.style.paddingTop = 0;
-      document.body.classList.remove('fixed-nav');
-    }
-  }
-
-  window.addEventListener('scroll', fixNav);
+
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
@@ -23,10 +23,6 @@ body {
   transition: transform 0.5s;
 }
 
-.fixed-nav .site-wrap {
-  transform: scale(1);
-}
-
 header {
   text-align: center;
   height:50vh;
@@ -52,11 +48,6 @@ nav {
   z-index: 1;
 }
 
-.fixed-nav nav {
-  position: fixed;
-  box-shadow: 0 5px rgba(0,0,0,0.1)
-}
-
 nav ul {
   margin: 0;
   padding:0;
@@ -81,10 +72,6 @@ li.logo {
   font-size: 30px;
 }
 
-.fixed-nav li.logo {
-  max-width:500px;
-}
-
 li.logo a {
   color:black;
 }
diff --git a/27 - Click and Drag/style.css b/27 - Click and Drag/style.css
@@ -31,6 +31,7 @@ body {
   cursor: pointer;
   transition: all 0.2s;
   transform: scale(0.98);
+  will-change: transform;
   position: relative;
   background: rgba(255,255,255,0.1);
   font-size: 0;
