Creating a simple and interactive project is a great way to learn and reinforce your JavaScript skills. In this blog post, we'll walk through how to build a basic background color switcher using HTML, CSS, and JavaScript.
HTML Structure
Our HTML provides the skeleton of the project. It includes a series of span elements that will act as buttons for changing the background color of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../styles.css" />
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span class="button" id="grey"></span>
<span class="button" id="white"></span>
<span class="button" id="blue"></span>
<span class="button" id="yellow"></span>
<h2>
Try clicking on one of the colors above
<span>to change the background color of this page!</span>
</h2>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
The CSS gives our buttons distinct colors and a basic layout. This helps visually distinguish the different buttons that users will click to change the background color.
html {
margin: 0;
}
span {
display: block;
}
.canvas {
margin: 100px auto 100px;
width: 80%;
text-align: center;
}
.button {
width: 100px;
height: 100px;
border: solid black 2px;
display: inline-block;
}
#grey {
background: grey;
}
#white {
background: white;
}
#blue {
background: blue;
}
#yellow {
background: yellow;
}
Let's see how our project looks like with HTML and CSS:
JavaScript Logic
The JavaScript is where the magic happens. We add event listeners to each button, and when a button is clicked, the background color of the page changes to the color associated with that button.
console.log("JavaScript Loaded");
const buttons = document.querySelectorAll('.button');
const body = document.querySelector('body');
buttons.forEach(function (button) {
console.log(button);
button.addEventListener('click', function (e) {
console.log(e);
console.log(e.target);
const color = e.target.id; // Get the id of the clicked button
body.style.backgroundColor = color; // Set the body's background color to the id
});
});
Explanation of the JavaScript Code
- Logging a Message: We start by logging a simple message to the console to ensure our JavaScript file is linked correctly.
console.log("JavaScript Loaded");
- Selecting Elements: We use
document.querySelectorAllto select all elements with the classbutton. We also select thebodyelement since we want to change its background color.
const buttons = document.querySelectorAll('.button');
const body = document.querySelector('body');
- Adding Event Listeners: We iterate over each button and add a
clickevent listener. When a button is clicked, it triggers the function inside the event listener.
buttons.forEach(function (button) {
console.log(button);
button.addEventListener('click', function (e) {
console.log(e);
console.log(e.target);
const color = e.target.id; // Get the id of the clicked button
body.style.backgroundColor = color; // Set the body's background color to the id
});
});
- Changing the Background Color: Inside the event listener, we get the
idof the clicked button (e.target.id) and use this value to change the background color of the body.
If we click any button, it changes the background color of the body with the id of the button that is clicked.
This simple project demonstrates how to manipulate the DOM using JavaScript to create an interactive web page. The addEventListener method is particularly powerful, allowing us to respond to user actions and dynamically change the content and style of the web page.