How to Change Background Color in Html & JavaScript?
Welcome to the Codewithrandom blog. In this article, We learn how to create a Change Background Color Using Html and JavaScript.we click the button and a random background color show with their hex code using JavaScript.
By clicking a button, we may alter the background color of our website utilizing the Hex color background changer CSS effect. The hex color code that may be used to create the same color will be shown because we will also change the backdrop color along with the color.
50+ HTML, CSS & JavaScript Projects With Source Code
I hope you enjoy our blog so let’s start with a basic HTML Structure for the Background HEX Color Changer.
HTML Code For Change Background HEX Color
<html> <body> <div class="center"> <h1>Background color picker!</h1> <button class="btn" onclick="changeColor()"> Click me! </button> <h3 class="center" id="hex">#</h3> </div> </body> </html>
Create A Travel/Tourism Website Using HTML and CSS
Using the div tag with class “centre,” the <h1> tag selector, and the button tag, we will add the headings for the background colour picker, colour changer, and a button with the click function inside the body section.
Now, we’ll use the <h3> element to add the # section and the colour along with the colour code.
There is all the HTML code necessary to alter the background’s HEX colour. You can now view the output without using JavaScript or CSS. Then, using JavaScript code, we implement the primary functionality for changing the background’s HEX colour and write CSS for the style project.
.center {
padding-top: 70px;
margin: auto;
text-align: center;
}
.btn {
margin: auto;
text-align: center;
}In order to style the background colour changer, we will use the class selector property. The text will now be center-aligned using the text-align property once we have added a padding top of 70px, set the margin to “auto,” and added the padding.
We will now style the button using the class selector (.btn). We’ll set the margin to “auto” using the margin property, and we’ll centre the text using the text-align property.
Simple Portfolio Website Using Html And Css With Source Code
CSS Output:
JavaScript Code For Change Background HEX Color
function getHex()
{
// storing all letter and digit combinations
// for html color code
var letters = "0123456789ABCDEF";
// html color code starts with #
var color = '#';
// generating 6 times as HTML color code consist
// of 6 letter or digits
for (var i = 0; i < 6; i++)
color += letters[(Math.floor(Math.random() * 16))];
return color;
}
function changeColor()
{
var hex = getHex();
document.getElementById("hex").innerHTML = hex;
document.getElementsByTagName("BODY")[0].style.backgroundColor = hex;
}We’ll write the getHex method inside of our Javascript (). With the help of the var keyword, we will create a color variable and store the numbers and letters in it. We’ll make a loop using the for a statement if the variable’s value alters the color. Therefore, we shall adjust and record. We’ll choose the inner html using getElementById, modify the background color, and then select the element.
Restaurant Website Using HTML and CSS
Video Output:
Final Output Of Change Background HEX Color
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Now that we have completed our Change Background HEX Color. Our updated output with Html, Css, and JavaScript. Hope you like the Background HEX Color Changer Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Thank you!
ADVERTISEMENT
This post teaches us how to create a Background HEX Color Changer Using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
ADVERTISEMENT
Written by – Code With Random/Anki
Code By – Will Rabbermann
ADVERTISEMENT
