Skip to content
Related Articles

Related Articles

Design Background color changer using HTML CSS and JavaScript
  • Difficulty Level : Hard
  • Last Updated : 12 Jan, 2021
GeeksforGeeks - Summer Carnival Banner

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.

HTML






<!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 with a color box</h1>
    <div>
        <a onclick="bgchange(id)" id="color1"> #e58e26</a>
        <a onclick="bgchange(id)" id="color2"> #f9b4ab</a>
        <a onclick="bgchange(id)" id="color3"> #B1FB17</a>
        <a onclick="bgchange(id)" id="color4"> #78e08f</a>
        <a onclick="bgchange(id)" id="color5"> #fd79a8</a>
    </div>
  
    <script src="script.js"></script>
</body>
  
</html>

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.

CSS




body {
    background: #81ecec;
}
  
h1 {
    color:#6203e0;
}
  
div {
    width:25%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: white;
}
  
#color1 {
    flex: 1;
    background: #e58e26;
    color:#e58e26;
}
  
#color2 {
    flex: 1;
    background: #f9b4ab;
    color: #f9b4ab;
}
  
#color3 {
    flex: 1;
    background: #B1FB17;
    color: #B1FB17;
}
  
#color4 {
    flex: 1;
    background: #78e08f;
    color: #78e08f;
}
  
#color5 {
    flex: 1;
    background: #fd79a8;
    color: #fd79a8;
}

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

Javascript




const bgchange =(id) => {
    document.body.style.background = 
        document.getElementById(id).innerHTML;
}

Output:

  • Before picking color:

Background changer with color box

  • After picking color:

Background changer with color box 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :