Updated wesbos#8

komegi1215 · komegi1215 · commit f40f0ebd01d7 · 2024-04-01T08:00:33.000+09:00
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
@@ -34,17 +34,28 @@
     //   }
     // })
 
-    const isAdult = people.some(person=> ((new Date()).getFullYear()) - person.year >= 19);
     console.log({isAdult});
     // Array.prototype.every() // is everyone 19 or older?
 
+    const allAdults = people.every(person=> ((new Date()).getFullYear()) - person.year >= 19);
+
     // 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(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 = comment.findIndex(comment => comment.id === 823423);
+    comment.splice(index,1);
+
+  const newComments = [
+    comments.slice(0, index),
+    comment.slice(index+1)
+  ]
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -8,6 +8,54 @@
 <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.width = window.innerHeight;
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 100;
+ctx.globalCompositeOperation = 'multiply';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+  if(!isDrawing) return ; //stop the function from running when they are not moused down.
+  console.log(e);
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  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 --;
+ }
+}
+
+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>
