From 5edcea6126ec958bfda61fc2d907f0baef607b8b Mon Sep 17 00:00:00 2001
From: Esther Kim <estherkim@uconn.edu>
Date: Sat, 23 Mar 2024 18:23:32 -0400
Subject: [PATCH] week-09 assignment

---
 .../1. Test your skills/events1-download.html | 50 +++++++++++
 .../1. Test your skills/events2-download.html | 82 +++++++++++++++++++
 .../1. Test your skills/events3-download.html | 56 +++++++++++++
 week-09/2. Web form/contact.html              | 43 ++++++++++
 week-09/3. Background changer app/index.html  | 32 ++++++++
 5 files changed, 263 insertions(+)
 create mode 100644 week-09/1. Test your skills/events1-download.html
 create mode 100644 week-09/1. Test your skills/events2-download.html
 create mode 100644 week-09/1. Test your skills/events3-download.html
 create mode 100644 week-09/2. Web form/contact.html
 create mode 100644 week-09/3. Background changer app/index.html
diff --git a/week-09/1. Test your skills/events1-download.html b/week-09/1. Test your skills/events1-download.html
new file mode 100644
index 0000000..2d4a317
--- /dev/null
+++ b/week-09/1. Test your skills/events1-download.html	
@@ -0,0 +1,50 @@
+<!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', function() {
+    if (btn.classList.contains('off')) {
+      btn.textContent = 'Machine is on';
+    } else {
+      btn.textContent = 'Machine is off';
+    }
+    btn.classList.toggle('off');
+  });
+
+
+
+  </script>
+
+  </body>
+</html>
diff --git a/week-09/1. Test your skills/events2-download.html b/week-09/1. Test your skills/events2-download.html
new file mode 100644
index 0000000..257c381
--- /dev/null
+++ b/week-09/1. Test your skills/events2-download.html	
@@ -0,0 +1,82 @@
+<!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
+
+    canvas.addEventListener('keydown', (event) => {
+      const step = 5;
+
+      switch (event.key){
+        case 'w':
+          y -= step;
+          break;
+        case 'a':
+          x -= step;
+          break;
+        case 's':
+          y += step;
+            break;
+        case 'd':
+          x += step;
+          break;
+        default:
+          return;
+      }
+
+      drawCircle(x, y, size);
+    });
+
+
+
+  </script>
+  </body>
+  
+</html>
diff --git a/week-09/1. Test your skills/events3-download.html b/week-09/1. Test your skills/events3-download.html
new file mode 100644
index 0000000..ac81955
--- /dev/null
+++ b/week-09/1. Test your skills/events3-download.html	
@@ -0,0 +1,56 @@
+<!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', (event) => {
+    if (event.target.tagName === 'BUTTON') {
+      const color = event.target.dataset.color;
+      buttonBar.style.background = color;
+    }
+  });
+
+
+  </script>
+  </body>
+</html>
diff --git a/week-09/2. Web form/contact.html b/week-09/2. Web form/contact.html
new file mode 100644
index 0000000..8eac162
--- /dev/null
+++ b/week-09/2. Web form/contact.html	
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Contact Information Form</title>
+</head>
+
+<body>
+
+    <h1>Contact Info</h1>
+
+    <form id="contactForm">
+        <label for="name">Name:</label><br>
+        <input type="text" id="name" name="name" required><br><br>
+
+        <label for="email">Email:</label><br>
+        <input type="email" id="email" name="email" required><br><br>
+
+        <label for="subject">Subject:</label><br>
+        <input type="text" id="subject" name="subject" required><br><br>
+
+        <label for="message">Message:</label><br>
+        <textarea id="message" name="message" required></textarea><br><br>
+
+        <button type="submit">Submit</button>
+    </form>
+
+    <div id="error-message" style="color: red;"></div>
+
+    <script>
+        const contactForm = document.getElementById('contactForm');
+        const errorMessage = document.getElementById('error-message');
+
+        contactForm.addEventListener('submit', (event) => {
+            if (!contactForm.name.value || !contactForm.email.value || !contactForm.subject.value || !contactForm.message.value) {
+                event.preventDefault(); // Prevent form submission
+                errorMessage.textContent = "Please fill out all fields.";
+            } else {
+                errorMessage.textContent = ""; // Clear error message
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/week-09/3. Background changer app/index.html b/week-09/3. Background changer app/index.html
new file mode 100644
index 0000000..f94840c
--- /dev/null
+++ b/week-09/3. Background changer app/index.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Color Picker</title>
+</head>
+<body>
+    <h1>Color Picker</h1>
+    <p> Change background color and save value locally</p>
+    <input type="color" id="colorPicker">
+    
+    <script>
+        const colorPicker = document.getElementById('colorPicker');
+
+        // Set initial color from localStorage if available
+        const savedColor = localStorage.getItem('selectedColor');
+        if (savedColor) {
+            document.body.style.backgroundColor = savedColor;
+            colorPicker.value = savedColor;
+        }
+
+        // Listen for input and change events on the color picker
+        colorPicker.addEventListener('input', setColor);
+        colorPicker.addEventListener('change', setColor);
+
+        function setColor() {
+            const selectedColor = colorPicker.value;
+            document.body.style.backgroundColor = selectedColor;
+            localStorage.setItem('selectedColor', selectedColor);
+        }
+    </script>
+</body>
+</html>
