From 939b012dc49728bdd41087cd30b6d39b6c1a8f3c Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:10:49 +0100
Subject: [PATCH 01/13] 01 done

---
 01 - JavaScript Drum Kit/index-START.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..000c558859 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,23 @@
 
 <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>
 
 

From 7a84d42a678930083d3351927eef65f09450a15d Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:10:56 +0100
Subject: [PATCH 02/13] 02 done

---
 02 - JS and CSS Clock/index-START.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..c4c63a2ea1 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,12 +62,34 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.5s;
+      transition-timing-function: ease-in-out;
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
+    function setDate() {
+        const now = new Date();
+        const seconds = now.getSeconds();
+        const secondsDegrees = ((seconds / 60) * 360)+90;
+        secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
 
+        const minutes = now.getMinutes();
+        const minutesDegrees = ((minutes / 60) * 360)+90;
+        minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+        const hours = now.getHours();
+        const hoursDegrees = ((hours / 12) * 360)+90;
+        hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    }
+
+    setInterval(setDate, 1000);
 
   </script>
 </body>

From e330fa7b2bd9a3505f5a1fc81439b4eae9e8ba93 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:11:02 +0100
Subject: [PATCH 03/13] 03 done

---
 03 - CSS Variables/index-START.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..034a5693dd 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+        --base: #ffc600;
+        --spacing: 10px;
+        --blur: 10px;
+    }
+
+    img {
+        padding: var(--spacing);
+        background: var(--base);
+        filter: blur(var(--blur));
+    }
 
+    .hl {
+        color: var(--base);
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -48,6 +62,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+    function handleUpdate () {
+        const suffix = this.dataset.sizing || '';
+        document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>

From 80bc5db46e504f4c4f84b932b4eb4d29a8007c10 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:11:09 +0100
Subject: [PATCH 04/13] 04 done

---
 04 - Array Cardio Day 1/index-START.html | 36 ++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..6198672f70 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,64 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const inventors_born_in_1500s = inventors.filter(i => i.year >= 1500 && i.year < 1600);
+
+    console.table(inventors_born_in_1500s);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const inventor_names = inventors.map(i => {
+      return {first: i.first, last: i.last}
+    });
 
+    console.table(inventor_names);
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+    const inventors_sorted = inventors.sort((a, b) => a.year - b.year);
+
+    console.table(inventors_sorted);
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const all_years_lived = inventors.reduce((acc, val) => {
+      return acc + (val.passed - val.year);
+    }, 0);
 
+    console.log(all_years_lived);
     // 5. Sort the inventors by years lived
 
+    const all_inventors_sorted_by_lived = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year));
+
+    console.table(all_inventors_sorted_by_lived);
+
     // 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 boulevards = ["Boulevards of Paris", "City walls of Paris", "Thiers wall", "Wall of Charles V", "Wall of Philip II Augustus", "City gates of Paris", "Haussmann's renovation of Paris", "Boulevards of the Marshals", "Boulevard Auguste-Blanqui", "Boulevard Barbès", "Boulevard Beaumarchais", "Boulevard de l'Amiral-Bruix", "Boulevard des Capucines", "Boulevard de la Chapelle", "Boulevard de Clichy", "Boulevard du Crime", "Boulevard Haussmann", "Boulevard de l'Hôpital", "Boulevard des Italiens", "Boulevard de la Madeleine", "Boulevard de Magenta", "Boulevard Montmartre", "Boulevard du Montparnasse", "Boulevard Raspail", "Boulevard Richard-Lenoir", "Boulevard de Rochechouart", "Boulevard Saint-Germain", "Boulevard Saint-Michel", "Boulevard de Sébastopol", "Boulevard de Strasbourg", "Boulevard du Temple", "Boulevard Voltaire", "Boulevard de la Zone"];
+    const boulevards_with_de = boulevards.filter(b => b.indexOf('de') > -1);
 
+    console.log(boulevards_with_de);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const people_sorted = people.sort((a, b) => {
+      [a_last, a_first] = a.split(', ');
+      [b_last, b_first] = b.split(', ');
+      return a_last > b_last ? 1 : -1;
+    });
+    console.log(people_sorted);
 
     // 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((obj, item) => {
+      if (!obj[item]) {
+        obj[item] = 0;
+      };
+      obj[item]++;
+      return obj;
+    }, {});
+
+    console.log(transportation);
 
   </script>
 </body>

