Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Design Background color changer using HTML CSS and JavaScript

  • Difficulty Level : Hard
  • Last Updated : 12 Jan, 2021

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!