Telegram Group Join Now
ADVERTISEMENT
Change Background HEX Color Using Javascript On Click
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
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
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
ADVERTISEMENT
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