Create RGB Color Flipper Using HTML,CSS & Javascript

Javascript RGB Color Flipper

Javascript RGB Color Flipper is the best project to do using Javascript. Through this project you will learn to use Math.floor, Math.random etc. So it's Best Project for the Beginners.

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Color Flipper</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="header">
            <h1>Color Flipper</h1>
        </div>
        <div class="container">
            <div class="flipper" id="flip-color">
                <div class="color-name" id="name">
                    <h1>BLUE</h1>
                </div>
            </div>
            <div class="button">
                <button id="chg-color">CHANGE</button>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

CSS

*{
        margin: 0;
        padding: 0;
    }
    body{
        background-color:#28282b;
    }
    .header h1{
        color:white;
        font-family:Lemon Milk;
        font-weight:400;
        font-size:1.5rem;
        padding-top:2%;
        padding-left:2%;
    }
    .container{
        display: flex;
        justify-content: center;
        align-items:center;
        height:90vh;
    }
    .container .flipper{
        height:500px;
        width:540px;
        background-color:white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family:Lemon Milk;
        font-weight:400;
        border-radius:2px;
        margin-right:4%;
    }
    .container .flipper .color-name{
        background-color:white;
        width:150px;
        display: flex;
        justify-content: center;
        height:50px;
        align-items: center;
        color:black;
        border-radius:2px;
    }
    .container .button button{
        height:60px;
        width:200px;
        background-color:white;
        color:black;
        border:none;
        border-radius:2px;
        font-family:lemon milk;
        font-size:1.5rem;
        letter-spacing:2px;
        cursor: pointer;
    }

JAVASCRIPT

let btn = document.getElementById('chg-color');
    let flip = document.getElementById('flip-color');
    let name = document.getElementById('name');
    let color=["Red","Green","Blue"];
    btn.addEventListener('click',()=>{
    let a=randomnum();
    flip.style.backgroundColor=color[a];
    name.style.color=color[a];
    btn.style.backgroundColor=color[a];
    btn.style.color='white';
    });
    function randomnum(){
        let random = Math.floor(Math.random()*color.length);
        return random;
    }