Finished JS30 exercise wesbos#11 - wesbos#18.

amnrzv · amnrzv · commit ba1e8252a778 · 2018-03-30T22:34:49.000+01:00
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 
-   <div class="player">
+  <div class="player">
      <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
 
      <div class="player__controls">
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,54 @@
+/* Get elements */
+const player = document.querySelector(".player");
+const video = player.querySelector(".viewer");
+const progress = player.querySelector(".progress");
+const progressBar = player.querySelector(".progress__filled");
+const toggle = player.querySelector(".toggle");
+const skipBtns = player.querySelectorAll("[data-skip]");
+const sliders = player.querySelectorAll(".player__slider");
+
+/* Functions and logic */
+function togglePlay(e) {
+    if (video.paused) {
+        video.play();
+    } else {
+        video.pause();
+    }
+}
+
+function updateBtn() {
+    toggle.textContent = this.paused ? "▶" : "❚❚";
+}
+
+function skip() {
+    const skipValue = this.dataset.skip;
+    video.currentTime += parseFloat(skipValue);
+}
+
+function handleRangeUpdate() {
+    video[this.name] = this.value;
+}
+
+function scrub(e) {
+    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+    video.currentTime = scrubTime;
+}
+
+function handleProgressBar() {
+    const percent = (video.currentTime / video.duration) * 100;
+    progressBar.style.flexBasis = `${percent}%`;
+}
+
+/* Event listeners */
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateBtn);
+video.addEventListener('pause', updateBtn);
+video.addEventListener('timeupdate', handleProgressBar);
+
+progress.addEventListener('click', scrub);
+
+toggle.addEventListener('click', togglePlay);
+
+skipBtns.forEach(btn => btn.addEventListener('click', skip));
+
+sliders.forEach(slider => slider.addEventListener('change', handleRangeUpdate));
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
@@ -99,9 +99,9 @@ body {
 
 .progress__filled {
   width:50%;
-  background:#ffc600;
+  background:#ad0a04;
   flex:0;
-  flex-basis:50%;
+  flex-basis:0%;
 }
 
 /* unholy css to style input type="range" */
@@ -148,7 +148,7 @@ input[type=range]::-moz-range-track {
 }
 input[type=range]::-moz-range-thumb {
   box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
-  height: 15px;
+  height: 5px;
   width: 15px;
   border-radius: 50px;
   background: #ffc600;
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+  const keys = [];
+  const matchWord = 'amaan';
+  window.addEventListener('keyup', (e) => {
+    keys.push(e.key);
+    keys.splice(-matchWord.length - 1, keys.length - matchWord.length);
+    console.log(keys);
+    
+    if (keys.join('').includes(matchWord)) {
+      cornify_add();
+      console.log("tada");
+    }
+  })
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -15,8 +15,10 @@
     // and we want to make a copy of it.
 
     // You might think we can just do something like this:
+    //const team = players;
 
     // however what happens when we update that array?
+    //team[2] = 'Jon';
 
     // now here is the problem!
 
@@ -27,10 +29,15 @@
     // So, how do we fix this? We take a copy instead!
 
     // one way
+    team2 = players.slice();
 
     // or create a new array and concat the old one in
+    team3 = [].concat(players);
 
     // or use the new ES6 Spread
+    team4 = [...players];
+
+    team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
@@ -43,13 +50,35 @@
     };
 
     // and think we make a copy:
+    const man1 = person;
+    man1.age = 20;
+    console.log(person, man1);
 
     // how do we take a copy instead?
+    const man2 = Object.assign({}, person, {age : 45});
+    console.log(person, man2);
 
     // We will hopefully soon see the object ...spread
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
 
+    // Poor man's cloneDeep
+    const guy = {
+      name : 'He Man',
+      details : {
+        number : [
+          9878382782,
+          8391738172
+        ],
+        email: "he@man.com",
+        facebook: "he.man"
+      }
+    }
+
+    const newGuy = JSON.parse(JSON.stringify(guy));
+    newGuy.details.email = "new@guy.com";
+    console.log(guy, newGuy);
+
   </script>
 
 </body>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -28,8 +28,49 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem("items")) || [];
 
