From 7cf7c3a499add13163b3ee1025a8d4fdbdf3dd00 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Wed, 17 Jan 2024 17:31:47 +0100
Subject: [PATCH 01/21] audio play while keydown

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 8a2f8e8417..b760078fe6 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,11 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  window.addEventListener('keydown', event => {
+  const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
+  if(!audio) return; // stop the function from running all together
+  audio.play();
+});
 </script>
 
 

From 8ad19b1c666cdc7c8d73ade9d04710aeabeca255 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Thu, 18 Jan 2024 11:47:43 +0100
Subject: [PATCH 02/21] adding new classes when keydown

---
 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 b760078fe6..db07bfb603 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -62,7 +62,11 @@
   window.addEventListener('keydown', event => {
   const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
   if(!audio) return; // stop the function from running all together
+  audio.currentTime = 0;
   audio.play();
+  const square = document.querySelector(`div[data-key="${event.keyCode}"]`);
+  if(!square) return; // stop the function from running all together
+  square.classList.add("playing");
 });
 </script>
 

From 47c07c7aa75ccb6ab4c2d3fa5380ca9bed00b268 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Thu, 18 Jan 2024 14:38:31 +0100
Subject: [PATCH 03/21] drum kit finished

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index db07bfb603..05ab476841 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -61,13 +61,20 @@
 <script>
   window.addEventListener('keydown', event => {
   const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
+  const key = document.querySelector(`div[data-key="${event.keyCode}"]`);
   if(!audio) return; // stop the function from running all together
-  audio.currentTime = 0;
+  audio.currentTime = 0; // rewind to the start
   audio.play();
-  const square = document.querySelector(`div[data-key="${event.keyCode}"]`);
-  if(!square) return; // stop the function from running all together
-  square.classList.add("playing");
+  key.classList.add("playing");
 });
+
+function removeTransition (event){
+  if(event.propertyName !== "transform") return; // skip it if it is not a transform
+  this.classList.remove("playing");
+}
+
+const keys = document.querySelectorAll(".key")
+keys.forEach(key => key.addEventListener("transitionend", removeTransition));
 </script>
 
 

From 79db70520bff62496f8cc51a98c8607b25e9a74d Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Thu, 18 Jan 2024 15:09:03 +0100
Subject: [PATCH 04/21] clock hand right placed

---
 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 55ab1a5331..90b57cac05 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -63,6 +63,10 @@
       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>

From 7d0c1bad184cec4bce49fcf6c0971802c4daf497 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Thu, 18 Jan 2024 15:31:59 +0100
Subject: [PATCH 05/21] js and css clock finished

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 90b57cac05..78d94124b5 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -72,8 +72,23 @@
   </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 minutes = now.getMinutes();
+      const hours = now.getHours();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      const minutesDegrees = ((minutes / 60) * 360) + 90;
+      const hoursDegrees = ((hours / 12) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    }
 
-
+    setInterval(setDate, 1000);
   </script>
 </body>
 </html>

From 3e29e0bc1f027313a10da1e2a18f01451f5f38ae Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Fri, 19 Jan 2024 12:21:44 +0100
Subject: [PATCH 06/21] css done

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index d5fcc3a2ae..a4b94495ed 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -13,7 +13,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <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">
+    <input id="blur" type="range" name="blur" min="0" max="10" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
     <input id="base" type="color" name="base" value="#ffc600">
@@ -22,6 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #4c00ff;
+      --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

From 59ab7192eea92b8fcc79d0306155085a0b5911cb Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Fri, 19 Jan 2024 12:27:18 +0100
Subject: [PATCH 07/21] getting element that is needed

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index a4b94495ed..3d173b0c7f 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -61,6 +61,12 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const spacingController = document.getElementById("spacing");
+    console.log(spacingController);
+    const blurController = document.getElementById("blur");
+    console.log(blurController);
+    const baseController = document.getElementById("base");
+    console.log(baseController);
   </script>
 
 </body>

