uploaded file

pcm20001 · Apr 7, 2024 · 935f516 · 935f516
1 parent cc222b5
commit 935f516
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/week-11/index.html b/week-11/index.html
@@ -0,0 +1,68 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Email Form</title>
+    <style>
+        form {
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        input[type="text"], textarea {
+            width: 100%;
+            padding: 8px;
+            margin: 5px 0;
+            box-sizing: border-box;
+        }
+        input[type="submit"] {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            cursor: pointer;
+        }
+        input[type="submit"]:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <form id="emailForm">
+        <label for="to">To:</label>
+        <input type="email" id="to" name="to" required>
+        <label for="subject">Subject:</label>
+        <input type="text" id="subject" name="subject" required>
+        <label for="message">Message:</label>
+        <textarea id="message" name="message" required></textarea>
+        <input type="submit" value="Send Email">
+    </form>
+
+    <script>
+        document.getElementById('emailForm').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent the default form submission
+            const formData = new FormData(this); // Create FormData object to collect form data
+
+            // Make a fetch request to Fake Mailer API
+            fetch('https://bdaley.npkn.net/dmd-formmail/', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                }
+                throw new Error('Failed to send email.');
+            })
+            .then(data => {
+                alert(data.message); // Show the response message to the user
+            })
+            .catch(error => {
+                alert('An error occurred while sending the email.'); // Show an error message if fetch request fails
+            });
+        });
+    </script>
+</body>
+</html>
+