diff --git a/Day 5/style.css b/Day 5/style.css
index a5c0115..f9f442d 100644
--- a/Day 5/style.css
+++ b/Day 5/style.css
@@ -52,7 +52,7 @@ html {
.panel2 { background-image:url(https://images.unsplash.com/photo-1464297162577-f5295c892194?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1517411032315-54ef2cb783bb?q=80&w=1530&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); }
.panel4 { background-image:url(https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); }
- .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
+ .panel5 { background-image:url(https://images.unsplash.com/photo-1465156799763-2c087c332922?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1500&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MTg1MTkxMA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1500); }
/* Flex Items */
.panel > * {
diff --git a/Day 7/index.html b/Day 7/index.html
new file mode 100644
index 0000000..896b5fa
--- /dev/null
+++ b/Day 7/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Array Cardio Day 2
+
+
+
+
+
+
+
+ home
+ Psst: have a look at the JavaScript Console 💁
+
+
\ No newline at end of file
diff --git a/Day 7/script.js b/Day 7/script.js
new file mode 100644
index 0000000..0811d88
--- /dev/null
+++ b/Day 7/script.js
@@ -0,0 +1,47 @@
+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 },
+];
+
+console.table(people);
+console.table(comments);
+
+// Some and Every Checks
+// Array.prototype.some() // is at least one person 19 or older?
+const isAdult = people.some((person) => {
+ const currentYear = (new Date()).getFullYear();
+ return currentYear - person.year >= 19;
+});
+
+console.log('Is at least one person 19 or older?', isAdult);
+
+// Array.prototype.every() // is everyone 19 or older?
+const allAdults = people.every((person) => {
+ const currentYear = (new Date()).getFullYear();
+ return currentYear - person.year >= 19;
+})
+console.log('Is everyone 19 or older?', allAdults);
+
+//Array.prototype.find()
+const comment = comments.find((comment) => comment.id === 823423);
+console.log('find comment of id 823423', comment);
+
+//Array.prototype.findIndex()
+
+const index = comments.findIndex((comment) => comment.id === 823423);
+console.log('find index of comment of id 823423', index);
+console.log("deleted comment id 823423: ");
+console.table(
+ comments.slice(0, index).concat(comments.slice(index + 1))
+);
+
diff --git a/Day 7/style.css b/Day 7/style.css
new file mode 100644
index 0000000..46156a9
--- /dev/null
+++ b/Day 7/style.css
@@ -0,0 +1,38 @@
+*{
+ box-sizing: box-border;
+}
+
+html, body{
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+body{
+ background: url('https://images.unsplash.com/photo-1603190287605-e6ade32fa852?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+ background-size: fill;
+ background-position: center;
+ background-repeat: no-repeat;
+ display: flex;
+}
+.home{
+ position:fixed;
+ top:0;
+ left: 0;
+ padding: 1%;
+ color: black;
+}
+
+p{
+ color: rgb(3, 250, 196);
+ margin: auto;
+ font-size: 2em;
+ font-weight:bolder;
+}
+
+.home{
+ position:fixed;
+ top:0;
+ left: 0;
+ padding: 1%;
+}
\ No newline at end of file
diff --git a/Day 8/index.html b/Day 8/index.html
new file mode 100644
index 0000000..f9ccc75
--- /dev/null
+++ b/Day 8/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Fun With HTML5 Canvas
+
+
+
+
+
+
+
+ home
+
+
+
+
\ No newline at end of file
diff --git a/Day 8/script.js b/Day 8/script.js
new file mode 100644
index 0000000..229be55
--- /dev/null
+++ b/Day 8/script.js
@@ -0,0 +1,71 @@
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const lineJoin = ['miter', 'round', 'bevel'];
+const lineCap = ['butt', 'round', 'square'];
+
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 10;
+ctx.globalCompositeOperation = 'lighter';
+
+let isDrawing = false; //is the user currently drawing
+let [lastX, lastY] = [0, 0];
+let hue = 0;
+let direction = true;
+let saturation = '100%';
+function draw(e){
+ if (!isDrawing) return;
+ console.log(e);
+ // Randomize the saturation between 50% and 100%
+ saturation = Math.floor(Math.random() * 51) + 50 + "%";
+ console.log("saturation", saturation);
+ ctx.strokeStyle = `hsl(${hue}, ${saturation}, 50%`;
+
+ ctx.beginPath();
+ //start from
+ ctx.moveTo(lastX, lastY);
+ //go to
+ ctx.lineTo(e.offsetX, e.offsetY);
+ ctx.stroke();
+ [lastX, lastY] = [e.offsetX, e.offsetY];
+
+ hue = hue >= 360 ? 0 : hue + 1;
+
+ if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) direction = !direction;
+ direction ? ctx.lineWidth++ : ctx.lineWidth--;
+}
+function onResize() {
+ // We need to define the dimensions of the canvas to our canvas element
+ // Javascript doesn't know the computed dimensions from CSS so we need to do it manually
+ width = window.innerWidth;
+ height = window.innerHeight;
+
+ // If the screen device has a pixel ratio over 1
+ // We render the canvas twice bigger to make it sharper (e.g. Retina iPhone)
+
+}
+
+// Listen to resize events
+window.addEventListener('resize', onResize);
+// Make sure the canvas size is perfect
+onResize();
+
+canvas.addEventListener('mousedown', (e) => {
+ ctx.lineJoin = lineJoin[Math.floor(Math.random() * lineJoin.length)];;
+ ctx.lineCap = lineCap[Math.floor(Math.random() * lineCap.length)];
+
+ console.log(ctx.lineJoin, ctx.lineCap);
+ isDrawing = true;
+ [lastX, lastY] = [e.offsetX, e.offsetY]; //update to mouse position
+});
+canvas.addEventListener('mousemove', (e) =>{
+
+ draw(e);
+});
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout', () => isDrawing = false);
+
diff --git a/Day 8/style.css b/Day 8/style.css
new file mode 100644
index 0000000..fac8846
--- /dev/null
+++ b/Day 8/style.css
@@ -0,0 +1,11 @@
+html, body {
+ margin: 0;
+}
+
+.home{
+ position:fixed;
+ top:0;
+ left: 0;
+ padding: 1%;
+ color: black;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0b4246a..49ff161 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,18 @@ Day 6
Ajax Type Ahead
+
+