Test your skills assignment

nlz18001 · Mar 21, 2024 · 76ce8e3 · 76ce8e3
1 parent 7ac3bf6
commit 76ce8e3
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 0 deletions.
diff --git a/week-09/test-your-skills/event-1.html b/week-09/test-your-skills/event-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Events: Task 1</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      button {
+        display: block;
+        margin: 20px 0 20px 20px;
+      }
+    </style>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+    </section>
+
+    <button class="off">Machine is off</button>
+
+  <script>
+    const btn = document.querySelector('.off');
+
+    // Add your code here
+    btn.addEventListener('click', toggleButton)
+    function toggleButton(){
+        if (this.textContent === 'Machine is off') {
+          this.textContent = 'Machine is on';
+        } else {
+          this.textContent = 'Machine is off';
+        }
+    }
+  </script>
+
+  </body>
+</html>
diff --git a/week-09/test-your-skills/event-2.html b/week-09/test-your-skills/event-2.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Events: Task 2</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+    </section>
+
+    <canvas width="480" height="320" tabindex="0">
+
+    </canvas>
+
+  <script>
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    function drawCircle(x, y, size) {
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.beginPath();
+      ctx.fillStyle = 'black';
+      ctx.arc(x, y, size, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+
+    let x = 50;
+    let y = 50;
+    const size = 30;
+
+    drawCircle(x, y, size);
+
+    // Add your code here
+    document.addEventListener('keydown', function(event) {
+    const moveDistance = 5;
+
+    switch(event.key.toLowerCase()) {
+      case 'w':
+        y -= moveDistance;
+        break;
+      case 's':
+        y += moveDistance;
+        break;
+      case 'a':
+        x -= moveDistance;
+        break;
+      case 'd':
+        x += moveDistance;
+        break;
+    }
+
+    x = Math.max(size, Math.min(canvas.width - size, x));
+    y = Math.max(size, Math.min(canvas.height - size, y));
+
+    drawCircle(x, y, size);
+  });
+  </script>
+  </body>
+
+</html>
diff --git a/week-09/test-your-skills/event-3.html b/week-09/test-your-skills/event-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Events: Task 3</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      button {
+        display: block;
+        margin: 20px 0 20px 20px;
+      }
+
+      .button-bar {
+        padding: 20px 0;
+      }
+    </style>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+    </section>
+
+    <div class="button-bar">
+      <button data-color="red">Red</button>
+      <button data-color="yellow">Yellow</button>
+      <button data-color="green">Green</button>
+      <button data-color="purple">Purple</button>
+    </div>
+
+  <script>
+
+  const buttonBar = document.querySelector('.button-bar');
+
+  // Add your code here
+  buttonBar.addEventListener('click', function(e) {
+    const target = e.target;
+    if (target.tagName === 'BUTTON') {
+      const color = target.getAttribute('data-color');
+      buttonBar.style.backgroundColor = color;
+    }
+  });
+  </script>
+  </body>
+</html>