From a444e477683d3ef2c553ba63d4bb55bbfdabd472 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:11:17 +0100
Subject: [PATCH 05/13] 05 done

---
 05 - Flex Panel Gallery/index-START.html | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 31c9167e16..72bcff0e22 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;
     }
 
 
@@ -54,8 +60,18 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      /*border: 1px solid red;*/
+      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;
     }
 
   </style>
@@ -102,7 +119,19 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex') === true) {
+        this.classList.toggle('open-active');
+      }
+    }
 
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
   </script>
 
 

From c53a588e0682ee9e57270273cb08fe9a80225eed Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:11:24 +0100
Subject: [PATCH 06/13] 06 done

---
 06 - Type Ahead/index-START.html | 37 +++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..126ed365a4 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,8 +15,43 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+    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(word, cities) {
+      return cities.filter(place => {
+        const regex = new RegExp(word, 'ig');
+        return place.city.match(regex) || place.state.match(regex);
+      });
+    }
+
+    function numberWithCommas(x) {
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    function displayMatches() {
+      const matchArray = findMatches(this.value, cities);
+      const html = matchArray.map(place => {
+        const regex = new RegExp(this.value, 'ig');
+        const cityName = place.city.replace(regex, `<span class='hl'>${this.value}</span>`);
+        const stateName = place.state.replace(regex, `<span class='hl'>${this.value}</span>`);
+        const population = numberWithCommas(place.population);
+        return `
+        <li>
+          <span class='name'>${cityName}, ${stateName}</span>
+          <span class='population'>${population}</span>
+        </li>`;
+        }).join('');
+        suggestions.innerHTML = html;
+    }
+
+    const searchInput = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
+    searchInput.addEventListener('change', displayMatches);
+    searchInput.addEventListener('keyup', displayMatches);
 </script>
   </body>
 </html>

From 1bbad3ea9290f6208319e2c7e03dc335e773dc14 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 14:45:38 +0100
Subject: [PATCH 07/13] 07 done

---
 07 - Array Cardio Day 2/index-START.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..c884307181 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,14 +27,36 @@
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
+    const is_adult = people.some(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    });
 
+    console.log(is_adult);
+
+    const is_all_adult = people.every(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    });
+
+    console.log(is_all_adult);
     // 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 the_comment = comments.find(c => c.id === 823423);
+    console.log(the_comment);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(c => c.id === 823423);
+    const new_comments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index+1)
+    ];
+
+    console.table(new_comments);
+
 
   </script>
 </body>

From 9842c178746918434f18749cdab35fb076b4a822 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 15:17:00 +0100
Subject: [PATCH 08/13] 08 done

---
 08 - Fun with HTML5 Canvas/index-START.html | 57 +++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..ff833558f7 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,63 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+const $ = document.querySelector.bind(document);
+const $$ = document.querySelectorAll.bind(document);
+const on = window.addEventListener.bind(window);
+
+const canvas = $('#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 = 1;
+ctx.globalCompositeOperation = 'lighten';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let grow = true;
+
+function draw(e) {
+  if (!isDrawing) return;
+  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 (hue >= 360) {
+    hue = 0;
+  }
+
+  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+    grow = !grow;
+  }
+
+  if (grow === true) {
+    ctx.lineWidth++;
+  } else {
+    ctx.lineWidth--;
+  }
+}
+
+on('mousemove', draw);
+on('mousedown', (e) => {
+  isDrawing = true;
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+});
+on('mouseup', () => {
+  isDrawing = false;
+  w = 10;
+});
+on('mouseout', () => {
+  isDrawing = false;
+  w = 10;
+});
 </script>
 
 <style>

From 27d54da3f64d0cf8ade5dacb7464b5a22bdefa3e Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 15:29:16 +0100
Subject: [PATCH 09/13] 09 done

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

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..f5ad23df66 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,63 @@
     }
 
     // Regular
+    console.log('hello');
 
     // Interpolated
+    console.log('hello, I am a %s', 'foo');
 
     // Styled
+    console.log('%cI am some green text', 'font-size: 20px; background: red; color: green');
 
     // warning!
+    console.warn('onoez');
 
     // Error :|
+    console.error('we have a problem');
 
     // Info
+    console.info('some info');
 
     // Testing
