finished form!

kmr18006 · Apr 4, 2024 · ff40af0 · ff40af0
1 parent 346fdc5
commit ff40af0
Showing 1 changed file with 74 additions and 0 deletions.
diff --git a/week-11/index.html b/week-11/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Fake Email API Endpoint</title>
+  <link rel="stylesheet" href="css/style.css">
+  <meta name="description" content='A web form that utilizes an API endpoint to "send" an email message. The endpoint does not actually send a message, but it mimics how an actual email API might work.'>
+  <style>
+    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;
+    }
+  </style>
+</head>
+
+<body>
+    <h2>Send Email</h2>
+<form action="index.html">
+  <div>
+    <label for="email">Email:</label>
+    <input type="email" name="to" id="to" placeholder="Enter Email" autocomplete="off" required>
+
+    <label for="subject">Subject:</label> 
+    <input type="text" name="subject" id="subject" placeholder="Enter Subject" autocomplete="off" required>
+
+    <label for="message">Message:</label>
+    <textarea name="message" id="message" placeholder="Enter Message" required></textarea>
+
+    <button type="submit">Submit</button>
+  </div>
+</form>
+
+<script>
+    const form = document.querySelector('form');
+
+    form.addEventListener('submit', function(event){
+        event.preventDefault() 
+        const formData = new FormData(form);
+
+        fetch("https://bdaley.npkn.net/dmd-formmail/", {
+            method: "POST",
+            body: formData
+        })
+            .then((response) => response.json())
+            .then((responseObject) => {
+                if (responseObject.status === "success") {
+                    alert(responseObject.message);
+                }
+            });
+
+    })
+</script>
+
+</body>
+
+</html>