Hey friends, today we see how to make this background color changer using JavaScript.
Let's see what this project is. Basically, its a blank page with a button in the center that says change background color. When clicked, it changes the white background to a random color.
In addition to that, it also gives the hex code of the color displayed for you to use in your projects. This project is useful to get random colors for any life projects.
If you cant understand what I mean, do watch the demo and video tutorial below:
Now let's see the source codes.
Paste the code below in a HTML File:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer using JavaScript | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
padding:0;
margin:0;
box-sizing: border-box;
}
section{
height:100vh;
width:100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button{
border: none;
outline: none;
border-radius: 5px;
box-shadow: rgba(0,0,0,0.35) 0px 5px 15px;
color: white;
background-color: dodgerblue;
font-size: 24px;
font-family: "poppins";
padding:20px;
cursor: pointer;
transition: 0.3s;
}
button:hover{
color:dodgerblue;
background-color: white;
}
h2{
font-family: "poppins";
font-size: 30px;
margin-top:30px;
}
</style>
<body>
<section>
<button>Change Background Color</button>
<h2></h2>
</section>
</body>
<script>
const button = document.querySelector("button");
const h2E1 = document.querySelector("h2");
const bgE1 = document.querySelector("section");
//const hexColorE1 = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];
button.addEventListener("click",() => {
let color="#";
color += Math.random().toString(16).slice(2, 8).toUpperCase();
bgE1.style.backgroundColor = color;
h2E1.innerText=color;
});
</script>
</html>
And that's all for this tutorial! Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment