Arimoro Olamilekan Ezekiel's Blog
Building a Random Background Changer App with HTML, CSS and Vanilla JavaScript .

Building a Random Background Changer App with HTML, CSS and Vanilla JavaScript .

Arimoro Olamilekan Ezekiel's photo
Arimoro Olamilekan Ezekiel
·

7 min read

About a month ago I built a Random Background Changer App with HTML, CSS and JavaScript and it was the third day of my 20 Days JavaScript Challenge, So I announced that I will release the written version of these challenges and this is the third written version.

In this article I will take you through how I built this JavaScript App and I know you will benefit from it greatly and apply it to even bigger projects. So stay tuned and enjoy🎉🎉🎉.

How I built this App is splitted into three parts which is the HTML, the Styling with CSS and Functionality with JavaScript.

So let's dive in by following these above step...

HTML Structure

HTML is used to write all the content of web pages and there are different HTML tags used to accomplish this purpose. Also in this HTML code snippet, the CSS Styling and JavaScript Functionality is linked so that the Content, Styling and Functionality can be tied together. Below is the code snippet that explains it better.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Background Changer</title>
  </head>
  <body>
    <button id="btn">Change Background</button>

    <script src="./main.js"></script>
  </body>
</html>

After the content has been written then we can proceed to do little styling to make it more user friendly.

CSS Styling

This particular web app does not require much styling because the styling we actually want to achieve is that the background color should change on click. But CSS was used to align the button this page well and position it well to make it more user friendly and the key CSS property I used was Flex-Box. Below is the code snippet that explains what I am trying to say better;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  min-height: 100vh;
}

button {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 1rem;
  border-radius: 5px;
  border: none;
  font-family: inherit;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

button:focus {
  outline: none;
}

button:active {
  box-shadow: 0;
  transform: translate(2px, 2px);
}

This web app can't be complete if we use only HTML and CSS, we need to make it functional by adding JavaScript to it. So let's go on by adding Functionality to our application.

JavaScript Functionality

The first step is to get the button that will generate the random background color from the HTML code by using document.getElementById() then adding the id of the button to it.

const btn = document.getElementById("btn");

Then after this is done then to make the background color change randomly we will use three key properties and I will break this down by explaining these three key properties;

  1. HSL Color; HSL stands for Hue, Saturation and Lightness. HSL color values are specified with: hsl(hue, saturation, lightness). To explain further, Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color and Lightness is also a percentage; 0% is black, 100% is white. There are a lot of color models like RGB, Hex, I could have used but I decided to use this and it appears to be very cool.
hsl(hue, saturation, lightness).
  1. Math.random(); Math.random() returns a random number between 0 (inclusive), and 1 (exclusive). This picks a random number and it really helps because we want a random background color.
Math.random();
  1. Math.floor(); It rounds a number downward to its nearest integer and if the passed argument is an integer, the value will not be rounded.
Math.random();

Math.random() and Math.floor() will be applied to the hue of the color model so that it can generate a random hue number that gives us a random color automatically, The saturation and the lightness part of the HSL color model is set to 80% and 40% respectively.

To see what I have been saying here is the code snippet that explains this better;

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  document.body.style.background = randomBg();
});

function randomBg() {
  return `hsl(${Math.floor(Math.random() * 301)}, 80%, 40%)`;
}

Conclusion

This article is meant to brush up your knowledge of Color model and dynamic ways of using it and also on Vanilla JavaScript. I hope you found it interesting, watch out for my fourth article on this series of written version of my 20 days JavaScript Challenge!. You can also get the source code by clicking here and the hosted link on netlify by clicking here.

Thanks for reading through😘👋.

JavaScriptfrontendDeveloper