Are You Willing To Do Another Website Update For Me?
Are You Willing To Do Another Website Update For Me This Is What She
Are you willing to do another website update for me? This is what she wants: Update your site to include the simple web form discussed in your design document. Use JavaScript® to validate the form contents and display the results of that validation to the user in a popup window. Your website should be complete with active hyperlinks, images, and videos. One additional topic that we discussed last week was the layout. I submitted the code for a simple layout via the discussion last week. A simple layout, one column layout or a 2-column layout will all be good.
Paper For Above instruction
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header, main, footer {
max-width: 1000px;
margin: auto;
padding: 10px;
}
nav a {
margin-right: 15px;
text-decoration: none;
color: #3366cc;
}
nav a:hover {
text-decoration: underline;
}
.content {
display: flex;
flex-direction: row;
gap: 20px;
}
.column {
flex: 1;
}
form {
background-color: #f2f2f2;
padding: 15px;
border-radius: 8px;
}
input[type=text], input[type=email] {
width: 100%;
padding: 8px;
margin-top: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
// JavaScript function to validate the form
function validateForm() {
const name = document.forms["webForm"]["name"].value.trim();
const email = document.forms["webForm"]["email"].value.trim();
let message = "";
if (name === "") {
alert("Please enter your name.");
return false;
}
if (email === "") {
alert("Please enter your email address.");
return false;
}
// Simple email pattern validation
const emailPattern = /^[^@]+@[^@]+\.[^@]+$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
// If validation passes, display results in a popup window
message = "Validation successful!\n\nName: " + name + "\nEmail: " + email;
alert(message);
return false; // prevent form submission for demonstration purposes
}
My Updated Website
Introduction
Welcome to my website! This site now includes a functional contact form that validates user input and displays the validation results in a popup window.
Images and Videos
Below is an embedded YouTube video:
Contact Form
© 2024 My Updated Website. All rights reserved.