From 6f838c2ce4bc0ccc63f5b498c16e2fecf3aa23ab Mon Sep 17 00:00:00 2001
From: CrimsonPug <ikram.tuan.mustapha@gmail.com>
Date: Wed, 21 Dec 2016 10:22:20 -0500
Subject: [PATCH 1/5] practice makes perfect

---
 01 - JavaScript Drum Kit/index-FINISHED.html |  2 +-
 01 - JavaScript Drum Kit/index-START.html    | 17 +++++++
 02 - JS + CSS Clock/index-START.html         | 25 ++++++++++
 03 - CSS Variables/index-START.html          | 28 +++++++++--
 04 - Array Cardio Day 1/index-START.html     | 50 +++++++++++++++++++-
 05 - Flex Panel Gallery/index-START.html     | 35 +++++++++++++-
 06 - Type Ahead/index-START.html             | 41 ++++++++++++++++
 07 - Array Cardio Day 2/index-START.html     | 24 ++++++++++
 08 - Fun with HTML5 Canvas/index-START.html  | 45 ++++++++++++++++++
 9 files changed, 260 insertions(+), 7 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 1a16d0997c..7b29f4e6e9 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -67,10 +67,10 @@
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
     if (!audio) return;
-
     key.classList.add('playing');
     audio.currentTime = 0;
     audio.play();
+    key.classList.add('playing');
   }
 
   const keys = Array.from(document.querySelectorAll('.key'));
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..49fbda9913 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,24 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+ 
+  function 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');
+  };
+  
+  function removeTransition(e) {
+    if(e.propertyName !== 'transform') return;
+    this.classList.remove('playing');
+  }
 
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+ window.addEventListener('keydown',playSound);
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..94e845f2e4 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,37 @@
       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>
+  const secondHand = document.querySelector('.second-hand');
+  const minHand = document.querySelector('.min-hand');
+  const hourHand = document.querySelector('.hour-hand');
 
+  function setDate(){
+    const now = new Date();
+
+    const seconds = now.getSeconds();
+    const minutes = now.getMinutes();
+    const hours = now.getHours();
+
+    const secondsDegree = ((seconds/60) * 360)+90;
+    const minutesDegree = ((minutes/60) *360)+90;
+    const hoursDegree = ((hours/12) *360)+90;
+    
+    secondHand.style.transform = `rotate(${secondsDegree}deg)`;
+    minHand.style.transform = `rotate(${minutesDegree}deg)`;
+    hourHand.style.transform = `rotate(${hoursDegree}deg)`;
+    console.log(minutes);
+  }
+
+  setInterval(setDate,1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..bb049c3bc8 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,9 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    :root{
+      --base:#ffc600;
+      --spacing:50px;
+      --blur:10px;
+    }
+
+    img {
+      padding: var(--spacing); 
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl {
+      color: var(--base);
+    }
 
     body {
       text-align: center;
@@ -48,6 +60,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const input = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix);
+    }
+    
+    input.forEach(input => input.addEventListener('change',handleUpdate));
+    input.forEach(input => input.addEventListener('mousemove',handleUpdate));
+
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..12fa6e1dc0 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,28 +33,74 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(investor =>{
+      if (investor.year >= 1500 && investor.year <1600){
+        console.log(investor)
+      }
+    })
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const fullName = console.log(inventors.map(inventor => inventor.first + ' ' + inventor.last))
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    // const ordered = inventors.sort(function(firstPerson,secondPerson){
+    //   if(firstPerson.year > secondPerson.year){
+    //     return 1;
+    //   } else {
+    //     return -1;
+    //   }
+    // });
+    const ordered = inventors.sort((a,b) => a.year>b.year ? 1:-1);
+    console.table(ordered)
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
-
+    const totalYear = inventors.reduce((total,inventor)=>{
+      return total + (inventor.passed - inventor.year);
+    },0);
+    console.log(totalYear)
     // 5. Sort the inventors by years lived
+    // const oldest =  inventors.sort((a,b) => (a.passed - a.year)>(b.passed>b.year) ? 1:-1);
+    // console.table(oldest);
+
+    const oldest = inventors.sort(function(a, b) {
+      const lastInventor = a.passed - a.year;
+      const nextInventor = b.passed - b.year;
+      return lastInventor > nextInventor ? -1 : 1;
+    });
+    console.table(oldest);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    // const category = document.querySelector('.mw-category');
+    // const list  = Array.from(category.querySelectorAll('a'));
 
-
+    // const de = list
+    //               .map(link => link.textContent)
+    //               .filter(streetName => streetName.includes('de'));
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alpha = people.sort(function(lastOne,nextOne){
+      const [aLast,aFirst] = lastOne.split(', ')
+      const [bLast,bFirst] = nextOne.split(', ')
+
+      return aLast > bLast ? 1:-1;
+    })
 
+    console.log(alpha)
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+    const transportation = data.reduce(function(obj,item){
+      if (!obj[item]){
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj
+    },{});
+    console.log(transportation)
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..c880931abc 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display:flex;
     }
 
     .panel {
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex:1;
+      justify-content: center;
+      align-items:center;
+      display:flex;
+      flex-direction: column;
     }
 
 
@@ -49,13 +55,23 @@
     .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
-
+    /* Flex-items*/
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content:center;
+      align-items: center;
     }
 
