Changing the background color of a webpage on click dynamically can add an element of interactivity and visual appeal to your web projects. In this tutorial, we will explore how to create a simple web page with a button that changes the background color on each click. We will use HTML, CSS, and JavaScript to accomplish this task. Let’s dive in!
Video Tutorial:
Check out my youtube channel.
Project Folder Structure:
Before we begin, let’s set up the project folder structure. Create a new folder for your project and organize it as follows:
- index.html
- style.css
- script.js
HTML:
Our HTML file, index.html, will contain the basic structure of our web page. Here’s the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change Background Color On Click</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button id="btn">Click Me</button>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
In this HTML code, we have a <button> element with an ID of “btn.” This button will trigger the background color change when clicked.
CSS:
Next, let’s style our web page using CSS. Open the style.css file and add the following code:
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: grid;
place-items: center;
background-color: #000000;
}
button {
font-family: "Poppins", sans-serif;
font-size: 1.4em;
padding: 1em 2em;
border-radius: 2em;
border: 5px solid #ffffff;
background-color: transparent;
color: #ffffff;
letter-spacing: 1.5px;
cursor: pointer;
outline: none;
}
This CSS code sets the basic styling for our web page. We reset padding and margin for all elements using the * selector. The body element has a black background color, and the button element is styled with a white border, transparent background, and other properties to make it visually appealing.
Javascript:
Now comes the fun part! Let’s add the JavaScript functionality to change the background color dynamically. Open the script.js file and add the following code:
const btn = document.getElementById("btn");
let randomNum = () => {
return Math.floor(Math.random() * 256);
};
let changeColor = () => {
let randomColor = `rgb(${randomNum()},${randomNum()},${randomNum()})`;
document.body.style.backgroundColor = randomColor;
};
btn.addEventListener("click", changeColor);
window.addEventListener("load", changeColor);
In this JavaScript code, we first retrieve the button element using getElementById and store it in the btn constant. We also define a helper function, randomNum, which generates a random number between 0 and 255.
The changeColor function is responsible for generating a random RGB color and applying it as the background color of the document body.
From this code, we can learn the following:
- HTML structure: The code provides an example of a basic HTML structure with the necessary
<html>,<head>, and<body>elements. It also demonstrates how to link external CSS and JavaScript files to the HTML document. - CSS styling: The code includes CSS styles that showcase how to customize the appearance of HTML elements. It covers concepts such as setting background colors, defining font styles, adjusting padding and margins, and creating button styles.
- JavaScript event handling: The JavaScript code demonstrates event handling using the
addEventListenermethod. It shows how to listen for specific events, such as a button click or page load, and associate them with corresponding functions. - Dynamically changing styles: The JavaScript code utilizes the
document.body.styleproperty to dynamically change the background color of the webpage. It generates random RGB color values using therandomNumfunction and applies them to thebackgroundColorproperty. - Modular code structure: The code follows a modular approach by separating HTML, CSS, and JavaScript into individual files. This improves code organization and maintainability, making it easier to work on different aspects of the project.
Overall, this code provides a practical example of how to create an interactive web page that allows users to change the background color with a button click, showcasing the integration of HTML, CSS, and JavaScript in a simple project.
