DEV Community

SnowBit
SnowBit

Posted on

Random Color Generator in HTML CSS and JS

Hello everyone, I am back here with an amazing article 🌈

In this article, I am going to talk about creating a Random Color Article which might help you to improve your front end dev skills.

Purpose of making this

  • You will feel more self-confident
  • If you are a beginner you will learn something new from this tutorial, and if you are not a beginner then you will just practice a new thing

So, let's gets started

Make sure to check out this video

  • In index.html
<div class="container">
        <center>
            <div id="color" onclick="getRandomColor()"></div>
        </center>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • In style.css
#color {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 90px;
    font-weight: 900;
    mix-blend-mode: difference;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

For JavaScript, make sure to check out the video

Congrats you have made Random Color Generator in HTML CSS and JavaScript 🥳

Discussion (2)

Collapse
code913 profile image
code913

99% of beginner's probably understand nothing from this because it's just code to copy

Collapse
codewithsnowbit profile image
SnowBit Author • Edited on

Noted! Thank you for your feedback I will try to improve it 🙂