form is functioning

kmr18006 · Mar 21, 2024 · 3a86306 · 3a86306
1 parent 5568249
commit 3a86306
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 0 deletions.
diff --git a/week-09/event1/index.html b/week-09/event1/index.html
@@ -0,0 +1,39 @@
+<!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
+
+  </script>
+
+  </body>
+</html>
diff --git a/week-09/event2/index.html b/week-09/event2/index.html
@@ -0,0 +1,57 @@
+<!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
+
+  </script>
+  </body>
+
+</html>
diff --git a/week-09/event3/index.html b/week-09/event3/index.html
@@ -0,0 +1,48 @@
+<!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
+
+  </script>
+  </body>
+</html>
diff --git a/week-09/webform/css/style.css b/week-09/webform/css/style.css
@@ -0,0 +1,20 @@
+div {
+    display:flex; 
+    flex-direction:column; 
+    width: 300px; 
+    gap: 10px;
+}
+
+input {
+    padding: 5px;
+}
+
+#message {
+    height: 200px; 
+    font-family: sans-serif;
+    padding: 5px;
+}
+
+button {
+    padding: 5px;
+}
diff --git a/week-09/webform/index.html b/week-09/webform/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html class="no-js" lang="eng">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Web Contact Form</title>
+  <link rel="stylesheet" href="css/style.css">
+  <meta name="description" content="Contact form website">
+</head>
+
+<body>
+<h2>Contact Form</h2>
+<form action="index.html">
+  <div>
+    <label for="name">Name:</label>  
+    <input type="text" name="name" id="name" placeholder="Enter Name">
+
+    <label for="email">Email:</label>
+    <input type="email" name="email" id="email" placeholder="Enter Email">
+
+    <label for="subject">Subject:</label> 
+    <input type="text" name="subject" id="subject" placeholder="Enter Subject">
+
+    <label for="message">Message:</label>
+    <textarea name="message" id="message" placeholder="Enter Message"></textarea>
+
+    <button type="submit">Submit</button>
+  </div>
+</form>
+
+  <script src="js/script.js"></script>
+
+</body>
+
+</html>
diff --git a/week-09/webform/js/script.js b/week-09/webform/js/script.js
@@ -0,0 +1,29 @@
+const form = document.querySelector('form')
+
+form.addEventListener('submit', function(event){
+    let nameInput = document.getElementById('name');
+    let emailInput = document.getElementById('email');
+    let subjectInput = document.getElementById('subject');
+    let messageInput = document.getElementById('message');
+
+    if (nameInput.value.trim() === '') {
+        alert("Name field is required to submit form.")
+        event.preventDefault() 
+    }
+
+    if (emailInput.value.trim() === ''){
+        alert("Email field is required to submit form.")
+        event.preventDefault() 
+    } 
+
+    if (subjectInput.value.trim() === ''){
+        alert("Subject field is required to submit form.")
+        event.preventDefault() 
+    } 
+
+    if (messageInput.value.trim() === '' ) {
+        alert("Message field is required to submit form.")
+        event.preventDefault() 
+    }
+
+})