Hello Everyone, In this Post We Will be Seeing How to Create Background Changer Using HTML, CSS and JavaScript.
Here is The Live Link of Page https://bg-changer-js.netlify.app/
Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/
Follow Me on Github https://www.github.com/ajaysharma12799/
Steps to Create :-
- Choose Any Text Editor (VSCode Recommended).
- Create 3 Files in Current Project Directory, index.html, style.css and app.js.
- Use Below HTML, CSS and JS Code To Build Your Page.
<!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 Changer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="title">
Click To Change Background
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
cursor: pointer;
border: none;
width: 50%;
margin: 0 auto;
margin-top: 50vh;
background-color: #1B98F5;
box-shadow: 0 0 20px #fff;
}
.title {
color: #fff;
font-size: 30px;
font-weight: lighter;
text-align: center;
padding: 20px;
}
let containerElement = document.getElementById("container");
containerElement.addEventListener("click", changeColor);
function changeColor() {
let random1 = Math.floor(Math.random() * 255 + 1);
let random2 = Math.floor(Math.random() * 255 + 1);
let random3 = Math.floor(Math.random() * 255 + 1);
document.body.style.backgroundColor = `rgb(${random1}, ${random2}, ${random3})`;
}
Top comments (2)
Hi, to expose your code, you can use codepen ;)
It will allow you to have a direct render of your code and let people have an access to the code snippet.
Hi Thanks For Showing Interest In My Code, Sure I Will Make a Codepen Account and WIll Update My Code There.
Thanks 👍😊