+  addItems.addEventListener('submit', addItemToList);
+  itemsList.addEventListener('click', checkboxEvent);
+
+  function addItemToList(e) {
+    e.preventDefault();
+    name = (this.querySelector('[name=item]')).value;
+    item = {
+      name,
+      done: false
+    };
+
+    items.push(item);
+    save();
+    this.reset();
+  }
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map((plate, i) => {
+      return `
+      <li>
+        <input type="checkbox" id="item${i}" data-index=${i} ${plate.done ? 'checked' : ''}/>
+        <label for="item${i}">${plate.name}</label>
+      </li>
+      `;
+    }).join('');
+  }
+
+  function save() {
+    localStorage.setItem("items", JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  function checkboxEvent(e) {
+    if (!e.target.matches('input')) return;
+    const el = e.target;
+    const index = el.dataset.index;
+    items[index].done = !items[index].done;
+    save();
+  }
+
+  populateList(items, itemsList);
 </script>
 
 
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
@@ -35,6 +35,31 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const h1 = hero.querySelector('h1');
+  const maxOffset = 120;
+  const shadowColor = 'rgba(150, 50, 120, 0.4)';
+  h1.style.textShadow = `0px 0px 0px ${shadowColor}`;
+
+  hero.addEventListener('mousemove', moveShadow);
+
+  function moveShadow(e) {
+    const {offsetWidth : width, offsetHeight : height} = hero;
+    let {offsetX : x, offsetY : y} = e;
+
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    const xWalk = Math.round((x/width * maxOffset) - (maxOffset/2));
+    const yWalk = Math.round((y/height * maxOffset) - (maxOffset/2));
+    const blur = (Math.abs(xWalk) + Math.abs(yWalk))/(maxOffset) * 40;
+    console.log(xWalk, yWalk);
+
+    h1.style.textShadow = `${-xWalk}px ${-yWalk}px ${blur}px ${shadowColor}`;
+  }
+
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Sort Without Articles</title>
 </head>
+
 <body>
 
   <style>
@@ -26,10 +28,12 @@
       padding: 0;
       box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
     }
+
     #bands li {
       border-bottom: 1px solid #efefef;
       padding: 20px;
     }
+
     #bands li:last-child {
       border-bottom: 0;
     }
@@ -38,16 +42,28 @@
       color: #ffc600;
       text-decoration: none;
     }
-
   </style>
 
   <ul id="bands"></ul>
 
-<script>
-const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  <script>
+    const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled',
+      'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive',
+      'Anywhere But Here', 'An Old Dog'
+    ];
+
+    function strip(bandName) {
+      return bandName.replace(/^(a|the|an)\s/i, '');;
+    }
 
+    const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
 
-</script>
+    document.querySelector('#bands').innerHTML = 
+      sortedBands
+        .map(band => `<li>${band}</li>`)
+        .join('');
+  </script>
 
 </body>
-</html>
+
+</html>
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Videos</title>
 </head>
+
 <body>
   <ul class="videos">
     <li data-time="5:43">
@@ -177,11 +179,28 @@
     <li data-time="1:56">
       Video 57
     </li>
-    <li data-time="4:04">
+    <li data-time="6:06">
       Video 58
     </li>
   </ul>
-<script>
-</script>
+  <script>
+    listItems = document.querySelectorAll('li');
+    listArray = [...listItems];
+    const totalTime = listArray.reduce((total, item) => {
+      const [minute, seconds] = item.dataset.time.split(':').map(parseFloat);
+      return total += minute * 60 + seconds;
+    }, 0);
+
+    const totalSecs = totalTime % 60;
+    let totalMins = Math.floor(totalTime / 60);
+    let totalHrs = 0;
+    if (totalMins >= 60) {
+      totalHrs = Math.floor(totalMins / 60);
+      totalMins = Math.floor(totalMins % 60);
+    }
+
+    console.log(`${totalHrs}:${totalMins}:${totalSecs}`);
+  </script>
 </body>
-</html>
+
+</html>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
