Skip to content
Related Articles
Open in App
Not now

Related Articles

Design Background color changer using HTML CSS and JavaScript

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 19 Oct, 2022
Improve Article
Save Article

Background color changer is a project which enables to change background color of web pages with an ease. There are color boxes on a web page when user click 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 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.

HTML File: index.html HTML layout is created using the div tag, id attribute and anchor tags for function calling. It defines the structure of the web page.


<!DOCTYPE html>
<html lang="en">
    <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">
    <h1>Background changer with a color box</h1>
    <div id="colorbox"></div>
    <script src="script.js"></script>

CSS File: style.css By using CSS properties, we will decorate the web page and make it look attractive. color, width, height and position property are given as per the requirement in the project.


h1 {
div {
    height: 50px;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: white;
div span

JavaScript File: script.js JavaScript code is used to give functionality to web page. Here we used arrow function with “id” parameter.


function bgchange(color)
{ =colorarray[color];
var colorarray = ["#e58e26","#f9b4ab","#B1FB17","#78e08f","#fd79a8"];
var str="";
for(var i=0;i<colorarray.length;i++) { str+='<span onclick="bgchange(' +i+')"


  • Before picking color:


  • After picking color:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!