uploaded files

pcm20001 · Mar 24, 2024 · 4262b86 · 4262b86
1 parent 15cb238
commit 4262b86
Show file tree

Hide file tree

Showing 6 changed files with 262 additions and 0 deletions.
diff --git a/week-09/backgroundchanger.html b/week-09/backgroundchanger.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        p,
+label {
+  font:
+    1rem 'Fira Sans',
+    sans-serif;
+}
+
+input {
+  margin: 0.4rem;
+}
+
+    </style>
+</head>
+<body>
+    <p>Oooo... look ! You can change the background colors !</p>
+<div>
+  <input type="color" id="color-picker" name="body" value="#f6b73c" />
+  <label for="body">Body</label>
+</div>
+
+<script>
+    //one function
+    const colorPicker = document.getElementById("color-picker");
+    function changeBackgroundColor() {
+        document.body.style.backgroundColor = colorPicker.value;
+    }
+
+    //two events 
+colorPicker.addEventListener('input', changeBackgroundColor);
+colorPicker.addEventListener('change', changeBackgroundColor);
+
+</script>
+</body>
+</html>
diff --git a/week-09/event1.css b/week-09/event1.css
@@ -0,0 +1,13 @@
+p {
+    color: purple;
+    margin: 0.5em 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  button {
+    display: block;
+    margin: 20px 0 20px 20px;
+  }
diff --git a/week-09/event1.html b/week-09/event1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="event1.css" />
+    <title>Document</title>
+</head>
+<body>
+    <section class="preview">
+    </section>
+
+    <button class="off">Machine is off</button>
+
+  <script>
+    const btn = document.querySelector('.off');
+
+    btn.addEventListener("click", function(e) {
+      if(btn.innerHTML === "Machine is off") {
+        btn.innerHTML = "Machine is on";
+      }
+      else {
+        btn.innerHTML="Machine is off";
+      }
+    });
+
+    // Add your code here
+
+  </script>
+
+</body>
+</html>
diff --git a/week-09/event2.html b/week-09/event2.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        p {
+          color: purple;
+          margin: 0.5em 0;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        canvas {
+          border: 1px solid black;
+        }
+      </style>
+</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 step = 5;
+    switch(event.key) {
+        case "ArrowUp":
+        y -= step;
+        break;
+        case "ArrowDown":
+        y += step;
+        break;
+        case "ArrowLeft":
+        x -= step;
+        break;
+        case "ArrowRight":
+        x += step;
+        break;
+    }
+    drawCircle(x,y,size);
+});
+  </script>
+</body>
+</html>
diff --git a/week-09/event3.html b/week-09/event3.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</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>
+</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');
+buttonBar.addEventListener("click", function(event) {
+const target = event.target;
+if (target.tagName === "BUTTON") {
+    const color = target.getAttribute("data-color");
+    document.body.style.backgroundColor = color;
+}
+});
+  // Add your code here
+
+  </script>
+</body>
+</html>
diff --git a/week-09/webform.html b/week-09/webform.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        form {
+  margin: 0 auto;
+  width: 400px;
+  padding: 1em;
+  border: 1px solid #ccc;
+  border-radius: 1em;
+}
+    </style>
+</head>
+<body>
+    <form id="contact-form">
+        <div>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required>
+        </div>
+        <div>
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+        </div>
+        <div>
+            <label for="subject">Subject:</label>
+            <input type="text" id="subject" name="subject" required>
+        </div>
+        <div>
+            <label for="message">Message:</label>
+            <textarea id="message" name="message" rows="5" required></textarea>
+        </div>
+        <button type="submit">Submit</button>
+    </form>
+
+    <script>
+        document.getElementById("contact-form").addEventListener("submit", function(event) {
+            const name = document.getElementById('name').value.trim();
+            const email = document.getElementById('email').value.trim();
+            const subject = document.getElementById('subject').value.trim();
+            const message = document.getElementById('message').value.trim();
+
+            if(!name || !email || !subject || !message) {
+                event.preventDefault();
+                alert("Please fill out all fields.");
+            }
+        });
+    </script>
+</body>
+</html>