DEV Community

Dhairya Shah
Dhairya Shah

Posted on

3

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 ๐Ÿฅณ

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Googleโ€™s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
dhairyashah profile image
Dhairya Shah โ€ข โ€ข Edited

Noted! Thank you for your feedback I will try to improve it ๐Ÿ™‚

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay