Skip to content
Permalink
ff40af024b
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

2024-spring-dmd-3475/week-11/index.html

Go to file
 
 
Cannot retrieve contributors at this time
74 lines (60 sloc) 1.86 KB
Raw Blame
<!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>