Learn to build a background changer in just 5 mins
Tags: webdev, javascript, beginners, tutorial
Published: 2022-06-11 18:30:15

## Introduction
In this article we how one can build a background color changer in simplest way.This article is beginner friendly so no prerequisites are needed.

## The sturucture 
Every web app or webiste have a structure just like human body has skeleton, but in web development we use html to design the structure. We need a `div` element for where the background color will change a `button` which will trigger the function for changing the back ground.

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
 <body>
    <h1>
      Color Fliper
    </h1>
    <button class="btn" onclick="changeColor()">Change color</button>
    <div id="app"></div>
  </body>
</html>
```
![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yo5120ryaf2boepx919.png)
 
Here  I have defined a `div` element with an `id=app` and a button with a `class=btn` this will be used for adding the styles  

## Adding the styles 
We are using inline css which mean all the css code inside a `<style>` tag. Let's make sure that our div looks like a box so everyone can see the color change.

```
 <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    #app {
      height: 400px;
      width: 400px;
      border: 3px solid red;
      border-radius: 1rem;
    }
    .btn {
      padding: 1rem;
      margin: 1rem;
      border: none;
      border-radius: 5px;
      background-color: palegoldenrod;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      font-weight: bold;
      font-size: 1rem;
      color: black;
    }
  </style>
```
![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dupxhw5jaqta3fgrb3ad.png)
Now we can see that after adding css it looks beautiful. For button I have added some inelement space using teh padding property and some margin to seperate the `div` and `button` I have also added some font styles and font-weight to make the button cool. Again for the div element inside which the color is going to
 change I have given it a height and width of 400px with some border radius of 5px which adds cuves in the four corners.

## The color changing function 
Now, let's add a function, for changing the color, agian we will be using inline javaScript which means javascript code within a `script` tag 

```
 <script>
      function changeColor() {
        var color = Math.floor(Math.random() * 360 + 1);
        document.getElementById(
          "app"
        ).style.backgroundColor = `hsl(${color}, 100%, 50%)`;
      }
    </script>
```  
 At first we are grabing the div element with an ID app then we are just dynamically changing it's `hsl` propety using a random number within 0 to 365 dgerees. you can know more about hsl [link ](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)

## put it all together 

{% codesandbox color-fliper-pj8c7j %}


![hsl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b0l1207992ywb7gymjl.png)
 
## Conslusion
These article will make your javascript journey like a peace of cake and the most important thing is consistency, cause at the end our consistensy helps us to win the game with flying colors. Feel free to share my article with your peers and don't hesitate to hit a reaction every thing is free and this helps my page grow.

## Connect
[LinkedIn](https://www.linkedin.com/in/kumar009/) [Twitter](https://twitter.com/kumarkalyan_)