Added files

jordles · Jun 4, 2024 · 2236fd1 · 2236fd1
1 parent 4427d01
commit 2236fd1
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 1 deletion.
diff --git 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
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Array Cardio Day 2</title>
+    <link rel="stylesheet" href="../normalize.css">
+    <link rel="stylesheet" href="../reset.css">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <a href="../" alt="Home"><span class="material-icons-round home">home</span></a>
+    <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
+</body>
+</html>
diff --git a/Day 7/script.js 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
@@ -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%;
+}
diff --git a/Day 8/index.html b/Day 8/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fun With HTML5 Canvas</title>
+    <link rel="stylesheet" href="../normalize.css">
+    <link rel="stylesheet" href="../reset.css">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <a href="../" alt="Home"><span class="material-icons-round home">home</span></a>
+    <canvas id="draw" width="800" height="800"></canvas>
+
+</body>
+</html>
diff --git a/Day 8/script.js 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
@@ -0,0 +1,11 @@
+html, body {
+    margin: 0;
+}
+
+.home{
+    position:fixed;
+    top:0;
+    left: 0;
+    padding: 1%;
+    color: black;
+}
diff --git a/index.html b/index.html
@@ -67,6 +67,18 @@ <h2>Day <span class="gold">6</span></h2>
           <h3>Ajax Type Ahead</h3>
         </a>
       </div>
+      <div class="challenges">
+        <a href="./Day 7/" alt="Day 7 - Array Cardio Day 2">
+          <h2>Day <span class="gold">7</span></h2>
+          <h3>Array Cardio Part 2</h3>
+        </a>
+      </div>
+      <div class="challenges">
+        <a href="./Day 8/" alt="Day 8 - fun with HTML% Canvas">
+          <h2>Day <span class="gold">8</span></h2>
+          <h3>Fun with HTML5 Canvas</h3>
+        </a>
+      </div>
     </section>
 
   </body>