From 7c578acd976534c055e9a204bd53a39a89f3b4bc Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 14:52:58 +1100
Subject: [PATCH 01/32] Add event listener to print out keycoade

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..5179766a65 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,10 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keydown', function(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    console.log(audio);
+  });
 
 </script>
 

From d3d56c0f61114e3879fc660932c0611ec1194c2a Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:02:28 +1100
Subject: [PATCH 02/32] set audio time to 0 play samples on keypress

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 5179766a65..13b8bce6f4 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -60,7 +60,9 @@
 <script>
   window.addEventListener('keydown', function(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    console.log(audio);
+    if (!audio) return; //Stop the function from running if not a-l keys
+    audio.currentTime = 0; //Have the sample "rewind" so it can be played at time
+    audio.play();
   });
 
 </script>

From 270ae85b24034e223f2b4982ed7b2e0a72f840cf Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:07:52 +1100
Subject: [PATCH 03/32] add class playing to .key

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 13b8bce6f4..ededc526a0 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -60,9 +60,12 @@
 <script>
   window.addEventListener('keydown', function(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); //Select the key class
     if (!audio) return; //Stop the function from running if not a-l keys
     audio.currentTime = 0; //Have the sample "rewind" so it can be played at time
     audio.play();
+    key.classList.add('playing');
   });
 
 </script>

From 8b9fa1c97ea04db1c9479c0dc9912485f22c8676 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:12:41 +1100
Subject: [PATCH 04/32] transition end events

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index ededc526a0..179022376b 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -68,6 +68,12 @@
     key.classList.add('playing');
   });
 
+  function removeTransition(e) {
+    console.log(e);
+  }
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
 </script>
 
 

From 9a61cfb9948a00e47f91e961df33238bfbffb0b3 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:21:51 +1100
Subject: [PATCH 05/32] remove transition effect when transform is done

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 179022376b..4887afeb14 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -69,7 +69,8 @@
   });
 
   function removeTransition(e) {
-    console.log(e);
+    if(e.propertyName !== 'transform') return; // skip if it's not transform
+    this.classList.remove('playing');
   }
   const keys = document.querySelectorAll('.key');
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));

From 76130d55fa352c7a6e791d58418199b3c84c1b30 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:35:48 +1100
Subject: [PATCH 06/32] moved style into head because syntastic kept giving me
 errors

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 2712384201..bcb891fa67 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -1,73 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>JS + CSS Clock</title>
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8">
+    <title>JS + CSS Clock</title>
 
+    <style>
+      html {
+        background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+        background-size:cover;
+        font-family:'helvetica neue';
+        text-align: center;
+        font-size: 10px;
+      }
 
-    <div class="clock">
-      <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
-      </div>
-    </div>
-
-
-  <style>
-    html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
-      text-align: center;
-      font-size: 10px;
-    }
+      body {
+        font-size: 2rem;
+        display:flex;
+        flex:1;
+        min-height: 100vh;
+        align-items: center;
+      }
 
-    body {
-      font-size: 2rem;
-      display:flex;
-      flex:1;
-      min-height: 100vh;
-      align-items: center;
-    }
-
-    .clock {
-      width: 30rem;
-      height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
-      position: relative;
-      padding:2rem;
-      box-shadow:
+      .clock {
+        width: 30rem;
+        height: 30rem;
+        border:20px solid white;
+        border-radius:50%;
+        margin:50px auto;
+        position: relative;
+        padding:2rem;
+        box-shadow:
         0 0 0 4px rgba(0,0,0,0.1),
         inset 0 0 0 3px #EFEFEF,
         inset 0 0 10px black,
         0 0 10px rgba(0,0,0,0.2);
-    }
+      }
+
+      .clock-face {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        transform: translateY(-3px); /* account for the height of the clock hands */
+      }
 
-    .clock-face {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
-    }
+      .hand {
+        width:50%;
+        height:6px;
+        background:black;
+        position: absolute;
+        top:50%;
+      }
 
-    .hand {
-      width:50%;
-      height:6px;
-      background:black;
-      position: absolute;
-      top:50%;
-    }
+    </style>
+  </head>
+  <body>
 
-  </style>
+    <div class="clock">
+      <div class="clock-face">
+        <div class="hand hour-hand"></div>
+        <div class="hand min-hand"></div>
+        <div class="hand second-hand"></div>
+      </div>
+    </div>
 
