From eebcada7dee9d3b5d7cd59269fd8a075ff710090 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Mon, 26 Mar 2018 17:24:16 +1300
Subject: [PATCH 01/14] Add 01 implementation

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..80344d00c5 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,27 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener("keydown", (e) => {
+    let audio = document.querySelector(`audio[data-key="${e.keyCode}"`)
+    let key = document.querySelector(`.key[data-key="${e.keyCode}"`)
+    if (!audio) return
 
+    // console.log(audio)
+    key.classList.add("playing")
+    audio.currentTime = 0
+    audio.play()
+  })
+
+let keys = document.querySelectorAll(".key")
+keys.forEach((key) => {
+  key.addEventListener("transitionend", returnKeyToIdleStyle)
+})
+
+  function returnKeyToIdleStyle(e) {
+    if (e.propertyName !== "transform") return
+
+    this.classList.remove("playing")
+  }
 </script>
 
 

From 3b4e0ef079c1e1bc52597135546f1aaca8183791 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Mon, 26 Mar 2018 17:56:19 +1300
Subject: [PATCH 02/14] Implement 03

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..2d1a543820 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --spacing: 10px;
+      --blur: 10px;
+      --base: yellow;
+    }
+
+    .hl {
+      color: var(--base);
+    }
+
+    img {
+      background: var(--base);
+      padding: var(--spacing);
+      filter: blur(var(--blur));
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -45,6 +60,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    function updateStyling(e) {
+      let unit = this.dataset.sizing || ""
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + unit)
+      console.log("updateStyling", this.value + unit)
+    }
+
+    let inputs = document.querySelectorAll(".controls input")
+
+    inputs.forEach(input => {
+      input.addEventListener("change", updateStyling)
+      input.addEventListener("mousemove", updateStyling)
+    })
   </script>
 
 </body>

From d51c6656ad050c45ab17e170a16b1f58e1f4085f Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Wed, 28 Mar 2018 23:25:14 +1300
Subject: [PATCH 03/14] Implement 04

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..1c15fccea8 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -32,15 +32,32 @@
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
+const old_inventors = inventors.filter(inventor => inventor.year >= 1500 &&
+  inventor.year < 1600)
+console.table(old_inventors)
+
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
+let full_names = inventors.map(inventor => `${inventor.first} ${inventor.last}`)
+console.log(full_names)
+
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+let sorted_inventors = inventors.sort((a, b) => {
+  return a.year > b.year ? 1 : -1
+})
+console.table(sorted_inventors)
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 
+  let yearsLived = inventors.reduce((memo, inventor) => {
+    return memo + (inventor.passed - inventor.year)
+  }, 0)
+console.log(yearsLived)
+
     // 5. Sort the inventors by years lived
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name

From 33fa291c325de1f75d1aac333160a59f122190cf Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Wed, 28 Mar 2018 23:57:17 +1300
Subject: [PATCH 04/14] Implement 05

---
 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 c6509bed02..0a7ac8c4a2 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,9 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -54,8 +58,17 @@
       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 +81,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
   </style>
@@ -102,6 +116,21 @@
   </div>
 
   <script>
+    function toggleOpen() {
+      this.classList.toggle("open")
+    }
+
+function toggleActive(e) {
+  console.log(e)
+  if (e.propertyName === "flex-grow") {
+    this.classList.toggle("open-active")
+  }
+}
+
+let panels = document.querySelectorAll(".panel")
+
+panels.forEach(panel => panel.addEventListener("click", toggleOpen))
+panels.forEach(panel => panel.addEventListener("transitionend", toggleActive))
 
   </script>
 

From 852261a4947ab6ba71f3cb002cb3d828e6e8f7ec Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Thu, 29 Mar 2018 16:54:51 +1300
Subject: [PATCH 05/14] Implement 06

async stuff is just useless here
---
 06 - Type Ahead/index-START.html | 50 ++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..bdfa469516 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,56 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+let cities
