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>

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>

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

put it all together

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 Twitter

Learn to build a background changer in just 5 mins