+ `;
+ }).join('');
+ // console.log(matchArray);
+ suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/src/index-FINISHED.html
similarity index 100%
rename from 06 - Type Ahead/index-FINISHED.html
rename to 06 - Type Ahead/src/index-FINISHED.html
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/src/index-START.html
similarity index 100%
rename from 06 - Type Ahead/index-START.html
rename to 06 - Type Ahead/src/index-START.html
diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html
new file mode 100644
index 0000000000..33a7530b5e
--- /dev/null
+++ b/07 - Array Cardio Day 2/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ Array Cardio 💪💪
+
+
+
+
Psst: have a look at the JavaScript Console 💁
+
+
+
diff --git a/07 - Array Cardio Day 2/js/script.js b/07 - Array Cardio Day 2/js/script.js
new file mode 100644
index 0000000000..2e6737167b
--- /dev/null
+++ b/07 - Array Cardio Day 2/js/script.js
@@ -0,0 +1,56 @@
+// ## Array Cardio Day 2
+
+const people = [
+ { name: "Wes", year: 1988 },
+ { name: "Kait", year: 1986 },
+ { name: "Irv", year: 1970 },
+ { name: "Lux", year: 2015 }
+];
+
+const comments = [
+ { text: "Love this!", id: 523423 },
+ { text: "Super good", id: 823423 },
+ { text: "You are the best", id: 2039842 },
+ { text: "Ramen is my fav food ever", id: 123523 },
+ { text: "Nice Nice Nice!", id: 542328 }
+];
+
+// Some and Every Checks
+// Array.prototype.some() // is at least one person 19 or older?
+
+// const isAdult = people.some(function(person) {
+// const currentYear = new Date().getFullYear();
+// if (currentYear - person.year >= 19) {
+// return true;
+// }
+// });
+const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
+console.log({ isAdult });
+
+// Array.prototype.every() // is everyone 19 or older?
+const allAdult = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
+console.log({ allAdult });
+
+// 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;
+// }
+// });
+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);
+// comments.splice(index,1);
+const newComments = [
+ ...comments.slice(0, index),
+ ...comments.slice(index +1)
+];
\ No newline at end of file
diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/src/index-FINISHED.html
similarity index 100%
rename from 07 - Array Cardio Day 2/index-FINISHED.html
rename to 07 - Array Cardio Day 2/src/index-FINISHED.html
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/src/index-START.html
similarity index 100%
rename from 07 - Array Cardio Day 2/index-START.html
rename to 07 - Array Cardio Day 2/src/index-START.html
diff --git a/08 - Fun with HTML5 Canvas/css/style.css b/08 - Fun with HTML5 Canvas/css/style.css
new file mode 100644
index 0000000000..05ecf59aa4
--- /dev/null
+++ b/08 - Fun with HTML5 Canvas/css/style.css
@@ -0,0 +1,3 @@
+html, body {
+ margin: 0;
+}
\ No newline at end of file
diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html
new file mode 100644
index 0000000000..365c41a055
--- /dev/null
+++ b/08 - Fun with HTML5 Canvas/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ HTML5 Canvas
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/08 - Fun with HTML5 Canvas/js/script.js b/08 - Fun with HTML5 Canvas/js/script.js
new file mode 100644
index 0000000000..c23ec38caf
--- /dev/null
+++ b/08 - Fun with HTML5 Canvas/js/script.js
@@ -0,0 +1,53 @@
+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.lineWidth = 50;
+ctx.globalCompositeOperation = 'multiply';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+ if (!isDrawing) return; //stops the fn from running when they are not moused down
+ console.log(e);
+ ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+ // ctx.lineWidth = hue;
+ ctx.beginPath();
+ //start from
+ ctx.moveTo(lastX, lastY);
+ //go to
+ ctx.lineTo(e.offsetX, e.offsetY);
+ ctx.stroke();
+ // lastX = e.offsetX;
+ // lastY = e.offsetY;
+ [lastX, lastY] = [e.offsetX, e.offsetY]; //destructuring array
+ hue++;
+ if (hue >= 360) {
+ hue = 0;
+ }
+ if (ctx.lineWidth >= 50 || ctx.lineWidth <= 1) {
+ direction = !direction;
+ }
+ if (direction) {
+ ctx.lineWidth++;
+ } else {
+ ctx.lineWidth--;
+ }
+}
+
+canvas.addEventListener("mousedown", e => {
+ isDrawing = true;
+ [lastX, lastY] = [e.offsetX, e.offsetY];
+});
+
+canvas.addEventListener("mousemove", draw);
+canvas.addEventListener("mousedown", () => (isDrawing = true));
+canvas.addEventListener("mouseup", () => (isDrawing = false));
+canvas.addEventListener("mouseout", () => (isDrawing = false));
diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/src/index-FINISHED.html
similarity index 100%
rename from 08 - Fun with HTML5 Canvas/index-FINISHED.html
rename to 08 - Fun with HTML5 Canvas/src/index-FINISHED.html
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/src/index-START.html
similarity index 100%
rename from 08 - Fun with HTML5 Canvas/index-START.html
rename to 08 - Fun with HTML5 Canvas/src/index-START.html
diff --git a/29 - Countdown Timer/scripts-START.js b/09 - Dev Tools Domination/css/style.css
similarity index 100%
rename from 29 - Countdown Timer/scripts-START.js
rename to 09 - Dev Tools Domination/css/style.css
diff --git a/09 - Dev Tools Domination/index.html b/09 - Dev Tools Domination/index.html
new file mode 100644
index 0000000000..641be127ee
--- /dev/null
+++ b/09 - Dev Tools Domination/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Console Tricks!
+
+
+
+
+
×BREAK×DOWN×
+
+
+
+
diff --git a/09 - Dev Tools Domination/js/script.js b/09 - Dev Tools Domination/js/script.js
new file mode 100644
index 0000000000..c8ab1582bf
--- /dev/null
+++ b/09 - Dev Tools Domination/js/script.js
@@ -0,0 +1,64 @@
+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
+console.log("hello");
+
+// Interpolated
+console.log("Hello I am a %s string!", "💩");
+console.log(`Hello I am a ${"💩"} string!`);
+
+// Styled
+console.log("%c I am some great text", "font-size:8px; background:gray;");
+
+// warning!
+console.warn("oh noooo");
+
+// Error :|
+console.error("💩");
+
+// Info
+console.info("crocodiles eat 3-4 people per year");
+
+// Testing
+// console.assert(1 === 2, 'This is wrong!');
+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);
+
+// 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("dog");
+console.count("Steve");
+console.count("John");
+console.count("dog");
+
+// 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);
diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/src/index-FINISHED.html
similarity index 100%
rename from 09 - Dev Tools Domination/index-FINISHED.html
rename to 09 - Dev Tools Domination/src/index-FINISHED.html
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/src/index-START.html
similarity index 100%
rename from 09 - Dev Tools Domination/index-START.html
rename to 09 - Dev Tools Domination/src/index-START.html
diff --git a/10 - Hold Shift and Check Checkboxes/css/style.css b/10 - Hold Shift and Check Checkboxes/css/style.css
new file mode 100644
index 0000000000..afcaa0bbba
--- /dev/null
+++ b/10 - Hold Shift and Check Checkboxes/css/style.css
@@ -0,0 +1,42 @@
+html {
+ font-family: sans-serif;
+ background: #ffc600;
+}
+
+.inbox {
+ max-width: 400px;
+ margin: 50px auto;
+ background: white;
+ border-radius: 5px;
+ box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #f1f1f1;
+}
+
+.item:last-child {
+ border-bottom: 0;
+}
+
+input:checked + p {
+ background: #f9f9f9;
+ text-decoration: line-through;
+}
+
+input[type="checkbox"] {
+ margin: 20px;
+}
+
+p {
+ margin: 0;
+ padding: 20px;
+ transition: background 0.2s;
+ flex: 1;
+ font-family: "helvetica neue";
+ font-size: 20px;
+ font-weight: 200;
+ border-left: 1px solid #d1e2ff;
+}
diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html
new file mode 100644
index 0000000000..c4bd5465aa
--- /dev/null
+++ b/10 - Hold Shift and Check Checkboxes/index.html
@@ -0,0 +1,57 @@
+
+
+
+
+ Hold Shift to Check Multiple Checkboxes
+
+
+
+
+
+
+
+
+
This is an inbox layout.
+
+
+
+
Check one item
+
+
+
+
Hold down your Shift key
+
+
+
+
Check a lower item
+
+
+
+
Everything in between should also be set to checked
+
+
+
+
Try to do it without any libraries
+
+
+
+
Just regular JavaScript
+
+
+
+
Good Luck!
+
+
+
+
Don't forget to tweet your result!
+
+
+
+
+
+
diff --git a/10 - Hold Shift and Check Checkboxes/js/script.js b/10 - Hold Shift and Check Checkboxes/js/script.js
new file mode 100644
index 0000000000..37a94fe1c3
--- /dev/null
+++ b/10 - Hold Shift and Check Checkboxes/js/script.js
@@ -0,0 +1,28 @@
+const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+// console.log(checkboxes);
+
+function handleCheck(e) {
+ // console.log(e);
+
+ // check if they had the shift key down
+ // AND check that they are checking it
+ let inBetween = false;
+ if (e.shiftKey && this.checked) {
+ // go ahead and do what we please
+ // loop over every single checkbox
+ checkboxes.forEach(checkbox => {
+ console.log(checkboxes);
+ if (checkbox === this || checkbox === lastChecked) {
+ inBetween = !inBetween;
+ console.log("Starting to check them inbetween!");
+ }
+
+ if (inBetween) {
+ checkbox.checked = true;
+ }
+ });
+ }
+ lastChecked = this;
+}
+
+checkboxes.forEach(checkbox => checkbox.addEventListener("click", handleCheck));
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/src/index-FINISHED.html
similarity index 100%
rename from 10 - Hold Shift and Check Checkboxes/index-FINISHED.html
rename to 10 - Hold Shift and Check Checkboxes/src/index-FINISHED.html
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/src/index-START.html
similarity index 100%
rename from 10 - Hold Shift and Check Checkboxes/index-START.html
rename to 10 - Hold Shift and Check Checkboxes/src/index-START.html
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/css/style.css
similarity index 100%
rename from 11 - Custom Video Player/style.css
rename to 11 - Custom Video Player/css/style.css
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 57b3260bc2..58dbaf561e 100644
--- a/11 - Custom Video Player/index.html
+++ b/11 - Custom Video Player/index.html
@@ -3,7 +3,7 @@
HTML Video Player
-
+
@@ -22,6 +22,6 @@
-
+