Name: Essamba Medou Paule Cassandra
MAT:ET20210301
Speciality: DBMIS
CA
Index.html codes
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<header>
<a href="index.html"><img src="img_5131.png" alt="Site Logo"></a>
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact Us</a>
</nav>
</header>
<main>
<h1>Welcome to Our Website!</h1>
<p>
This website provides information about our company, our products, and our services.
We hope you find the information you are looking for. If you have any questions, please do
not hesitate to contact us.
</p>
</main>
<footer>
<p>Copyright © 2023 Our Company</p>
<ul>
<li><a href="#"><img src="facebook.png" alt="Facebook"></a></li>
<li><a href="#"><img src="twitter.png" alt="Twitter"></a></li>
<li><a href="#"><img src="instagram.png" alt="Instagram"></a></li>
</ul>
</footer>
</body>
</html>
“I struggled to put a logo but in no avail kept on showing site logo “
Contacts.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<header>
<a href="index.html"><img src="logo.png" alt="Site Logo"></a>
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact Us</a>
</nav>
</header>
<main>
<h1>Contact Us</h1>
<form id="contact-form">
<label for="name">Name:</label>
<input type="text" id="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email">
<br>
<label for="message">Message:</label>
<textarea id="message"></textarea>
<br>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<p>Copyright © 2023 Our Company</p>
<ul>
<li><a href="#"><img src="facebook.png" alt="Facebook"></a></li>
<li><a href="#"><img src="twitter.png" alt="Twitter"></a></li>
<li><a href="#"><img src="instagram.png" alt="Instagram"></a></li>
</ul>
</footer>
<script>
const form = document.getElementById("contact-form");
form.addEventListener("submit", (event) => {
event.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;
if (name === "") {
alert("Please enter your name.");
return;
}
if (email === "") {
alert("Please enter your email address.");
return;
}
if (!validateEmail(email)) {
alert("Please enter a valid email address.");
return;
}
if (message === "") {
alert("Please enter a message.");
return;
}
// Form is valid, submit it
// ...
});
function validateEmail(email) {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]
{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
</script>
</body>
</html>
Styles.css
/* Header */
header {
background-color: #00ffff;
padding: 20px 0;
}
header nav {
float: right;
}
header nav a {
display: inline-block;
padding: 0 10px;
text-decoration: none;
color: #000;
}
header nav a:hover {
background-color: #ddd;
}
a img{
display:block;
margin:5px auto;
}
/* Main Section */
main {
padding :20px;
}
main h1 {
font-size: 2em;
margin-bottom: 10px;
}
main p {
font-size: 1.2em;
line-height: 1.5em;
}
main form {
width: 50%;
margin: 0 auto;
}
main form label {
display: block;
margin-bottom: 5px;
}
main form input,
main form textarea {
width: 100%;
padding: 5px;
font-size: 1em;
}
main form button {
float: right;
padding: 5px 10px;
background-color: #00ffff;
color: #fff;
border: none;
cursor: pointer;
}
/* Footer */
footer {
background-color: #ffff00;
padding: 20px 0;
}
footer p {
text-align: center;
}
footer ul {
list-style-type: none;
display: flex;
justify-content: center;
}
footer ul li {
margin: 0 10px;
}
footer ul li a {
display: inline-block;
padding: 5px;
background-color: #ddd;
text-decoration: none;
color: #000;
}
footer ul li a:hover {
background-color: #ccc;
}
Scripts.js
// Get the form element
const form = document.getElementById("contact-form");
// Add an event listener for the form submit event
form.addEventListener("submit", (event) => {
// Prevent the form from submitting
event.preventDefault();
// Get the values from the form fields
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;
// Validate the form fields
const errors = [];
if (name === "") {
errors.push("Please enter your name.");
}
if (email === "") {
errors.push("Please enter your email address.");
} else if (!validateEmail(email)) {
errors.push("Please enter a valid email address.");
}
if (message === "") {
errors.push("Please enter a message.");
}
// Check if there are any errors
if (errors.length > 0) {
// Show the error messages
alert(errors.join("n"));
// Prevent the form from submitting
return;
}
// Form is valid, submit it
// ...
});
// Function to validate an email address
function validateEmail(email) {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.
[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
“Sincerely this one is purely research “