+
+async function fetchCities() {
+  let response = await fetch(endpoint)
+  let json = await response.json()
+  return json
+}
+
+function searchCitites(wordToSearch, cities) {
+  let regex = new RegExp(wordToSearch, 'gi')
+  return cities.filter(place => place.city.match(regex) ||
+    place.state.match(regex))
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function highlight(word, partToHighlight) {
+  let regexp = new RegExp(partToHighlight, 'gi')
+  return word.replace(regexp, `<span class="hl">${partToHighlight}</span>`)
+}
+
+function displaySuggestions() {
+  let foundCities = searchCitites(this.value, cities)
+  let html = foundCities.map(place => {
+    let highlightedCity = highlight(place.city, this.value)
+    let highlightedState = highlight(place.state, this.value)
+
+    return `
+    <li>
+      <span class="name">${highlightedCity}, ${highlightedState}</span>
+      <span class="population">${numberWithCommas(place.population)}</span>
+    </li>`
+  }).join("")
+  suggestionsElement.innerHTML = html
+}
+
+async function main() {
+  cities = await fetchCities()
+}
+
+main()
+
+let searchInput = document.querySelector(".search")
+searchInput.addEventListener("change", displaySuggestions)
+searchInput.addEventListener("keyup", displaySuggestions)
+
+let suggestionsElement = document.querySelector(".suggestions")
+
 </script>
   </body>
 </html>

From 099accdd7a5fd699dad9f438ae498f5213c933e8 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Tue, 3 Apr 2018 20:12:58 +1200
Subject: [PATCH 06/14] Implement 07

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..c9ae28850e 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -28,14 +28,29 @@
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
 
+function wasBornIn80s(person) {
+  return person.year >= 1980 && person.year <= 1989
+}
+
+    let somePeopleWerebornIn80s = people.some(person => wasBornIn80s(person))
+console.log(somePeopleWerebornIn80s)
+
+let allPeopleWereBornIn80s = people.every(person => wasBornIn80s(person))
+console.log(allPeopleWereBornIn80s)
+
     // 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
 
+let comment = comments.find(comment => comment.id === 523423)
+console.log(comment)
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
 
+let index = comments.findIndex(comment => comment.id === 523423)
+console.log("index:", index)
   </script>
 </body>
 </html>

From b536bcf8825c44a76e67eb8575a9b32919386070 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Thu, 5 Apr 2018 13:47:57 +1200
Subject: [PATCH 07/14] Implement 08

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..d3a025e48c 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,38 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+let canvas = document.querySelector("#draw")
+let ctx = canvas.getContext("2d")
+let isDrawing = false
+let lastX = 0
+let lastY = 0
+
+function draw(x, y) {
+  ctx.beginPath()
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(x, y)
+  ctx.stroke()
+}
+
+canvas.addEventListener("mousemove", (e) => {
+  if (!isDrawing) return
+  
+  draw(e.offsetX, e.offsetY)
+  lastX = e.offsetX
+  lastY = e.offsetY
+})
+canvas.addEventListener("mousedown", (e) => {
+  isDrawing = true
+  lastX = e.offsetX
+  lastY = e.offsetY
+})
+canvas.addEventListener("mouseup", () => isDrawing = false)
+
+canvas.width = window.innerWidth
+canvas.height = window.innerHeight
+ctx.strokeStyle = "#BADA55"
+ctx.lineWidth = 5
+
 </script>
 
 <style>

From 4db2c3b6f0b81e0cf07b9db2e1a7c9f295260486 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Thu, 24 May 2018 16:59:06 +1200
Subject: [PATCH 08/14] Implement 09

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

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..5d335b2b04 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -24,6 +24,7 @@
     // Styled
 
     // warning!
+console.warn("HO-HO-HO!")
 
     // Error :|
 
@@ -36,6 +37,9 @@
     // Viewing DOM Elements
 
     // Grouping together
+console.group("hullo")
+console.log("Frodo and Bilbo")
+console.groupEnd()
 
     // counting
 

From 0f0f48f9d0f8e787b2581a7837545f73d8efe917 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Fri, 1 Jun 2018 19:52:09 +1200
Subject: [PATCH 09/14] Implement 10

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index a02071ff00..a4326d0b52 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -99,6 +99,39 @@
   </div>
 
 <script>
+  let checkboxes = document.querySelectorAll("input[type=checkbox]")
+  let lastCheckedBox
+
+  function setLastCheckedBox(checkbox) {
+    console.log("setLastCheckedBox")
+    if (checkbox.checked)
+      lastCheckedBox = checkbox
+  }
+
+  function checkInBetweenBoxes(box1, box2) {
+    let doCheckBoxes = false
+
+    console.log("checkInBetweenBoxes")
+    checkboxes.forEach(checkbox => {
+      if (checkbox === box1 || checkbox === box2)
+        doCheckBoxes = !doCheckBoxes
+
+      if (doCheckBoxes)
+        checkbox.checked = true
+    })
+  }
+
+  function handleCheck(e) {
+    console.log(lastCheckedBox)
+    if (lastCheckedBox && e.shiftKey && this.checked)
+      checkInBetweenBoxes(this, lastCheckedBox)
+
+    setLastCheckedBox(this)
+  }
+
+checkboxes.forEach(checkbox => {
+  checkbox.addEventListener('click', handleCheck)
+})
 </script>
 </body>
 </html>

From 458ff25917135052583ba8f19a5d26be1f9389d0 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Tue, 5 Jun 2018 21:58:00 +1200
Subject: [PATCH 10/14] Implement 11 (not fully)

---
 11 - Custom Video Player/scripts.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..aa76419edb 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,20 @@
+const player = document.querySelector(".player")
+const video = player.querySelector(".viewer")
+const playToggleButton = player.querySelector(".toggle")
+
+function togglePlay() {
+  if (video.paused)
+    video.play()
+  else
+    video.pause()
+}
+
+function updateToggleButton() {
+  const icon = this.paused ? '►' : '❚ ❚'
+  playToggleButton.textContent = icon
+}
+
+video.addEventListener("play", updateToggleButton)
+video.addEventListener("pause", updateToggleButton)
+
+playToggleButton.addEventListener("click", togglePlay)

From 93a16916ed9b68988830cd6cf4218e194876ef9b Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Wed, 6 Jun 2018 20:39:52 +1200
Subject: [PATCH 11/14] Implemented 12

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..5b7e067913 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,19 @@
 </head>
 <body>
 <script>
+  const KEYPHRASE = "wesbos"
+  const keypresses = []
+
+  window.addEventListener("keyup", (e) => {
+    console.log(e.key)
+    keypresses.push(e.key)
+    if (keypresses.length > KEYPHRASE.length)
+      keypresses.shift()
+    console.log(keypresses)
+
+    if (keypresses.join("") === KEYPHRASE)
+      cornify_add()
+  })
 </script>
 </body>
 </html>

From e8f308d07ef740ae5803728240662ca238116852 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Fri, 8 Jun 2018 20:32:28 +1200
Subject: [PATCH 12/14] Implement 14

---
 14 - JavaScript References VS Copying/index-START.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index f978b7446f..04e1928d62 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,6 +8,11 @@
 
   <script>
     // start with strings, numbers and booleans
+let str = "foo"
+let str2 = str
+console.log(str, str2)
+str = "bar"
+console.log(str, str2)
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
@@ -43,6 +48,9 @@
     };
 
     // and think we make a copy:
