diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md
new file mode 100644
index 0000000000..d99f715833
--- /dev/null
+++ b/01 - JavaScript Drum Kit/README.md	
@@ -0,0 +1,21 @@
+# Goal:
+
+This project will focus on keycodes pressed by the user, how the programmer can access/modify the object's data, as well as how functions can be formatted/called. (Keyevents, audio, and animation)
+
+## Summary:
+
+Each key on the keyboard has a given keycode number that is represented by it. You can see keycodes associated to the keys on keyboard [here](http://keycode.info). By setting the keycode value to objects in the window, you can access them collectively. By adding an EventListener to the window object (set to listen to 'keydown'), you can associate a function to be called every time that EventListener is triggered.
+
+**NOTE:** You can set up an anonymous function or a regular function to be associated to your EventListener, just like in many other languages.
+
+You can access the document object for any objects in the HTML document. By using the querySelector method, by specifying an object, you can get it saved into a user defined object. You will either access the given object, or get NULL. For this project, we use it in order to get the audio element, which is a file that contains the audio related to the key. We also use it in order to add a class to a CSS element.
+
+Outside of the EventListener method, we need to remove any transforming changes to an element's class. Calling querySelectorAll, we can get all the elements associated to the key class. Using the forEach method on the key class, we can call the function removeTransition in order to remove any transition involving transform so that the animation for the key will not halt at the end animation, but will reset to it's original state.
+
+**NOTE:** console.log() is useful for finding out the information that is stored within any elements or debugging.
+
+## One Thing Learned:
+
+One of the biggest things I learned during this project (which would've fixed a lot of errors that I had previously with audio), was that I could set the value of the audio's currentTime to 0. This will instantly set the audio's playing time back at the beginning, preventing audio from overlapping, and allowing repetitive playing of an audio file.
+
+
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..03860fe750 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,23 @@
 
 <script>
 
+
+function playSound(e) {
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  if(!audio) return;
+  audio.currentTime = 0;
+  audio.play();
+  key.classList.add('playing');
+}
+
+function removeTransition(e) {
+  if(e.propertyName !== 'transform') return;
+  this.classList.remove('playing');
+}
+window.addEventListener('keydown', playSound);
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 </script>
 
 
diff --git a/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md
new file mode 100644
index 0000000000..70cef665b0
--- /dev/null
+++ b/02 - JS + CSS Clock/README.md	
@@ -0,0 +1,15 @@
+# Goal:
+
+Learn how to manipulate CSS aspects through JavaScript.
+
+## Summary:
+
+CSS elements can be edited through getting the class elements with querySelector and changing the style attribute of the class element. For us, we changed the style.transform attribute, calling the rotate method and changing each time-hand type with their respective degrees (hour, min, second). We made sure that this function change updated the hand's position would only be called at given interval times (every 1 sec). We set the transform origin to 100% so that the hand would rotate based on the x axis of the image. Additionally, we changed the transition for all hands to be 0.05 seconds so they would have a mini buffer time. Furthermore, we changeed the transition-timing-function based on the cubic-bezier function (changing some values through a simple interface.) so that the change would have some repetitive backwards/forwards motion to mimic the clock hands jittery movement.
+
+**NOTE:** There is a small choke for the program when the seconds reach 0. At that point, the second (and potentially minute/hour) hand causes a very abrupt stutter in the UI update. Can be fixed with some simple if/else statements 
+
+
+## One Thing Learned:
+
+JavaScript scripts are not to difficult to make, but creating the initial interface and design takes quite some time. Fortunately these proejcts come with sample code, making it easy just to focus on the back-end code.
+
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..abe45ff7c8 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.23, 1.92, 0.58, 1);
     }
 
   </style>
 
   <script>
