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
CSS code
.center {
padding-top: 70px;
margin: auto;
text-align: center;
}
.btn {
margin: auto;
text-align: center;
}
Css Updated output
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
Now that we have completed our javascript section, our updated output with javascript. Hope 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…..