+const person2 = {...person}
+person2.age = 99
+console.log(person.age, person2.age)
 
     // how do we take a copy instead?
 

From aea0dce36b290aff1689a7b6788d6f97c3d57884 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Tue, 19 Jun 2018 20:44:01 +1200
Subject: [PATCH 13/14] Implement 17

---
 17 - Sort Without Articles/index-START.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 9bbd250a9b..0afd7af393 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -3,6 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title>Sort Without Articles</title>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"
+    ></script>
 </head>
 <body>
 
@@ -44,8 +47,21 @@
   <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'];
+  class Band {
+    static get articleRegex() { return /^(A|An|The) / }
 
+    constructor(name) {
+      this.name = name
+      this.sortName = name.replace(Band.articleRegex, '')
+    }
+  }
+
+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'].map((band) => new Band(band))
+
+console.table(_.sortBy(bands, 'sortName'))
 
 </script>
 

From 4cedce2aeb0f5dd0ecc2f65a89e1b1b7ccdba992 Mon Sep 17 00:00:00 2001
From: Dmitry Maksyoma <ledestin@gmail.com>
Date: Wed, 20 Jun 2018 21:25:06 +1200
Subject: [PATCH 14/14] Implement 18

---
 18 - Adding Up Times with Reduce/index-START.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index abdf4c91af..4eab19ea94 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,18 @@
     </li>
   </ul>
 <script>
+  const videos = Array.from(document.querySelectorAll('.videos > li'))
+  const videoTimes = videos.map((video) => {
+    return video.dataset.time
+  })
+
+  const totalTime = videoTimes.reduce((sum, time) => {
+    const [minutes, seconds] = time.split(':')
+    sum += parseInt(minutes) * 60
+    sum += parseInt(seconds)
+    return sum
+  }, 0)
+  console.log(totalTime)
 </script>
 </body>
 </html>