How to Create Background-Changer Using HTML, CSS and JavaScript.

This content originally appeared on DEV Community and was authored by Ajay Sharma

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})`;
}

This content originally appeared on DEV Community and was authored by Ajay Sharma

Print Share Comment Cite Upload Translate Updates

APA

Ajay Sharma | Sciencx (2021-07-20T16:36:32+00:00) How to Create Background-Changer Using HTML, CSS and JavaScript.. Retrieved from https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/

MLA

" » How to Create Background-Changer Using HTML, CSS and JavaScript.." Ajay Sharma | Sciencx - Tuesday July 20, 2021, https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/

HARVARD

Ajay Sharma | Sciencx Tuesday July 20, 2021 » How to Create Background-Changer Using HTML, CSS and JavaScript.., viewed ,<https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/>

VANCOUVER

Ajay Sharma | Sciencx - » How to Create Background-Changer Using HTML, CSS and JavaScript.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/

CHICAGO

" » How to Create Background-Changer Using HTML, CSS and JavaScript.." Ajay Sharma | Sciencx - Accessed . https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/

IEEE

" » How to Create Background-Changer Using HTML, CSS and JavaScript.." Ajay Sharma | Sciencx [Online]. Available: https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/. [Accessed: ]

rf:citation

» How to Create Background-Changer Using HTML, CSS and JavaScript. | Ajay Sharma | Sciencx | https://www.scien.cx/2021/07/20/how-to-create-background-changer-using-html-css-and-javascript/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts