Background Color Changer Using HTML, CSS, JS with Full Source Code For Beginners

Source Code:

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bg color changer</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <button>Whoosh!</button> </section> <script src="app.js"></script> </body> </html>
Code language: HTML, XML (xml)

style.css

*{ padding: 0; margin: 0; box-sizing: border-box; } section{ height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } button{ border: 5px groove lightcoral; outline: none; background-color: rgb(110, 59, 168); font-size: 26px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; cursor: pointer; padding: 24px; border-radius: 35px; background: linear-gradient(145deg, #6b2494, #3d1070); }
Code language: CSS (css)

app.js

const button = document.querySelector('button'); const bge = document.querySelector('section'); button.addEventListener('click',() => { let col = "#"; col+=Math.random().toString(16).slice(2,8); bge.style.backgroundColor = col; })
Code language: JavaScript (javascript)

Leave a Comment