From d581e0702ed1655aa26e12a4a144a7f1543abd32 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Fri, 19 Jan 2024 14:31:36 +0100
Subject: [PATCH 08/21] ex finished

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 3d173b0c7f..cd609c2549 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -61,12 +61,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
-    const spacingController = document.getElementById("spacing");
-    console.log(spacingController);
-    const blurController = document.getElementById("blur");
-    console.log(blurController);
-    const baseController = document.getElementById("base");
-    console.log(baseController);
+    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 cfc45cd95500ccb4c30832e68da634dbb67bdd72 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Tue, 23 Jan 2024 12:20:14 +0100
Subject: [PATCH 09/21] 123 finished

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 0dcfd00f40..e91f90ea3e 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -38,12 +38,22 @@
     
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const filterInventorsBirth = inventors.filter(function(inventor) {
+      return inventor.year > 1500 && inventor.year < 1600;
+    });
+    console.log(filterInventorsBirth);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
+    const inventorsFullName = inventors.map(({first,last}) => ([{first, last}]));
+    console.log(inventorsFullName)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    let inventorsBirth = inventors.sort(function (a, b) {
+  return a.year - b.year;
+});
+    console.log(inventorsBirth)
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?

From 874d8d2cf6afe2e398678f4289802748b72080a6 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Wed, 24 Jan 2024 16:33:47 +0100
Subject: [PATCH 10/21] ex finished

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index e91f90ea3e..95bd42b7f5 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -39,38 +39,68 @@
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
     const filterInventorsBirth = inventors.filter(function(inventor) {
-      return inventor.year > 1500 && inventor.year < 1600;
+      return inventor.year >= 1500 && inventor.year < 1600;
     });
-    console.log(filterInventorsBirth);
+    console.table(filterInventorsBirth);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
-    const inventorsFullName = inventors.map(({first,last}) => ([{first, last}]));
+    const inventorsFullName = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
     console.log(inventorsFullName)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
     let inventorsBirth = inventors.sort(function (a, b) {
-  return a.year - b.year;
-});
-    console.log(inventorsBirth)
+      return a.year - b.year;
+    });
+    console.table(inventorsBirth)
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    }, 0);
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
+    const inventorsLived = inventors.sort(function (a, b) {
+      return (a.passed - a.year) > (b.passed - b.year) ? -1 : 1;
+    });
+    console.table(inventorsLived)
 
     // 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 listBoulevards = document.querySelector('.mw-category');
+    const links = [...listBoulevards.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 peopleLastName = people.sort(function (lastOne, nextOne) {
+      const [aLast, aFirst] = lastOne.split(', ');
+      const [bLast, bFirst] = nextOne.split(', ');
+      return aLast > bLast ? 1 : -1;
+    });
+    console.log(peopleLastName)
 
     // 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 sumInstanceOfData = data.reduce(function(object, item) {
+      console.log(object)
+      console.log(item)
+      if(!object[item]) {
+        object[item] = 0;
+      }
+      object[item]++;
+      return object;
+    }, {});
+    console.log(sumInstanceOfData)
   </script>
 </body>
 </html>

From 3f7cb4df84367ce00af4fde5a2a415c0b21715ba Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Thu, 25 Jan 2024 15:04:09 +0100
Subject: [PATCH 11/21] ex finished

