Change Background Color using JavaScript

This snippet is about the background color change effect by clicking on the color box. The Project uses HTML, CSS, and the Javascript library Jquery. To Watch the step-by-step process, we recommend you watch the video tutorial below. There are many types of videos related to front-end development on our YouTube Channel. We hope these videos will help you in the long run. Please consider subscribing.

We hope the video tutorials will help you understand the project better and get some idea about the code. Here, we have designed a banner with a headline and sub-headline. Then we took an input field and set it to the top right via the CSS position property. Then we created a function in JavaScript library jQuery so that a color box will open when the user clicks on the input field. The color the user chooses from that color box will be selected as the background color. In case of some dark background colors, the banner text color will also change.

You May Also like:

Change Background Color using Javascript [ Source Code ]:

First, create an HTML file and then a CSS file and connect it with the HTML file. This project requires the javascript library jQuery so the latest jQuery must be included. Copy the code from the code box below and paste it into your file and save it. If for some reason your snippet doesn't work then download the code from the download button below. Make it more engaging and exciting by adding your own personality and ideas to it.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<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>How To Change Background Color With JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

   
    <div class="wrapper">
        <input type="color" name="color" id="box" class="box" value="#ff0000">
        <div class="content">
            <h2>homepage</h2>
            <p>Some Text Here</p>
        </div>
    </div>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#box").on("input change", function () {
            
            $("body").css("background-color", $(this).val());
            if ($("#box").val() <= "#8d8d8d") {
                $("h2, p").css("color", "white");
            } else {
                $("h2, p").css("color", "black");
            }
            });
        });
    </script>
</body>
</html>

ADD CSS:

* {
    margin: 0;
    padding: 0;
  }
  .wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	position: relative;
}
.wrapper input {
	position: absolute;
	top: 25px;
	right: 25px;
	-webkit-appearance: none;
	width: 50px;
	height: 50px;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
}
  .content {
    font-family: montserrat;
    text-align: center;
  }
  .content h2 {
    text-transform: uppercase;
    font-size: 80px;
  }  
  .content p {
    font-size: 45px;
  }

Here are more code snippets for you when you click on a Load More Button below the website's Homepage. Code examples like these can help you learn something new. We are honored that you came to our website.

DOWNLOAD CODE

Change Background Color using Javascript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Change Background Color using JavaScript

Change Background Color using Javascript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form