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

by

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