---
 05 - Flex Panel Gallery/index-START.html | 36 ++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 88a4f1d1e2..05df91fbf4 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -27,6 +27,7 @@
     .panels {
       min-height: 100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -38,12 +39,16 @@
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
-        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
-        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
+        font-size 0.1s ,
+        flex 0.1s,
         background 0.2s;
       font-size: 20px;
       background-size: cover;
       background-position: center;
+      flex: 1;
+      justify-content: center;
+      display: flex;
+      flex-direction: column;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -52,13 +57,23 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
-    /* Flex Children */
+    /* 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;
@@ -72,6 +87,7 @@
 
     .panel.open {
       font-size: 40px;
+      flex: 5;
     }
 
   </style>
@@ -106,6 +122,20 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll(".panel");
+
+    function toggleOpen() {
+      this.classList.toggle("open");
+    }
+
+    function toggleActive(event){
+      if(event.propertyName.includes("flex")) {
+        this.classList.toggle("open-active");
+      }
+    }
+
+    panels.forEach(panel => panel.addEventListener("click", toggleOpen));
+    panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));
 
   </script>
 

From 09d1f922eed76453b92d2925431c886b7326d894 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Mon, 29 Jan 2024 15:22:14 +0100
Subject: [PATCH 12/21] ex finished

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 5a9aa7e4e8..f751acd4c9 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -18,6 +18,41 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+
+fetch(endpoint)
+.then((response) => response.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 displayMatches() {
+  const matchArray = findMatches(searchInput.value, cities);
+  const html = matchArray.map(place => {
+    const regex = new RegExp(searchInput.value, "gi");
+    const cityName = place.city.replace(regex, `<span class="h1">${searchInput.value}</span>`)
+    return `
+      <li>
+        <span class="name">${cityName}, ${place.state}</span>
+        <span class="population">${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>

From 331f6b85c3217ea38f3d315819e9ad57875ed9e2 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Tue, 30 Jan 2024 16:03:41 +0100
Subject: [PATCH 13/21] two first questions resolved

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 4ca34c7536..dd2e4e4e03 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,8 +27,21 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
-    // Array.prototype.every() // is everyone 19 or older?
+    function isNinteenOrOlder(el, indice, array) {
+      return el >= 19
+    }
+
+    const ageOfPeople = people.map(age => {
+      return new Date().getFullYear() - age.year
+    })
 
+    const resultOne = ageOfPeople.some(isNinteenOrOlder);
+    console.log(resultOne);
+
+    // Array.prototype.every() // is everyone 19 or older?
+    const resultTwo = ageOfPeople.every(isNinteenOrOlder);
+    console.log(resultTwo);
+    
     // 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

From ad94bb14c84a8c77ef13bde4f89302e56159ce97 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Wed, 31 Jan 2024 11:02:46 +0100
Subject: [PATCH 14/21] ex finished

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index dd2e4e4e03..f723016533 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -45,11 +45,17 @@
     // 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
+    findComment = comments.find((el) => el.id === 823423);
+    console.log(findComment);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
-    // delete the comment with the ID of 823423
+    const isId = (el) => el.id == 823423;
+    console.log(comments.findIndex(isId));
 
+    // delete the comment with the ID of 823423
+    deleteComment = comments.splice(comments.findIndex(isId),1);
+    console.table(comments);
   </script>
 </body>
 </html>

From 12a6eafd2577a19e9248229d31e74e12bc09e5f7 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Wed, 31 Jan 2024 14:55:48 +0100
Subject: [PATCH 15/21] ex finished

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index f70ad2059b..290936b4c8 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -8,6 +8,57 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+  const canvas = document.getElementById("draw");
+  const context = canvas.getContext("2d");
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  context.strokeStyle = "#BADA55";
+  context.lineJoin = "round";
+  context.lineCap = "round";
+  context.lineWidth = 100;
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let direction = true;
+
+  function draw(e) {
+    if (!isDrawing) return;
+    console.log(e);
+    context.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    context.beginPath();
+    context.moveTo(lastX, lastY);
+    context.lineTo(e.offsetX, e.offsetY);
+    context.stroke();
+    lastX = e.offsetX;
+    lastY = e.offsetY; 
+    hue ++;
+    if(hue >= 360) {
+      hue = 0;
+    }
+    if(context.lineWidth >= 100 || context.lineWidth <= 1) {
+      direction = !direction;
+    }
+    if(direction) {
+    context.lineWidth ++;
+  } else {
+    context.lineWidth --;
+  }
+}
+
+  canvas.addEventListener("mousedown", (e) => {
+    isDrawing = true;
+    lastX = e.offsetX;
+    lastY = e.offsetY;
+  });
+
+  canvas.addEventListener("mousemove", draw);
+  canvas.addEventListener("mouseup", () => isDrawing = false );
+  canvas.addEventListener("mouseout", () => isDrawing = false );
+
+
 </script>
 
 <style>

From 70710244a002e679d61582aa1c0b1b2ea8a07ac8 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Wed, 31 Jan 2024 16:07:31 +0100
Subject: [PATCH 16/21] ex finished

---
 09 - Dev Tools Domination/index-START.html | 101 +++++++++++++++------
 1 file changed, 72 insertions(+), 29 deletions(-)

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index c061d01cda..f860aabcaf 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -12,35 +12,78 @@
   <script>
     const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
 
-    function makeGreen() {
-      const p = document.querySelector('p');
-      p.style.color = '#BADA55';
-      p.style.fontSize = '50px';
-    }
-
-    // Regular
-
-    // Interpolated
-
-    // Styled
-
-    // warning!
-
-    // Error :|
-
-    // Info
-
-    // Testing
-
-    // clearing
-
-    // Viewing DOM Elements
-
-    // Grouping together
-
-    // counting
-
-    // timing
+function makeGreen() {
+  const p = document.querySelector('p');
+  p.style.color = '#BADA55';
+  p.style.fontSize = '50px';
+}
+
+// Regular
+console.log('hello');
+
+// Interpolated
+console.log('Hello I am a %s string!', '💩');
+
+// Styled
+// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
+
+// warning!
+console.warn('OH NOOO');
+
+// Error :|
+console.error('Shit!');
+
+// Info
+console.info('Crocodiles eat 3-4 people per year');
+
+// Testing
+const p = document.querySelector('p');
+
+console.assert(p.classList.contains('ouch'), 'That is wrong!');
+
+// clearing
+console.clear();
+
+// Viewing DOM Elements
+console.log(p);
+console.dir(p);
+
+console.clear();
+
+// Grouping together
+dogs.forEach(dog => {
+  console.groupCollapsed(`${dog.name}`);
+  console.log(`This is ${dog.name}`);
+  console.log(`${dog.name} is ${dog.age} years old`);
+  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
+  console.groupEnd(`${dog.name}`);
+});
+
+// counting
+
+console.count('Wes');
+console.count('Wes');
+console.count('Steve');
+console.count('Steve');
+console.count('Wes');
+console.count('Steve');
+console.count('Wes');
+console.count('Steve');
+console.count('Steve');
+console.count('Steve');
+console.count('Steve');
+console.count('Steve');
+
+// timing
+console.time('fetching data');
+fetch('https://api.github.com/users/wesbos')
+  .then(data => data.json())
+  .then(data => {
+    console.timeEnd('fetching data');
+    console.log(data);
+  });
+
+console.table(dogs);
 
   </script>
 </body>

From bc77d7bd7db2b250974fdd58ee47fae330c4cd97 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Tue, 27 Feb 2024 16:07:18 +0100
Subject: [PATCH 17/21] ex finished

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 25df6ad31e..cdd542f059 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -97,6 +97,40 @@
   </div>
 
 <script>
+const checkboxes = document.querySelectorAll("input");
+console.log(checkboxes);
+
+let lastChecked;
+
+function handleCheck(e) {
+  let inBetween = false;
+  if(e.shiftKey && this.checked) {
+    checkboxes.forEach(checkbox => {
+      if(checkbox === this || checkbox === lastChecked) {
+        inBetween = !inBetween
+      }
+      
+      if (inBetween) {
+        checkbox.checked = true;
+      }
+
+    });
+  }
+
+
+  lastChecked = this;
+
+}
+
+checkboxes.forEach(checkbox => checkbox.addEventListener("click", handleCheck));
+
+// if one checkbox is checked && shift key is hold
+
+
+/* function checkMultipleCheckboxes(e) {
+  e.shiftkey? checkboxes.check = true
+
+} */
 </script>
 </body>
 </html>

From 7319c54620b48208f4f406f588ecfe87ec5ba4dc Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Fri, 1 Mar 2024 10:44:50 +0100
Subject: [PATCH 18/21] get elements

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

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index d824b1e5d3..a0a712116a 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -9,7 +9,7 @@
 <body>
 
    <div class="player">
-     <video class="player__video viewer" src="652333414.mp4"></video>
+     <video class="player__video viewer" src="/652333414.mp4" autoplay></video>
 
      <div class="player__controls">
        <div class="progress">
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..cc94deab2f 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,15 @@
+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');
+
+function togglePlay() {
+    if (video.paused) {
+        video.play();
+    }else{
+        video.pause();
+    }
+}
\ No newline at end of file

From 2856fdc97e756bc9d8c0a252e594889c265d87ca Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Fri, 8 Mar 2024 17:24:43 +0100
Subject: [PATCH 19/21] exo finished, next try to put a fullscreen button

---
 11 - Custom Video Player/scripts.js | 59 ++++++++++++++++++++++++++---
 11 - Custom Video Player/style.css  |  6 ++-
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index cc94deab2f..747cc99b83 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -1,5 +1,5 @@
-const player = document.querySelector(".player");
-const video = player.querySelector(".viewer");
+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');
@@ -7,9 +7,56 @@ const skipButtons = player.querySelectorAll('[data-skip]');
 const ranges = player.querySelectorAll('.player__slider');
 
 function togglePlay() {
-    if (video.paused) {
+    const method = video.paused ? 'play' : 'pause';
+    video[method]();
+/*     if (video.paused) {
         video.play();
-    }else{
+    } else {
         video.pause();
-    }
-}
\ No newline at end of file
+    } */
+}
+
+function updateButton() {
+    console.log("update the button")
+    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;
+    console.log(this.name)
+    console.log(this.value)
+}
+
+function handleProgress() {
+    const percent = (video.currentTime / video.duration) * 100;
+    progressBar.style.flexBasis = `${percent}%`
+}
+
+function scrub(event) {
+    console.log(event);
+    const scrubTime = (event.offsetX / progress.offsetWidth) * video.duration;
+    video.currentTime = scrubTime;
+}
+
+video.addEventListener("click", togglePlay);
+video.addEventListener("play", updateButton);
+video.addEventListener("pause", updateButton);
+video.addEventListener("timeupdate", handleProgress);
+
+toggle.addEventListener("click", togglePlay);
+skipButtons.forEach(button => button.addEventListener("click", skip))
+ranges.forEach(range => range.addEventListener("change", handleRangeUpdate))
+ranges.forEach(range => range.addEventListener("mousemove", handleRangeUpdate))
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (event) => mousedown && scrub(event));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
\ No newline at end of file
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index f2420cdf32..74028f83cb 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -58,6 +58,10 @@ body {
   border-color: #ffc600;
 }
 
+.player__button:hover {
+  color: #ffc600;
+}
+
 .player__slider {
   width: 10px;
   height: 30px;
@@ -159,4 +163,4 @@ input[type=range]::-moz-range-thumb {
   border-radius: 50px;
   background: #ffc600;
   cursor: pointer;
-}
+}
\ No newline at end of file

From 32820f00210cd0a132f1a62d6530a614665083b4 Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Tue, 12 Mar 2024 11:49:00 +0100
Subject: [PATCH 20/21] ex finished

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 6ca54bf60c..4055b9da86 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,19 @@
     <link rel="icon" href="https://fav.farm/🔥" />
   </head>
   <body>
-    <script></script>
+    <script>
+      const pressed = [];
+      const secretCode = "rocket";
+
+      window.addEventListener("keyup", (e) => {
+        pressed.push(e.key);
+        pressed.splice(-secretCode.length -1,pressed.length - secretCode.length);
+        console.log(pressed);
+        if(pressed.join("").includes(secretCode)) {
+          console.log("YOU WIN 🎉")
+          cornify_add();
+        }
+      })
+    </script>
   </body>
 </html>

From 6d9c139d0a502b67992302829cd298dc67f0c17e Mon Sep 17 00:00:00 2001
From: f1uffee <antoine.lefloch@etik.com>
Date: Tue, 12 Mar 2024 16:17:07 +0100
Subject: [PATCH 21/21] ex finished

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

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index c6b4dcc6f8..75ddb43eb0 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -59,6 +59,27 @@ <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;
+        const isNotScrolledPast = window.scrollY < imageBottom
+
+        if(isHalfShown && isNotScrolledPast) {
+          sliderImage.classList.add("active");
+        } else{
+          sliderImage.classList.remove("active");
+        }
+      });
+    }
+
+    window.addEventListener("scroll", debounce(checkSlide));
+
   </script>
 
   <style>