Hey guys, welcome to the javascript beginner project series. In this post, we will create a javascript project which changes the background color of the webpage on click of the button. This project is for absolute beginners, we will learn about javascript Math.random() to generate random numbers between 2 numbers. So let’s begin.
Check the live version of the project here
Table of Contents
Development Process
First, we will set up our project by creating an empty folder
Setup the project
Create a folder on your desktop with the name change-bg-color
mkdir change-bg-colorNext, navigate to the newly created folder
cd change-bg-colorCreate 3 files, index.html, app.js, style.css inside the change-bg-color
Design the HTML template
open index.html and add the following contents
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<button class="button" id="changecolor">Click Me</button>
</div>
<script src="app.js"></script>
</body>
</html>Inside the <head> tag we are linking to the style sheet style.css and just before closing the </body> tag, we are linking to the script file app.js. Inside the <body> tag we have only one button with id changecolor.
Apply a style to HTML content
Next, open style.css and add the following content
.wrapper {
text-align: center;
vertical-align: middle;
}
.button {
top: 50%;
position: absolute;
}Adding logic to change background-color
Next, open app.js file and add the following logic to change the background color.
const colors = ["#FFFFFF", "#C0C0C0", "#808080", "#000000", "#FF0000", "#800000", "#FFFF00",
"#808000", "#00FF00", "#008000", "#00FFFF", "#008080", "#0000FF", "#000080",
"#FF00FF", "#800080", "#FF00FF", "#800080"];
const button = document.getElementById('changecolor');
button.addEventListener('click', () => {
changeBackgroundColor();
})
const changeBackgroundColor = () => {
const randomNumber = Math.floor(Math.random() * colors.length);
document.body.style.background = colors[randomNumber];
}
changeBackgroundColor();Here we are creating an array of Hexa colors with some random colors. Next, we will target the button using getElementById(), to this we will pass the id of the button changecolor.
Next, we will attach a click event to the button using addEventListener(), inside this method we will call another method which is changeBackgroundColor().
This method is responsible for generating the random number and picks the color from a from based on an index colors[randomNumber].
Finally, we will access the body style using document.body.style.background and assign the color to it.
Methods Used
getElementById(id): Using this we can target the element by passing the element id.addEventListener(event, callback): We can attach an event to an element. The first parameter is the name of the event, the second parameter is a callback function.Math.random(): This will generate a random number between 0 to 1Math.floor(): This will decrease the value to the nearest integer number
That’s all for this now, I hope you guys enjoyed this post. If you like this post, then please share this with your friends and colleagues.