+    .panel > *:first-child {transform: translateY(-100%);}
+    .panel.open-active > *:first-child {transform: translateY(0);}
+    .panel > *:last-child {transform: translateY(100%);}
+    .panel.open-active > *:last-child {transform: translateY(0);}
+
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -68,6 +84,7 @@
 
     .panel.open {
       font-size:40px;
+      flex:5;
     }
 
     .cta {
@@ -108,6 +125,22 @@
 
   <script>
 
+  const panels = document.querySelectorAll('.panel');
+
+  function toggleOpen(){
+    this.classList.toggle('open');
+  }
+
+  function toggleActive(e){
+    console.log(e.propertyName);
+    if (e.propertyName.includes('flex')){
+      this.classList.toggle('open-active')
+    }
+  }
+
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+  panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
   </script>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..7b8e72d62e 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,6 +16,47 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const cities = [];
+
+fetch (endpoint)
+.then(blob => blob.json())
+.then(data => cities.push(...data));
+
+function findMatches(wordToMatch,cities){
+  return cities.filter(place =>{
+    const regex = new RegExp(wordToMatch,'gi');
+    return place.city.match(regex) || place.state.match(regex)
+  })
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function displayMatch(){
+  const matchArray = findMatches(this.value,cities);
+  const html = matchArray.map(place => {
+    const regex = new RegExp(this.value, 'gi');
+    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+
+    return `
+      <li>
+        <span class="name">${cityName}, ${stateName}</span>
+        <span class="population">${numberWithCommas(place.population)}</span>
+      </li>
+    `;
+  }).join(''); 
+  suggestionsInput.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestionsInput = document.querySelector('.suggestions');
+
+searchInput.addEventListener('keyup', displayMatch);
+suggestionsInput.addEventListener('change', displayMatch);
+
+
 
 </script>
   </body>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..8d8d7d750c 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,39 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    // const isAdult = people.some(function(person){
+    //   const currentYear = (new Date()).getFullYear();
+    //   if (currentYear - person.year >= 19){
+    //     return true
+    //   }
+    // })
+    const isAdult = people.some((person)=>{
+      return (new Date().getFullYear()) - person.year >= 19;
+    })
+    // console.log(isAdult)
+  
     // Array.prototype.every() // is everyone 19?
+    const allAdult = people.every((person)=>{
+      return (new Date().getFullYear()) - person.year >= 19;
+    })
+    console.log(allAdult)
 
     // 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
+    const findComment = comments.find((comment)=>{
+      return comment.id === 823423;
+    });
+    console.log(findComment)
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const deleteComment = comments.findIndex((comment)=>{
+      return comment.id === 2039842;
+    });
+    console.log(deleteComment)
+    comments.splice(deleteComment,1)
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..ec18b4264d 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,51 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+  const canvas = document.querySelector('#draw')
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  ctx.strokeStyle = '#BADA55';
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  ctx.lineWidth = 10;
+  ctx.globalCompositeOperation = 'multiply';
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let direction = true;
+
+  function draw(e){
+    if (!isDrawing) return;
+    console.log(e);
+    ctx.strokeStyle = `hsl(${hue},100%, 50%)`;
+    ctx.beginPath();
+    ctx.moveTo(lastX,lastY);
+    ctx.lineTo(e.offsetX,e.offsetY);
+    ctx.stroke();
+    [lastX,lastY] = [e.offsetX,e.offsetY];
+    hue++;
+    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1){
+      direction = !direction;
+    }
+    if (direction){
+      ctx.lineWidth++;
+    } else {
+      ctx.lineWidth--;
+    }
+  }
+
+  canvas.addEventListener('mousedown', (e)=> {
+    isDrawing = true;
+    [lastX,lastY] = [e.offsetX,e.offsetY];
+
+    });
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mouseup', ()=> isDrawing = false);
+  canvas.addEventListener('mouseout', ()=> isDrawing = false);
+
 </script>
 
 <style>

From cfc2cf09ed4188f0922f80248337ac6b84e38d4d Mon Sep 17 00:00:00 2001
From: CrimsonPug <ikram.tuan.mustapha@gmail.com>
Date: Wed, 21 Dec 2016 13:31:37 -0500
Subject: [PATCH 2/5] dev tool acquired

---
 09 - Dev Tools Domination/index-START.html | 34 +++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..59001e78f4 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,60 @@
     }
 
     // Regular
+    console.log('Hello');
 
     // Interpolated
+    console.log('Hello, I am a %s string', 'poop')
 
     // Styled
+    // console.log('%c I am a big a text', 'font-size:50px; text-shadow: 10px 10px 0 blue')
 
     // warning!
-
+    console.warn('Oh Noooo!')
     // Error :|
+    console.error('Shitto!')
 
     // Info
+    console.info('DOOM Multiplayer requires super reflex to suceed')
 
     // Testing
+    const p = document.querySelector('p');
+    console.assert(p.classList.contains('x'), 'Try again MOFO!')
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    console.log(p);
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog =>{
+      console.group(`${dog.name}`);
+      console.log(`Art thou ${dog.name}`);
+      console.log(`${dog.name} is ${dog.age} years old`);
+      console.groupEnd(`${dog.name}`);
+    })
 
     // counting