+  const secondHand = document.querySelector('.second-hand');
+  const minHand = document.querySelector('.min-hand');
+  const hourHand = document.querySelector('.hour-hand');
 
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      const minutesDegrees = (minutes * 6) + 90;
+      minHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hoursDegrees = (hours * 30) + 90;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+    }
+
+    setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/README.md b/03 - CSS Variables/README.md
new file mode 100644
index 0000000000..86e24a245f
--- /dev/null
+++ b/03 - CSS Variables/README.md	
@@ -0,0 +1,16 @@
+# Goal:
+
+Learn how to update CSS variables through Javascript.
+
+## Summary:
+
+Any element that geta set to a certain CSS variable will be updated by the value of that CSS variable if it gets updated through JavaScript. There is a root selector that can be set certain values based on different CSS declarations. We use querySelectorAll in order to access the Node List of all .controls class elements. We have eventListeners over the elements through keywords 'change' (when a slider or color changer is moved and changed the moment after releasing hold of color/position selector) and 'mousemove' (when a slider or color changer changes as it is move, without releasing hold of color/position selector).
+
+**NOTE:** A Node List contains less informational data than an Array data structure. When you call querySelectorAll, unless you convert it, you get a Node list.
+
+We have a div class in our HTML that contains the 'controls' to edit the spacing, blur, and color of the website. Data can be saved within 'input' containers (data such as the value, type, and name). These 'input' values can be assigned to different elements in the document so that whenever that value changes, the CSS element associated to that variable will change also. 
+
+## One Thing Learned:
+
+For CSS variables, you must add an additional '--' before the variable name in order for the value held within the variable to be stored, edited, or assigned.
+
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..fc31ed3c5f 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+  :root {
+    --base: #ffc600;
+    --spacing: 10px;
+    --blur: 10px;
+  }
 
