Create A Website With Home And Calculator Pages
Create A Website Of Two Web Pages Home And Calculator Your Website D
Create a website of two web pages (home and calculator) your website design should have a header containing the website name, a navigation menu, content placeholder, and a footer. The home page will contain a welcoming message only, and the calculator page will contain a simple calculator that adds, subtracts, multiplies, and divides two numbers. The first and second number fields are required fields, so you must add a required field validation control to them.
Paper For Above instruction
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #336699;
color: white;
padding: 15px;
}
header h1 {
margin: 0;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
margin-right: 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.content {
padding: 20px;
}
footer {
text-align: center;
}
/ Simple calculator styles /
.calculator {
max-width: 300px;
margin-top: 20px;
}
.calculator input[type="number"] {
width: 100%;
padding: 8px;
margin: 8px 0;
box-sizing: border-box;
}
.calculator button {
width: 23%;
padding: 8px;
margin: 4px;
}
My Simple Website
© 2024 My Website
// Function to load pages dynamically based on navigation
function loadPage(page) {
if (page === 'home') {
document.getElementById('content').innerHTML = `
Welcome to Our Website
This is the home page. Enjoy browsing our simple website containing a calculator feature.
`;
} else if (page === 'calculator') {
document.getElementById('content').innerHTML = `
Simple Calculator
Result:
`;
}
}
// Calculate function
function calculate(operation) {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
let result;
if (isNaN(num1) || isNaN(num2)) {
alert('Please enter valid numbers.');
return;
}
switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 === 0) {
alert('Cannot divide by zero.');
return;
}
result = num1 / num2;
break;
}
document.getElementById('result').textContent = result;
}
// Initialize page with home content
window.onload = () => {
loadPage('home');
// Attach event listeners to navigation links
document.querySelectorAll('nav a').forEach(link => {
link.onclick = (e) => {
e.preventDefault();
const page = e.target.getAttribute('href').replace('.html', '');
loadPage(page);
};
});
};