Hey everyone, welcome to ProCode Zone! Today, I'm super excited to show you how to build a website using HTML, CSS, and JavaScript. I'll give you the full source code and explain each part in simple terms. Let's get started on this awesome coding adventure together
Hear a simple website using HTML, CSS, and JavaScript. Our website will consist of a landing page with a navigation bar, a header section, a main content section, and a footer. We'll also include some interactivity with JavaScript to toggle a dark mode theme.
1. HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<div class="container">
<h1>Logo</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><button onclick="toggleDarkMode()">Dark Mode</button></li>
</ul>
</div>
</nav>
<header>
<div class="container">
<h1>Welcome to Our Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</header>
<main>
<div class="container">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</main>
<footer>
<div class="container">
<p>© 2024 Simple Website</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
2. CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
nav {
background-color: #333;
color: #fff;
padding: 10px 0;
}
nav ul {
list-style-type: none;
padding: 0;
float: right;
}
nav ul li {
display: inline;
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
header {
background-image: url('header-bg.jpg');
background-size: cover;
color: #fff;
padding: 100px 0;
text-align: center;
}
main {
padding: 50px 0;
}
footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 8px 12px;
cursor: pointer;
}
3. JavaScript (script.js):
function toggleDarkMode() {
const body = document.body;
body.classList.toggle('dark-mode');
}
Explanation:
HTML: We have structured our website using HTML, defining the layout with navigation (<nav>), header (<header>), main content (<main>), and footer (<footer>). We also included a button inside the navigation for toggling dark mode.
- In this HTML structure:
- We have a header with a title.
- A main section containing a counter.
- A footer with a copyright notice.
- We link our CSS stylesheet and JavaScript file.
CSS: We've styled our website using CSS, defining the appearance of various elements such as the navigation bar, header, main content, and footer. We've also included styles for the dark mode theme.
JavaScript: We've added a simple JavaScript function toggleDarkMode() that toggles a CSS class dark-mode on the body element, enabling or disabling the dark mode theme.
This simple website demonstrates how to use HTML, CSS, and JavaScript together to create a basic web page with interactivity. Feel free to expand upon this template by adding more content, styling, and functionality as needed.
Let's enhance our website with more JavaScript functionality. We'll add a feature to reset the counter to zero when the count reaches a certain threshold. Here's how you can modify the script.js file:
document.addEventListener('DOMContentLoaded', function() {
const countElement = document.getElementById('count');
const incrementButton = document.getElementById('increment');
const resetButton = document.getElementById('reset');
let count = 0;
const threshold = 10; // Define the threshold for resetting the counter
incrementButton.addEventListener('click', function() {
count++;
countElement.textContent = count;
// Check if count has reached the threshold
if (count === threshold) {
count = 0; // Reset count to zero
countElement.textContent = count;
alert('Counter has been reset to zero!');
}
});
resetButton.addEventListener('click', function() {
count = 0;
countElement.textContent = count;
});
});
In this updated JavaScript code:
- We've added a new button with the id "reset" in the HTML.
- We've selected this new button in JavaScript and added an event listener to it.
- When the "increment" button is clicked, we check if the count has reached the threshold value. If it has, we reset the count to zero and display an alert.
- We've also added functionality to the "reset" button, which resets the count to zero when clicked.
styles.css file:body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
main {
padding: 20px;
}
#counter {
text-align: center;
margin-top: 20px;
border: 2px solid #007bff;
padding: 20px;
border-radius: 10px;
}
button {
padding: 10px 20px;
margin: 0 5px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}
#reset {
background-color: #dc3545; /* Red color for reset button */
}
#count {
font-size: 3em; /* Increase font size for count */
font-weight: bold;
}
In this updated CSS:
We've added styling for the counter section, including a border, padding, and border radius to give it a card-like appearance.
The reset button now has a red background color to make it stand out.
We've increased the font size of the count for better visibility.
With these CSS enhancements, your website will have a more polished and visually appealing look. Feel free to further customize the styles according to your preferences!
Let's add a popup when a user is leaving the website, we can use the beforeunload event in JavaScript. Here's how you can implement it:
window.addEventListener('beforeunload', function(event) {
event.preventDefault(); // Cancel the event
event.returnValue = ''; // Required for some browsers to show the popup message
const confirmationMessage = 'Are you sure you want to leave this page? Your changes may not be saved.';
// Display the confirmation message
event.returnValue = confirmationMessage;
return confirmationMessage;
});
This JavaScript code adds an event listener to the beforeunload event on the window object. When the user tries to leave the webpage (by closing the tab or browser window, or by navigating to a different page), a confirmation popup will appear with the specified message.
The event.preventDefault() method cancels the default behavior of the event, and event.returnValue is set to an empty string to ensure compatibility with older browsers.
You can place this code in your script.js file, and it will be triggered whenever the user tries to leave the webpage.
Post a Comment
0Comments