+    const p = document.querySelector('p');
+    console.assert(1 === 2, 'That is wrong');
 
     // clearing
+    //console.clear();
 
     // Viewing DOM Elements
+    console.log(p);
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.group(`${dog.name}`);
+      console.log(`this is ${dog.name}`);
+      console.log(`who is ${dog.age} years old`);
+      console.log(`or ${dog.age*7} dog years old`)
+      console.groupEnd(`${dog.name}`);
+    });
 
     // counting
+    console.count("foo");
+    console.count("foo");
+    console.count("foo");
+    console.count("foo");
+    console.count("bar");
+    console.count("foo");
+    console.count("foo");
+    console.count("bar");
 
     // timing
+    console.time('fetching data');
+    fetch('https://api.github.com/users/KTamas')
+    .then(data => data.json())
+    .then(data => {
+      console.timeEnd('fetching data');
+      console.log(data);
+    });
+
+    console.table(dogs);
 
   </script>
 </body>

From da248527e39820b39142a39689aa15773893aee6 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sat, 11 Mar 2017 16:11:06 +0100
Subject: [PATCH 10/13] 10 done

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index aeac48e7f9..0e50e215be 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -99,6 +99,25 @@
   </div>
 
 <script>
+const $ = document.querySelector.bind(document);
+const $$ = document.querySelectorAll.bind(document);
+
+let prev_checked_index = 0;
+
+window.onload = function() {
+  const items = $$('input');
+  items.forEach(function(item, _i) {
+    item.addEventListener('click', function(e) {
+      if (e.shiftKey && this.checked) {
+        for (let i = prev_checked_index; i != _i; prev_checked_index < _i ? i++ : i--) {
+          items[i].checked = true;
+        }
+      }
+
+      prev_checked_index = _i;
+    });
+  });
+};
 </script>
 </body>
 </html>

From 9017ed56c55e648de530c0a5e3efdeeb82c2b6db Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sun, 12 Mar 2017 12:28:24 +0100
Subject: [PATCH 11/13] 12 done

---
 12 - Key Sequence Detection/index-START.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..4c4ddf69cb 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 = 'ktamas';
+  window.addEventListener('keyup', e => {
+    console.log(e.key);
+    pressed.push(e.key);
+    pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+    console.log(pressed);
+    if (pressed.join('').includes(secretCode)) {
+      console.log('yay');
+      cornify_add();
+    }
+  });
 </script>
 </body>
 </html>

From 3118f7b4b30ce1ec699156dadbf5e52ef42388b6 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Sun, 12 Mar 2017 13:10:29 +0100
Subject: [PATCH 12/13] 11 done

---
 11 - Custom Video Player/index.html |  1 +
 11 - Custom Video Player/scripts.js | 54 +++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..8682ad8a8a 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,6 +19,7 @@
        <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 fullscreen">↗</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..14995bf033 100644
--- 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 skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+const fullscreen = player.querySelector('.fullscreen');
+
+/* build functions */
+function togglePlay() {
+    const method = video.paused ? 'play' : 'pause';
+    video[method]();
+}
+
+function updateButton() {
+    const icon = this.paused ? '►' : '❚ ❚';
+    toggle.textContent = icon;
+}
+
+function skip() {
+    video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+    video[this.name] = this.value;
+}
+
+function handleProgress() {
+    const percent = (video.currentTime / video.duration) * 100;
+    progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+    video.currentTime = scrubTime;
+}
+
+/* hook up the event listeners */
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+fullscreen.addEventListener('click', () => video.webkitRequestFullScreen());
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(skipButton => skipButton.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);

From 59e2937f8c21ea885ae74f1ccbc51e2a464549c1 Mon Sep 17 00:00:00 2001
From: Tamas Kadar <ktamas@ktamas.com>
Date: Thu, 16 Mar 2017 11:58:15 +0100
Subject: [PATCH 13/13] 24 done

---
 24 - Sticky Nav/index-START.html | 15 ++++++++++++++-
 24 - Sticky Nav/style-START.css  | 13 +++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..6118b3fa3e 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,20 @@ <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');
+      }
+      console.log(topOfNav);
+    };
+
+    window.addEventListener('scroll', fixNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..17e6afd8f2 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,6 +23,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height:50vh;
@@ -48,6 +52,11 @@ 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;
@@ -72,6 +81,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color:black;
 }