-  <script>
+    <script>
 
 
-  </script>
-</body>
+    </script>
+  </body>
 </html>

From 54eac1980e9db797a0796e3d9ac6f38454983b28 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:42:40 +1100
Subject: [PATCH 07/32] Add transition effects and console log seconds with
 setInterval

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index bcb891fa67..fa96de3ce0 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -49,6 +49,10 @@
         background:black;
         position: absolute;
         top:50%;
+        transform-origin: 100%;
+        transform: rotate(90deg);
+        transition: all 0.05;
+        transition-timing-function: cubic-bezier(0.1, 2.2, 0.38, 1);
       }
 
     </style>
@@ -64,7 +68,12 @@
     </div>
 
     <script>
-
+      function setDate() {
+        const now = new Date();
+        const seconds = now.getSeconds();
+        console.log(seconds);
+      }
+      setInterval(setDate, 1000);
 
     </script>
   </body>

From d5b0904bbe0d7479abc6fb1fd4097aecd9665652 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:49:54 +1100
Subject: [PATCH 08/32] second hand rotate

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index fa96de3ce0..4e1e568cbe 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -68,9 +68,13 @@
     </div>
 
     <script>
+      const secondHand = document.querySelector('.second-hand');
+
       function setDate() {
         const now = new Date();
         const seconds = now.getSeconds();
+        const secondsDegrees = ((seconds / 60) * 360) + 90;
+        secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
         console.log(seconds);
       }
       setInterval(setDate, 1000);

From ff349525db46889f4864f48e59b9643344efbd30 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 15:55:53 +1100
Subject: [PATCH 09/32] Added minutes and hours

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 4e1e568cbe..20becb1e53 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,23 +62,38 @@
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
+        <div class="hand minute-hand"></div>
         <div class="hand second-hand"></div>
       </div>
     </div>
 
     <script>
       const secondHand = document.querySelector('.second-hand');
+      const minuteHand = document.querySelector('.minute-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)`;
-        console.log(seconds);
+        console.log("Seconds: " + seconds);
+
+
+        const minutes = now.getMinutes();
+        const minutesDegrees = ((minutes / 60) * 360) + 90;
+        minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+        console.log("Minutes:" + minutes);
+
+
+        const hours = now.getHours();
+        const hoursDegrees = ((hours / 60) * 360) + 90;
+        hourHand.style.transform = `rotate(${minutesDegrees}deg)`;
+        console.log("hour: " + hours);
       }
       setInterval(setDate, 1000);
 
+
     </script>
   </body>
 </html>

From 7b795b220d6aca815582a85638947609bad63939 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Sun, 29 Jan 2017 16:03:16 +1100
Subject: [PATCH 10/32] oops, fix for hour hand

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 20becb1e53..683d133a10 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -86,8 +86,8 @@
         console.log("Minutes:" + minutes);
 
 
-        const hours = now.getHours();
-        const hoursDegrees = ((hours / 60) * 360) + 90;
+        const hours = now.getMinutes();
+        const hoursDegrees = ((mins / 12) * 360) + 90;
         hourHand.style.transform = `rotate(${minutesDegrees}deg)`;
         console.log("hour: " + hours);
       }

From 3157ce08755617d0a7b0dd38cfff1da87e7b6b26 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 12:08:31 +1100
Subject: [PATCH 11/32] refactor to remove syntastic errors

---
 03 - CSS Variables/index-START.html | 33 +++++++++++++++--------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..a9db1a995a 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -3,22 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <title>Scoped CSS Variables and JS</title>
-</head>
-<body>
-  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
-
-  <div class="controls">
-    <label for="spacing">Spacing:</label>
-    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
-
-    <label for="blur">Blur:</label>
-    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
-
-    <label for="base">Base Color</label>
-    <input id="base" type="color" name="base" value="#ffc600">
-  </div>
-
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
 
@@ -46,6 +30,23 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       width:100px;
     }
   </style>
+</head>
+<body>
+  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+
+  <div class="controls">
+    <label for="spacing">Spacing:</label>
+    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+
+    <label for="blur">Blur:</label>
+    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+    <label for="base">Base Color</label>
+    <input id="base" type="color" name="base" value="#ffc600">
+  </div>
+
+  <img alt="" src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
 
   <script>
   </script>

