Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive.
File structure:
--index.html --style.css --script.js
Prerequisites: Basic knowledge of HTML, CSS, and JavaScript is needed. The project contains HTML, CSS, and JavaScript files. The HTML file adds structure, followed by styling using CSS and JavaScript adds functionality to it.
Here is the preview image of the background changer we are going to make.
Background changer preview image
Approach:
- In the HTML file, we will just use the h1 tag and create a div for the colorbox
- Inside the CSS file, the colorbox is styled and to change the background color box contains some colors on clicking them the user can the color easily.
- In the javascript, we are calling a function bgchange, which contains an array of colors and it is applied to the background when the user clicks on the color.
HTML File: index.html HTML layout is created using the div tag, id attribute, and anchor tags for function calls. It defines the structure of the web page.
CSS File: style.css By using CSS properties, we will decorate the web page and make it look attractive. color, width, height, and position properties are given as per the requirement of the project.
JavaScript File: script.js JavaScript code is used to give functionality to web pages. Here we used the arrow function with the “id” parameter.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Background changer using JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Background Changer</h1>
<div id="colorbox"></div>
<script src="script.js"></script>
</body>
</html>
|
body { display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}h1 {
color: #6203e0;
margin-bottom: 2rem;
}#colorbox { width: 30%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 1rem;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}#colorbox span { display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
} |
function bgchange(color) {
let colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
document.body.style.background = colorarray[color];
}var colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
var colorbox = document.getElementById("colorbox");
colorarray.forEach(function (color, index) {
let span = document.createElement("span");
span.style.backgroundColor = color;
span.addEventListener("click", function () {
bgchange(index);
});
colorbox.appendChild(span);
}); |
Output: In the below-given GIF you can see that whenever the user clicks on the color the background color is changing according to that.
Color Changing Background using JavaScript