Design Background color changer using HTML CSS and JavaScript - GeeksforGeeks

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:
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 
CSS-Misc
HTML-Misc
JavaScript-Misc
Technical Scripter 2020
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)