From 688ef5344f1a3609a7e34e4eb5af7bf3fa6614a2 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 12:13:58 +1100
Subject: [PATCH 12/32] Added root styles

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index a9db1a995a..583cbc24d2 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -5,6 +5,21 @@
   <title>Scoped CSS Variables and JS</title>
 
   <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .h1 {
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables

From a59844c1b0585c23f4dc1077c77919a0958afcbf Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 12:19:31 +1100
Subject: [PATCH 13/32] function for changing updates

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 583cbc24d2..2b9104b20f 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -64,6 +64,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+    function handleUpdate() {
+      console.log(this.value);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>

From 23f7959ed3199f15ca9f6360ae76718fe0327c12 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 12:25:55 +1100
Subject: [PATCH 14/32] suffix and px

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 2b9104b20f..51038a0dd8 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -66,7 +66,8 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <script>
     const inputs = document.querySelectorAll('.controls input');
     function handleUpdate() {
-      console.log(this.value);
+      const suffix = this.dataset.sizing || ''; //Add data-sizing px
+      console.log(suffix);
     }
 
     inputs.forEach(input => input.addEventListener('change', handleUpdate));

From 59936a0d564024170397efc4384d56478ad2feb2 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 12:28:55 +1100
Subject: [PATCH 15/32] Update style

---
 03 - CSS Variables/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 51038a0dd8..906a0ceec1 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -67,7 +67,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     const inputs = document.querySelectorAll('.controls input');
     function handleUpdate() {
       const suffix = this.dataset.sizing || ''; //Add data-sizing px
-      console.log(suffix);
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); //update style property with name, value and px
     }
 
     inputs.forEach(input => input.addEventListener('change', handleUpdate));

From fcc58161a9a46f5d88a4949f54c5b3e48b9e330e Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 12:59:21 +1100
Subject: [PATCH 16/32] filter inventors list who were born in the 1500's

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..941df99601 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -32,6 +32,13 @@
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
+    const fifteen = inventors.filter(function(inventor) {
+      if (inventor.year >= 1500 && inventor.year < 1600) {
+        return true;
+        }
+    });
+    console.table(fifteen);
+
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 

From 2bd9b2341b193754f73e0adfb871a58451de5db0 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:15:18 +1100
Subject: [PATCH 17/32] Convert function to =>

---
 04 - Array Cardio Day 1/index-START.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 941df99601..411d15e39b 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -32,13 +32,18 @@
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
-    const fifteen = inventors.filter(function(inventor) {
-      if (inventor.year >= 1500 && inventor.year < 1600) {
-        return true;
-        }
-    });
+
+    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
     console.table(fifteen);
 
+    // const fifteen = inventors.filter(function(inventor) {
+    //   if (inventor.year >= 1500 && inventor.year < 1600) {
+    //     return true;
+    //     }
+    // });
+    // console.table(fifteen);
+
+
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 

From 09672cfdff413248099aa8238eb62c530842b4b6 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:25:39 +1100
Subject: [PATCH 18/32] get inventors first and last name

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 411d15e39b..134a89399a 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -47,6 +47,9 @@
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
+    const fullNames = inventors.map(inventor => inventor.first + " " + inventor.last);
+    console.log(fullNames);
+
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 

From 214ed4ac83e83783b06408a0a5be505764c5c893 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:26:53 +1100
Subject: [PATCH 19/32] Change to use backticks and template strings

---
 04 - Array Cardio Day 1/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 134a89399a..8fede421d8 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -47,7 +47,7 @@
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
-    const fullNames = inventors.map(inventor => inventor.first + " " + inventor.last);
+    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
     console.log(fullNames);
 
     // Array.prototype.sort()

From f471ae4ccdcdfcd74d168074d7781ad698088971 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:29:14 +1100
Subject: [PATCH 20/32] Map inventors birthdays

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 8fede421d8..b23a8b9f4f 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -53,6 +53,15 @@
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+    const ordered = inventors.sort(function(a, b) {
+      if(a.year > b.year) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+    console.table(ordered);
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 

From 7c11c2c842cea5cb39e1a58520c90b9500747775 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:32:15 +1100
Subject: [PATCH 21/32] changed map to use ternary operator

---
 04 - Array Cardio Day 1/index-START.html | 30 +++++++++++++-----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index b23a8b9f4f..aebc2563ec 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -47,20 +47,22 @@
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
-    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
-    console.log(fullNames);
-
-    // Array.prototype.sort()
-    // 3. Sort the inventors by birthdate, oldest to youngest
-
-    const ordered = inventors.sort(function(a, b) {
-      if(a.year > b.year) {
-        return 1;
-      } else {
-        return -1;
-      }
-    });
-    console.table(ordered);
+    // const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    // console.log(fullNames);
+
+    // // Array.prototype.sort()
+    // // 3. Sort the inventors by birthdate, oldest to youngest
+
+    // const ordered = inventors.sort(function(a, b) {
+    //   if(a.year > b.year) {
+    //     return 1;
+    //   } else {
+    //     return -1;
+    //   }
+    // });
+    // console.table(ordered);
+
+    const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?

From beaa79cc58cfa5585216e6bb3be375d72e98db24 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:33:24 +1100
Subject: [PATCH 22/32] console output

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index aebc2563ec..326b4e198e 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -63,6 +63,7 @@
     // console.table(ordered);
 
     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?

From 37e76eed423bf5776bb4835f8c553b7be9a2f111 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:44:51 +1100
Subject: [PATCH 23/32] reduce the total year

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 326b4e198e..3832e1eead 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -68,6 +68,11 @@
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    }, 0);
+    console.log(totalYears)
+
     // 5. Sort the inventors by years lived
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name

From 3c33d45adcb3f096574b01d6811969f89549efe7 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 13:56:37 +1100
Subject: [PATCH 24/32] years lived with sort

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 3832e1eead..5c9f283f92 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -74,6 +74,12 @@
     console.log(totalYears)
 
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort(function(a, b) {
+      const lastGuy = a.passed - a.year;
+      const nextGuy = b.passed - b.year;
+      return lastGuy > nextGuy ? -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

From dc35128a565a702f1b17e5b114bddf071e5b45f8 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 14:37:02 +1100
Subject: [PATCH 25/32] Sort lists that contain 'de'

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 5c9f283f92..600cc389c7 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -83,6 +83,12 @@
 
     // 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');
+    //Convert into array
+    const links = Array.from(category.querySelectorAll('a'));
+    //convert list to names
+    const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de'));
+
 
 
     // 7. sort Exercise

From 459c1073e946ae1f854d570ebdce2aa87d5b5f37 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 14:51:19 +1100
Subject: [PATCH 26/32] Sort people by surname

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 600cc389c7..69092de25f 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -90,9 +90,14 @@
     const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de'));
 
 
-
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const sortMe = people.sort((lastOne, nextOne) => {
+      const [aLast, aFirst] = lastOne.split(', ');
+      const [bLast, bFirst] = nextOne.split(', ');
+      return aLast > bLast ? 1 : -1;
+    });
+    console.log(sortMe);
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these

From ce5bd13d686bdc460dceeabc9b72d0b93c43196a Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Mon, 30 Jan 2017 14:58:13 +1100
Subject: [PATCH 27/32] reduce arr into log

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 69092de25f..c3c9a07bb1 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -102,6 +102,13 @@
     // 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(object, item) {
+      if(!object[item]) {
+        obbject[item] = 0;
+      }
+      object[item]++;
+      }, {})
+      console.log(transportation);
 
   </script>
 </body>

From 9f60845d41ce19d56e535f055c07673c999d9e65 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Thu, 2 Feb 2017 11:14:03 +1100
Subject: [PATCH 28/32] Flex panels, functions to open each panel and move text
 up and down

---
 05 - Flex Panel Gallery/index-START.html | 44 ++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..aa34f1cdcd 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -4,8 +4,6 @@
   <meta charset="UTF-8">
   <title>Flex Panels 💪</title>
   <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
-</head>
-<body>
   <style>
     html {
       box-sizing: border-box;
@@ -24,6 +22,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +40,12 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      /* Distribute the extra space among panel */
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -50,10 +55,29 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
+    /* flex children */
     .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 {
@@ -67,6 +91,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -76,6 +101,8 @@
     }
 
   </style>
+</head>
+<body>
 
 
   <div class="panels">
@@ -107,6 +134,19 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+      this.classList.toggle('.open-active');
+    }
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
 
   </script>
 

From fa9ea3b39b9e950b40b3956bab75ad6c2a6acae5 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Thu, 2 Feb 2017 11:58:42 +1100
Subject: [PATCH 29/32] son with type ahead matches

TODO: redo
---
 06 - Type Ahead/index-START.html | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..b97ebc38b1 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,6 +16,44 @@
   </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 => {
+    // here we need to figure out if the city or state matches what was searched
+    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 displayMatches() {
+  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('');
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
 
 </script>
   </body>

From d01edf89207aced1804e9845a5907f89f382b94a Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Tue, 21 Feb 2017 11:46:07 +1100
Subject: [PATCH 30/32] Free time! 04-07 review

---
 04 - Array Cardio Day 1/index-FINISHED.html | 15 +-----
 06 - Type Ahead/#index-START.html#          | 60 +++++++++++++++++++++
 07 - Array Cardio Day 2/index-START.html    | 29 ++++++++++
 3 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 06 - Type Ahead/#index-START.html#

diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html
index ede883f1f9..6f383a497a 100644
--- a/04 - Array Cardio Day 1/index-FINISHED.html	
+++ b/04 - Array Cardio Day 1/index-FINISHED.html	
@@ -72,20 +72,7 @@
     // 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 links = Array.from(category.querySelectorAll('a'));
-    // const de = links
-    //             .map(link => link.textContent)
-    //             .filter(streetName => streetName.includes('de'));
-
-    // 7. sort Exercise
-    // Sort the people alphabetically by last name
-    const alpha = people.sort((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
diff --git a/06 - Type Ahead/#index-START.html# b/06 - Type Ahead/#index-START.html#
new file mode 100644
index 0000000000..b97ebc38b1
--- /dev/null
+++ b/06 - Type Ahead/#index-START.html#	
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Type Ahead 👀</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <form class="search-form">
+    <input type="text" class="search" placeholder="City or State">
+    <ul class="suggestions">
+      <li>Filter for a city</li>
+      <li>or a state</li>
+    </ul>
+  </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 => {
+    // here we need to figure out if the city or state matches what was searched
+    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 displayMatches() {
+  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('');
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
+
+</script>
+  </body>
+</html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..3adb2f2732 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,11 +26,40 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+
+    const isAdult = people.som(function() {
+      const currentYear = (new Date()).getFullYear();
+      if(person.year - person.year >= 19) {
+        return true;
+      }
+    });
+    // REDO
+    const isAdult = people.some(person => {
+      const currentYear = (new(Date()).getFullYear();
+      return currentYear - person.year >= 19;
+      )
+    };
+    // REDO AGAIN
+    const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
+    console.log({allAdults})
+
+
     // Array.prototype.every() // is everyone 19 or older?
+    const isAdult = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
+    console.log({allAdults})
 
     // 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 comment = comments.find(function(comment) {
+      if(comment.id === 823423) {
+        return true
+      }
+    });
+
+    // REDO
+    const comment = comments.find(comment => comment.id === 823423);
+)
 
     // Array.prototype.findIndex()
     // Find the comment with this ID

From 180a1dccce792ab0a0898c5cc1f00c2620363951 Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Tue, 21 Feb 2017 11:48:36 +1100
Subject: [PATCH 31/32] Spread operator (review)

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 3adb2f2732..dcb080744c 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -64,6 +64,15 @@
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+    console.log(index);
+
+    //comments.splice(index, 1);
+    //Review from vid
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index + 1)
+    ];
 
   </script>
 </body>

From f616c15fda537f793de54af3b87848c877e54c8d Mon Sep 17 00:00:00 2001
From: Joel Brewster <hi@joelbrewster.com>
Date: Tue, 21 Feb 2017 13:52:06 +1100
Subject: [PATCH 32/32] Canvas fun

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..4b73c5cb8b 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,8 +7,39 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
-</script>
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+ctx.strokeStyle = '#ff0000';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 2;
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+
+  function draw(e) {
+    if (!isDrawing) return; // stop the fn from running when they are not moused down
+    ctx.beginPath();
+  // start from
+  ctx.moveTo(lastX, lastY);
+  // go to
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+  }
+  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>
   html, body {
     margin:0;