week 11 assignment

yuk23003 · Apr 8, 2024 · ae5f3fa · ae5f3fa
1 parent 820eae3
commit ae5f3fa
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/week-11/index.html b/week-11/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Email Form</title>
+</head>
+<body>
+    <h1>Email Form</h1>
+    <form id="emailForm">
+        <label for="to">To:</label>
+        <input type="email" id="to" name="to" required><br><br>
+
+        <label for="subject">Subject:</label>
+        <input type="text" id="subject" name="subject" required><br><br>
+
+        <label for="message">Message:</label><br>
+        <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
+
+        <button type="submit">Send</button>
+    </form>
+
+    <script>
+        const form = document.getElementById('emailForm');
+
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+
+            const formData = new FormData(form);
+            const data = Object.fromEntries(formData);
+
+            const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+
+            const result = await response.json();
+            alert(`Your message has been sent: ${result.message}`);
+        });
+    </script>
+</body>
+</html>
diff --git a/week-11/sketch.js b/week-11/sketch.js
@@ -0,0 +1,17 @@
+// You're going to build a web form that utilizes an API endpoint to "send" an email message. 
+// The endpoint doesn't actually send a message, but it mimics how an actual email API might work. 
+// (If you're interested in sending emails from a form on your website, check out a service like FormSpree.)
+
+// Build a web form (in HTML) that collects a "to:" email address, subject, and message.
+
+// Use an event listener to intercept the "submit" event of the form. I.e., Your page must not reload or redirect upon pressing the submit button or the return/enter key.
+
+// All form fields are required and the email address must be valid. You may utilize the browser's built-in client-side form validation or manually validate the fields using JavaScript. 
+
+// Finally, use a fetch() request to send the form data to the Fake Mailer API and show the response message to the user. (Do not use console.log()!)
+
+// Test your form with fake or incomplete data. Be sure it works as expected!
+
+// Submit the functioning URL to HuskyCT.
+
+// Pr