+    console.count('Goku');
+    console.count('Vegeta');
+    console.count('Goku');
+    console.count('Vegeta');
+    console.count('Vegeta');
+    console.count('Vegeta');
+    console.count('Goku');
+    console.count('Goku');
+    console.count('Goku');
 
     // timing
+    console.time('fetching data');
+    fetch('https://github.com/CrimsonPug')
+    .then(data => data.json())
+    .then(data =>{
+      console.timeEnd(data);
+      console.log(data);
+    })
 
   </script>
 </body>

From bfe10afd576c90fa30f9e3ce412b02526cf7339f Mon Sep 17 00:00:00 2001
From: CrimsonPug <ikram.tuan.mustapha@gmail.com>
Date: Thu, 22 Dec 2016 09:51:01 -0500
Subject: [PATCH 3/5] checking boxes

---
 .../index-START.html                          | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..26286083ae 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,29 @@
   </div>
 
 <script>
+
+  const multipleCheck = document.querySelectorAll('.inbox input[type = "checkbox"]');
+
+  let lastChecked;
+
+  function handleCheck(e){
+    let inBetween = false;
+    if (e.shiftKey && this.checked){
+      multipleCheck.forEach(checkBox => {
+        // console.log(checkBox);
+        if (checkBox === this || checkBox === lastChecked){
+          inBetween = !inBetween;
+          // console.log('Finally checking it');
+        }
+        if (inBetween){
+          checkBox.checked = true;
+        }
+      })
+    }
+    lastChecked = this;
+  }
+  multipleCheck.forEach(checkBox => checkBox.addEventListener(`click`,handleCheck));
+
 </script>
 </body>
 </html>

