ADVERTISEMENT

Change Background HEX Color Using Javascript On Click

Telegram Group Join Now

ADVERTISEMENT

Change Background HEX Color Using Javascript On Click

Change Background HEX Color Using Javascript On Click
Change Background HEX Color Using Javascript On Click

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

5+ HTML CSS Projects With Source Code

Only Html Code Output

Change Background HEX Color Using Javascript On Click
Change Background HEX Color Using Javascript On Click

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

ADVERTISEMENT

HTML + CSS Code Updated Output

 

Change Background HEX Color Using Javascript On Click
Change Background HEX Color Using Javascript On Click

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

ADVERTISEMENT

Change Background HEX Color Using Javascript On Click
Change Background HEX Color Using Javascript On Click

 

ADVERTISEMENT

Change Background HEX Color Using Javascript On Click
Change Background HEX Color Using Javascript On Click

 

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.

ADVERTISEMENT

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

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT