6
How to Create Background-Changer Using HTML, CSS and JavaScript.
source link: https://dev.to/ajaysharma12799/how-to-create-background-changer-using-html-css-and-javascript-1fi7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Create Background-Changer Using HTML, CSS and JavaScript.
Jul 20
・1 min read
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>
Enter fullscreen modeExit fullscreen mode
* {
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;
}
Enter fullscreen modeExit fullscreen mode
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})`;
}
Enter fullscreen modeExit fullscreen mode
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK