week-11 done

hol23003 · Apr 8, 2024 · 569b091 · 569b091
1 parent aaa949e
commit 569b091
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/week-11/index.html b/week-11/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Network Request</title>
+</head>
+<body>
+
+<h2>Network Request</h2>
+
+<form id="emailForm">
+    <div>
+        <label for="to">To:</label><br>
+        <input type="email" id="to" name="to" required>
+        <span class="error" id="toError"></span>
+    </div>
+    <div>
+        <label for="subject">Subject:</label><br>
+        <input type="text" id="subject" name="subject" required>
+        <span class="error" id="subjectError"></span>
+    </div>
+    <div>
+        <label for="message">Message:</label><br>
+        <textarea id="message" name="message" required></textarea>
+        <span class="error" id="messageError"></span>
+    </div>
+    <button type="submit">Send</button>
+</form>
+
+<div id="response"></div>
+
+<script src="js/script.js"></script>
+
+</body>
+</html>
diff --git a/week-11/js/script.js b/week-11/js/script.js
@@ -0,0 +1,46 @@
+
+const emailForm = document.getElementById('emailForm');
+const responseMessage = document.getElementById('response');
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+emailForm.addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const to = document.getElementById('to').value;
+    const subject = document.getElementById('subject').value;
+    const message = document.getElementById('message').value;
+
+    if (!to.match(emailRegex)) {
+        showError('Please enter a valid email address.');
+        return;
+    }
+
+    if (subject.trim() === '' || message.trim() === '') {
+        showError('Please fill out all fields.');
+        return;
+    }
+
+    const formData = new FormData(emailForm);
+
+    fetch("https://bdaley.npkn.net/dmd-formmail/", {
+        method: "POST",
+        body: formData
+    })
+    .then(response => response.json())
+    .then(responseObject => {
+        responseMessage.textContent = responseObject.message;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        showError('An error occurred. Please try again later.');
+    });
+});
+
+function showError(message) {
+    responseMessage.textContent = ''; 
+    const errorElement = document.createElement('div');
+    errorElement.textContent = message;
+    errorElement.classList.add('error');
+    responseMessage.appendChild(errorElement);
+}