week-09 Done

hol23003 · Mar 25, 2024 · e987d9b · e987d9b
1 parent 3b88a5e
commit e987d9b
Show file tree

Hide file tree

Showing 8 changed files with 275 additions and 0 deletions.
diff --git a/week-09/Background Changer/index.html b/week-09/Background Changer/index.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>Background Changer App</title>
+</head>
+<body>
+    <h1>Background Changer App</h1>
+    <input type="color" id="colorPicker">
+    <script>
+        const colorPicker = document.getElementById('colorPicker');
+
+        function setBackgroundColor(color) {
+            document.body.style.backgroundColor = color;
+        }
+
+        function updateColorPickerValue(color) {
+            colorPicker.value = color;
+        }
+
+        function handleColorChange(event) {
+            const selectedColor = event.target.value;
+            setBackgroundColor(selectedColor);
+            localStorage.setItem('selectedColor', selectedColor);
+        }
+
+        colorPicker.addEventListener('input', handleColorChange);
+
+        colorPicker.addEventListener('change', handleColorChange);
+
+        window.addEventListener('load', function() {
+            const storedColor = localStorage.getItem('selectedColor');
+            if (storedColor) {
+                setBackgroundColor(storedColor);
+                updateColorPickerValue(storedColor);
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/week-09/Event01/index.html b/week-09/Event01/index.html
@@ -0,0 +1,34 @@
+<!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 src="js/script.js"></script>
+
+  </body>
+</html>
diff --git a/week-09/Event01/js/script.js b/week-09/Event01/js/script.js
@@ -0,0 +1,9 @@
+const btn = document.querySelector('.off');
+
+btn.addEventListener('click', function() {
+  if (btn.textContent === 'Machine is off') {
+    btn.textContent = 'Machine is on';
+  } else {
+    btn.textContent = 'Machine is off';
+  }
+});
diff --git a/week-09/Event02/index.html b/week-09/Event02/index.html
@@ -0,0 +1,35 @@
+<!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 src="js/script.js"></script>
+  </body>
+
+</html>
diff --git a/week-09/Event02/js/script.js b/week-09/Event02/js/script.js
@@ -0,0 +1,38 @@
+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);
+
+document.addEventListener('keydown', function(event) {
+  const moveAmount = 15;
+  switch(event.key) {
+    case 'w':
+      y -= moveAmount;
+      break;
+    case 'a':
+      x -= moveAmount;
+      break;
+    case 's':
+      y += moveAmount;
+      break;
+    case 'd':
+      x += moveAmount;
+      break;
+  }
+  drawCircle(x, y, size);
+});
+// Add your code here
diff --git a/week-09/Event03/index.html b/week-09/Event03/index.html
@@ -0,0 +1,42 @@
+<!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 src="js/script.js"></script>
+  </body>
+</html>
diff --git a/week-09/Event03/js/script.js b/week-09/Event03/js/script.js
@@ -0,0 +1,9 @@
+const buttonBar = document.querySelector('.button-bar');
+
+buttonBar.addEventListener('click', function(event) {
+    const target = event.target;
+    if (target.tagName === 'BUTTON') {
+      const color = target.dataset.color;
+      buttonBar.style.backgroundColor = color;
+    }
+  });
diff --git a/week-09/Web Form/index.html b/week-09/Web Form/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Form</title>
+    <style>
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        li:hover {
+            background-color: lightblue;
+        }
+    </style>
+</head>
+<body>
+    <h1>Contact Us</h1>
+    <form id="contactForm">
+        <div style="display:flex">
+            <input type="text" name="name" id="name" placeholder="Name" autocomplete="off" required>
+            <input type="email" name="email" id="email" placeholder="Email" required>
+            <input type="text" name="subject" id="subject" placeholder="Subject" required>
+            <textarea name="message" id="message" placeholder="Message" rows="4" required></textarea>
+            <button type="submit">Submit</button>
+        </div>
+    </form>
+
+    <h2>Submitted List</h2>
+    <ul id="contactList"></ul>
+
+    <script>
+        const contactForm = document.getElementById('contactForm');
+        const contactList = document.getElementById('contactList');
+
+        contactForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const nameInput = document.getElementById('name').value;
+            const emailInput = document.getElementById('email').value;
+            const subjectInput = document.getElementById('subject').value;
+            const messageInput = document.getElementById('message').value;
+
+            if (!nameInput || !emailInput || !subjectInput || !messageInput) {
+                alert('Please fill all fields!');
+            } else {
+                const listItem = document.createElement('li');
+                listItem.innerHTML = `
+                    <input type="checkbox" id="item${contactList.querySelectorAll('li').length + 1}" name="item${contactList.querySelectorAll('li').length + 1}">
+                    <label for="item${contactList.querySelectorAll('li').length + 1}">
+                        <strong>Name:</strong> ${nameInput}, 
+                        <strong>Email:</strong> ${emailInput}, 
+                        <strong>Subject:</strong> ${subjectInput}, 
+                        <strong>Message:</strong> ${messageInput}
+                    </label>`;
+
+                contactList.appendChild(listItem);
+
+                contactForm.reset();
+
+                alert('Form submitted successfully!');
+            }
+        });
+    </script>
+</body>
+</html>