+  img {
+    padding: var(--spacing);
+    background: var(--base);
+    filter: blur(var(--blur));
+  }
+
+  .h1{
+    color: var(--base);
+  }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -53,6 +67,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+      const suffix= this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix);
+    }
+
+    inputs.forEach(input => input.addEventListener('change',handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md
new file mode 100644
index 0000000000..b4c46eda1a
--- /dev/null
+++ b/04 - Array Cardio Day 1/README.md	
@@ -0,0 +1,19 @@
+# Goal:
+
+Learn Array methods and conversions.
+
+## Summary:
+
+Worked on learning Array's filter, map, sort, and reduce, as well as how to shorten function syntax. You can either create an anonymous functions (function(...) {...} ) or arrow functions ( (...) => {...} ) for the input of the Array's methods. 
+
+**NOTE:** Reduce is the only method that requires two parameters instead of one.
+
+**NOTE:** For printing out filter or sort, instead of using console.log, we can use console.table in order to print out all the entries of the object returned into a very clean table.
+
+We worked also with a wikipedia link, getting all link elements (<a>) and parsing out the text to get all Boulevards that had 'de' in their name. This was used using the '.includes' method, which returns a boolean value.
+
+Additionally, we used ternary operators in order to reduce if/else statments to very short code. Ex. return (a == b) ? true : false;
+
+## One Thing Learned:
+
+In order to convert a NodeList into an array, you need to call 'Array.from(...)'. This will return you an Array, which allows you to use many more functions than just ForEach.
\ No newline at end of file
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 6e28e357d0..33aacac31e 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,29 +27,108 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+
+    console.table(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventory 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 birthOldToYoung = inventors.sort(function(a, b) {
+    //   if(a.year > b.year) {
+    //     return 1;
+    //   } else {
+    //     return -1;
+    //   }
+      
+    // });
+    const birthOldToYoung = inventors.sort((a , b) => a.year > b.year ? 1 : -1);
+
+    console.table(birthOldToYoung);
+
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const yearsLived = inventors.reduce(function(total, inventor) {
+      return total + (inventor.passed - inventor.year);
+    },0);
+
+    console.log(yearsLived);
+
 
     // 5. Sort the inventors by years lived
+    const livedOrdered = inventors.sort((a,b) => (a.passed - a.year) > (b.passed - b.year) ? 1: -1);
 
+    console.table(livedOrdered);
+    
     // 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(text => text.includes('de'));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    // const peopleSort = people.sort((a, b) => a.split(' ')[1] > b.split(' ')[1] ? 1 : -1);
+    const peopleSort = people.sort((firstPeople, lastPeople) => {
+      const [aLast, aFirst] = firstPeople.split(', ');
+      const [bLast, bFirst] = lastPeople.split(', ');
+      return aLast > bLast ? 1 : -1;
+    });
+
+    console.log(peopleSort);
 
     // 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 carCount = data.reduce(function(total, move) {
+    //   return move == 'car' ? total + 1 : total;
+    // },0);
+
+    // console.log(`number of cars = ${carCount}`);
+
+    // const bikeCount = data.reduce(function(total, move) {
+    //   return move == 'bike' ? total + 1 : total;
+    // },0);
+
+    // console.log(`number of bikes = ${bikeCount}`);
+
+    // const truckCount = data.reduce(function(total, move) {
+    //   return move == 'truck' ? total + 1 : total;
+    // },0);
+
+    // console.log(`number of trucks = ${truckCount}`);
+
+    // const vanCount = data.reduce(function(total, move) {
+    //   return move == 'van' ? total + 1 : total;
+    // },0);
+
+    // console.log(`number of vans = ${vanCount}`);
+
+    // const walkCount = data.reduce(function(total, move) {
+    //   return move == 'walk' ? total + 1 : total;
+    // },0);
+
+    // console.log(`number of walks = ${walkCount}`);
+
+    const transportation = data.reduce(function(obj, item) {
+      if(!obj[item]) {
+        obj[item] = 0;
+      }
+      ++obj[item];
+      return obj;
+    }, {});
+
+    console.log(transportation);
+
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md
new file mode 100644
index 0000000000..13a9e6d152
--- /dev/null
+++ b/05 - Flex Panel Gallery/README.md	
@@ -0,0 +1,16 @@
+# Goal:
+
+Learn how to work with flex. Combination of adding CSS attributes for flex and transforming characteristics with flex.
+
+## Summary:
+
+A lot of CSS attributes have to be added to this websites in order to allow for much of the formatting (flex, justify-content, align-content, display, flex-direction.)
+
+Classes can be added with operations (>, <, etc...) in order to indicate the children within a given element to change a certain format. (Ex. .panel > *:last-child). These transformations are triggered based on the class contained within an element. When transformations happen, the time it takes for transformations to take place change based on transition set in classes.
+
+**NOTE:** Keeping flex at 1 will ensure that all the parts that contain that flex will only take up 1x of the given section. Changing number changes the ratio that is taken up (5 => 5 times).
+
+## One Thing Learned:
+
+The transitionend propertyname for Safari ('flex') is different compared to Chrome or FireFox ('flex-grow'). In order to accomadate both versions when taking note of the transitionend's propertyname, use 'includes('flex')' to cover both cases. 
+
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..c770737c06 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      justify-content: center;
+      align-content: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -61,12 +67,23 @@
       font-family: 'Amatic SC', cursive;
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
+      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:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,7 +124,21 @@
   </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');
+    }
+   }
+
+   panels.forEach(panel => panel.addEventListener('click', toggleOpen));
 
+   panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
   </script>
 
 
diff --git a/06 - Type Ahead/README.md b/06 - Type Ahead/README.md
new file mode 100644
index 0000000000..d080101962
--- /dev/null
+++ b/06 - Type Ahead/README.md	
@@ -0,0 +1,15 @@
+# Goal:
+
+Learn how to interact with endpoint data, work with regex, and insert additional html code.
+
+## Summary:
+
+To make a request for data, you can use fetch(...) with the http url of the data. You can add a then(...) in order to add a function to reformat the data. In our code, we fetch the json data, then reformat it into json, and then finally we take the data, spread it out '...', and push it into a const array where our data will be stored.
+
+Once again, we come back to our eventListeners. After querySelector'ing the search element, we add eventListners with methods in order to assert whether a 'change' or a 'keyup' occurs and call the displayMatches() function. Our displayMatches function will call findMatches(..., ...), which will find all cities/states that are related to the keyword searched (through Regex object) and return an array of those Objects.
+
+Using the .map(...) method, we can change the innerHTML code of the suggestion element in order to show which cities/states are related to the search keyword. Adding a <span> with class of 'h1' allowed for highlighting the parts of the word that were related. I believe that innerHTML initially (first time) doesn't contain anything (unless initially set), so the html of suggestions just gets replaced each time a change in keyword is made.
+
+## One Thing Learned:
+
+With JavaScript, you can inject additional html code through these `` marks. Setting that code to the given innerHTML of any element (or possibly other areas) will change up the code to contain those additional characteristics within the code. This is good if you want to reproduce many elements that show data, change up the view of the interface, or do other flashy html additions.
\ No newline at end of file
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..6637f8d220 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,46 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+
+fetch(endpoint)
+.then(blob => blob.json()
+.then(data => cities.push(...data)));
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    const regex = new RegExp(wordToMatch, 'gi');
+    return place.city.match(regex) || place.state.match(regex);
+  });
+
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function 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 bdf6c44415..19c4ff2631 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -30,38 +30,41 @@
     //   if(currentYear - person.year >= 19) {
     //     return true;
     //   }
-    // });
+    // })
+    
+    const isAdult = people.some(person => {
+      const currentYear = (new Date()).getFullYear();
+      return (currentYear - person.year) >= 19;
+    });
 
-    const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
-
-    console.log({isAdult});
     // Array.prototype.every() // is everyone 19?
+    const allAdults = people.every(person => {
+      const currentYear = (new Date()).getFullYear();
+      return (currentYear - person.year) >= 19;
+    });
 
-    const allAdults = 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 foundComment = comments.find(text => return text.id == 823423);
 
 
-    const comment = comments.find(comment => comment.id === 823423);
-
-    console.log(comment);
-
     // 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);
+    const foundIndex = comments.findIndex(text => return text.id == 823423);
 
-    // comments.splice(index, 1);
+    comments.splice(foundIndex);
+
+    // or
 
     const newComments = [
-      ...comments.slice(0, index),
-      ...comments.slice(index + 1)
+      ...comments.splice(0, foundIndex),
+      ...comments.splice(foundIndex+1)
     ];
 
+
   </script>
 </body>
 </html>
diff --git a/08 - Fun with HTML5 Canvas/README.md b/08 - Fun with HTML5 Canvas/README.md
new file mode 100644
index 0000000000..cb7cee1c77
--- /dev/null
+++ b/08 - Fun with HTML5 Canvas/README.md	
@@ -0,0 +1,18 @@
+# Goal:
+
+Learn how to use HTML5 Canvas.
+
+## Summary:
+
+Canvas has many features. Once you gain access to the canvas through querySelector, get the 2d context, and set the width and height, you can edit the attributes of ctx in order to edit and change the canvas.
+
+ctx.beginPath() - begins path, or resets to a new path
+ctx.moveTo(lastX, lastY) - moves the coordinates the path is to the given coordinates
+ctx.lineTo(e.offsetX, e.offsetY) - Creates a line to the given coordinate from the last asserted point
+ctx.stroke() - draws the path that is defined.
+ctx.lineWidth = 100 - change the width of the line.
+
+## One Thing Learned:
+
+The context of a contains all the information you need to change and edit, whether manually or through methods.
+
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..cdbbf66d0c 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,60 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+// ctx.globalCompositeOperation = 'multiply';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+ctx.lineWidth = 100;
+
+function draw(e) {
+	if (!isDrawing) return;
+
+	ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+	// ctx.lineWidth = hue;
+	ctx.beginPath();
+	ctx.moveTo(lastX, lastY);
+	ctx.lineTo(e.offsetX, e.offsetY);
+	ctx.stroke();
+
+	[lastX, lastY] = [e.offsetX, e.offsetY];
+	hue++;
+	if(hue > 360) {
+		hue = 0;
+	}
+
+	if(ctx.lineWidth >=100 || ctx.lineWidth <= 1) {
+		direction = !direction;
+	}
+	if(direction) {
+		ctx.lineWidth++;
+	} else {
+		ctx.lineWidth--;
+	}
+	// lastX = e.offSetX;
+	// lastY = 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>