DEV Community

1Kraken
1Kraken

Posted on

Hex Color Generator

Creating a color draw is very simple.

First we need to add some html.

<!DOCTYPE html>
<html lang="en">
<!-- Head -->
    <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>Document</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
<!-- Main Container -->
        <div class="container">
            <h1>Draw a Color</h1> <!-- Title -->
            <button class="btn" type="button">Draw a Color</button><br /> <!-- button to draw color -->
            <h1 class="hex" style="text-align: center; margin: 10px"></h1> <!-- hex value -->
            <div class="colors">
                <div class="color1"></div> <!-- div with hex color -->
            </div>
        </div>

        <script src="./index.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now let's create a css file with simple styles. It has to be presented somehow!

Main Styles

* {
    box-sizing: border-box;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background: rgb(243, 237, 237);
}

.container {
    align-self: center;
    align-items: center;
    text-align: center;
    margin: 15px;
}
Enter fullscreen mode Exit fullscreen mode

Color container styles

.color1 {
    background: gray;
    height: 200px;
    width: 210px;
    border-radius: 15px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

And button styles


.btn {
    font-size: 1em;
    color: #fff;
    cursor: pointer;
    outline: none;
    border: none;
    background: #b2d100;
    display: inline-block;
    padding: 10px 30px;
    margin-top: 20px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2px;
    transition: 0.5s;
}

.btn:hover {
    letter-spacing: 4px;
}
Enter fullscreen mode Exit fullscreen mode

And last not much js script.

First we download all the items.

const btn = document.querySelector('.btn')
const color = document.querySelector('.color1')
const hex = document.querySelector('.hex')
Enter fullscreen mode Exit fullscreen mode

Then we create a function that generates the hex code

function getRandomColor() {
    var letters = '0123456789ABCDEF'
    var color = '#'
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
    }
    return color
}
Enter fullscreen mode Exit fullscreen mode

And the button handling

const btnClick = () => {
    console.log(getRandomColor())
    color.style.background = getRandomColor()
    hex.innerHTML = getRandomColor()
}

btn.addEventListener('click', btnClick)
Enter fullscreen mode Exit fullscreen mode

The code is available on github and on this website.

Thanks, Kraken.

Discussion (0)