Background HEX Color Changer Javascript | Color Change Project







Background HEX Color Changer Javascript | Color Change Project 

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Background HEX Color Changer Javascript. We use HTML, Css, and javascript for the Background HEX Color Changer Using Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Background HEX Color Changer Using Javascript. 

HTML Code

 <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>

There is all the HTML code for the Background HEX Color Changer Using Javascript. Now, you can see an output with a Background HEX Color Changer Using Javascript then we write javascript for the Background HEX Color Changer Using Javascript.

output

Background HEX Color Changer Javascript | Color Change Project

CSS code

 .center {  
padding-top: 70px;
margin: auto;
text-align: center;
}
.btn {
margin: auto;
text-align: center;
}

Css Updated output


Background HEX Color Changer Javascript | Color Change Project

Javascript Code

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

Final output

Background HEX Color Changer Javascript | Color Change Project

Background HEX Color Changer Javascript | Color Change Project

Now that we have completed our javascript section, our updated output with javascriptHope you like the Background HEX Color Changer Using Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

This post teaches us how to create a Background HEX Color Changer Using Javascript using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code By – Will Rabbermann
Check out more…..

Share on:

Leave a Comment