From cbb7008ef06920dab1b62881f63fe3b15804a162 Mon Sep 17 00:00:00 2001
From: CrimsonPug <ikram.tuan.mustapha@gmail.com>
Date: Sat, 24 Dec 2016 12:32:55 -0500
Subject: [PATCH 4/5] secret keycode

---
 11 - Custom Video Player/index.html          |  3 +
 11 - Custom Video Player/scripts.js          | 66 ++++++++++++++++++++
 12 - Key Sequence Detection/index-START.html | 12 ++++
 3 files changed, 81 insertions(+)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index fe2b55b394..9649c20b96 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,6 +19,9 @@
        <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>
+       <button class="player__button">
+          L
+        </button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..9d1ee6372b 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,66 @@
+//grabbing the elements
+
+const player = document.querySelector('.player');
+const video = document.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+//making the function
+
+function togglePlay() {
+    const method = video.paused ? 'play': 'pause'; 
+    video[method](); 
+}
+
+function updateVideo(){
+    const icon = this.paused ? '►':'❚ ❚';
+    toggle.textContent = icon;
+}
+
+function skip(){
+    // console.log(this.dataset.skip);
+    video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+    video[this.name] = this.value;
+}
+
+function handleProgress(){
+    const percentage = (video.currentTime / video.duration) * 100;
+    progressBar.style.flexBasis = `${percentage}%`;
+}
+
+function scrub(e){
+    console.log(e);
+    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+    video.currentTime = scrubTime;
+}
+
+//hooking up the function yo
+
+video.addEventListener('click',togglePlay);
+video.addEventListener('play',updateVideo);
+video.addEventListener('pause',updateVideo);
+toggle.addEventListener('click',togglePlay);
+
+skipButtons.forEach(buttons => {
+    buttons.addEventListener('click',skip);
+});
+ranges.forEach(range =>{
+    range.addEventListener('change',handleRangeUpdate);
+});
+ranges.forEach(range =>{
+    range.addEventListener('mousemove',handleRangeUpdate);
+});
+
+video.addEventListener('timeupdate',handleProgress);
+
+let mousedown = false;
+progress.addEventListener('click',scrub);
+progress.addEventListener('mousemove',(e)=> mousedown && scrub(e));
+progress.addEventListener('mousedown',()=> mousedown = true);
+progress.addEventListener('mouseup',()=> mousedown = false);
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..fb9200b30f 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+
+const pressed = [];
+const secretCode = 'ikram'
+window.addEventListener('keyup',(e)=>{
+  pressed.push(e.key);
+  pressed.splice(-secretCode - 1, pressed.length - secretCode.length);
+  if (pressed.join('').includes(secretCode)){
+    console.log('You got it!');
+    cornify_add();
+  }
+  console.log(pressed)
+})
 </script>
 </body>
 </html>

From e4b66a07c448da762622e7b79ac68c798fce118d Mon Sep 17 00:00:00 2001
From: CrimsonPug <ikram.tuan.mustapha@gmail.com>
Date: Sun, 25 Dec 2016 12:46:54 -0500
Subject: [PATCH 5/5] scroll

---
 13 - Slide in on Scroll/index-START.html | 29 ++++++++++++------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 12591bad30..73a02d68a5 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -60,24 +60,25 @@ <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;
+    function checkSlide(e){
+      //half image
+      sliderImages.forEach(slideImage =>{
+        const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height/2;
+        //bottom of the image
+        const imageBottom = slideImage.offsetTop + slideImage.height;
+        const isHalfShown = slideInAt > slideImage.offsetTop;
+        // console.log(isHalfShown);
         const isNotScrolledPast = window.scrollY < imageBottom;
+        console.log(isNotScrolledPast);
         if (isHalfShown && isNotScrolledPast) {
-          sliderImage.classList.add('active');
-        } else {
-          sliderImage.classList.remove('active');
+          slideImage.classList.add('active');
+        }else{
+          slideImage.classList.remove('active');
         }
-      });
+      }); 
     }
 
-    window.addEventListener('scroll', debounce(checkSlide));
-
+    window.addEventListener('scroll',debounce(checkSlide));
   </script>
 
   <style>