Create Hex Color Flipper Using HTML,CSS & Javascript

Javascript HEX Color Flipper

~ Javascript Hex 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 Hex</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="container">
        <div class="header">
            <div class="header-box" id="box">
                Color Flipper
            </div>
        </div>
        <div class="flipper">
            <div class="details-box">
                <div class="title" id="titl">
                    Hey ! We have Generated Random Hex Color For You
                </div>
                <div class="color-name" id="name">
                    #0C7FF2
                </div>
            </div>
        </div>
    </div>
        <script src="script.js"></script>
    </body>
    </html>

CSS

*{
        margin: 0;
        padding: 0;
    }
    .header{
        padding:2%;
    }
    .header .header-box{
        background-color:white;
        color:black;
        width:150px;
        font-family:Lemon Milk;
        padding:1%;
        border-radius:2px;
        box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
                  0 2px 2px rgba(0,0,0,0.11), 
                  0 4px 4px rgba(0,0,0,0.11), 
                  0 6px 8px rgba(0,0,0,0.11),
                  0 8px 8px rgba(0,0,0,0.11);
        color:#0C7FF2;
    }
    body{
        background-color:#0C7FF2;
        cursor: pointer;
    }
    .flipper{
    display: flex;
    justify-content: center;
    align-items: center;
    height:70vh;
    }
    .flipper .details-box{
        height:150px;
        width:500px;
        background-color:#ffffff;
        border-radius:2px;
        box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
                  0 2px 2px rgba(0,0,0,0.11), 
                  0 4px 4px rgba(0,0,0,0.11), 
                  0 6px 8px rgba(0,0,0,0.11),
                  0 8px 8px rgba(0,0,0,0.11);
    }
    .flipper .details-box .title{
        font-family:Open Sans;
        font-weight:bolder;
        font-size:1.3rem;
        text-align: center;
        padding:2%;
        color:#0C7FF2;
    }
    .flipper .details-box .color-name{
        color:#0C7FF2;
        font-size:2rem;
        font-family:Lemon Milk;
        text-align:center;
        font-weight:bolder;
    }

JAVASCRIPT

let container = document.getElementById('container');
    let colorname = document.getElementById('name');
    let title = document.getElementById('titl');
    let box = document.getElementById('box');
    let hexcolor=[1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
    function randomnum(){
        let random = Math.floor(Math.random()*hexcolor.length);
        return random;
    }
    container.addEventListener('click',()=>{
    let hex="#";
    for(let i=0;i<=5;i++){
        hex=hex+hexcolor[randomnum()];
    }
    document.body.style.backgroundColor=hex;
    colorname.style.color=hex;
    colorname.textContent=hex;
    title.style.color=hex;
    box.style.color=hex;
    });

Javascript Hex Color Flipper

Javascript HEX Color Flipper

HTML

CSS

JAVASCRIPT

Subscribe to my newsletter

Dipesh Murmu

Dipesh Murmu