Telegram Group Join Now

Change Background HEX Color Using Javascript On Click

Welcome to the Codewithrandom blog. This blog teaches us how we create a Change Background HEX Color. We use HTML, CSS, and JavaScript for the Background HEX Color Changer.

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>

There is all the Html code for the Background HEX Color Changer. Now, you can see output without Css and JavaScript Code. then we write Css for the styling project and add Main Background HEX Color Changing functionality Using JavaScript Code.

5+ HTML CSS Projects With Source Code

Only Html Code Output

CSS Code For Change Background HEX Color

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

Password Strength Checker using HTML ,CSS & JavaScript

HTML + CSS Code Updated 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;
}

Final Output Of Change Background HEX Color
<br /> See the Pen <a href="https://codepen.io/wrabbermann/pen/PozddVx" rel="nofollow noopener" target="_blank"><br /> Background HEX Color picker</a> by Will Rabbermann (<a href="https://codepen.io/wrabbermann" rel="nofollow noopener" target="_blank">@wrabbermann</a>)<br /> on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br />

Weather App Using Html,Css And JavaScript

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.

Thank you!

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.

Written by – Code With Random/Anki
Code By – Will Rabbermann

Telegram Group Join Now

Change Background HEX Color Using Javascript On Click

HTML Code For Change Background HEX Color

CSS Code For Change Background HEX Color

JavaScript Code For Change Background HEX Color

Telegram Group Join Now

Leave a Comment Cancel reply