Random Color Generator in HTML CSS and JS

This content originally appeared on DEV Community and was authored by SnowBit

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>

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;
}

For JavaScript, make sure to check out the video

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

This content originally appeared on DEV Community and was authored by SnowBit

Print Share Comment Cite Upload Translate Updates

APA

SnowBit | Sciencx (2021-11-21T09:33:07+00:00) Random Color Generator in HTML CSS and JS. Retrieved from https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/

MLA

" » Random Color Generator in HTML CSS and JS." SnowBit | Sciencx - Sunday November 21, 2021, https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/

HARVARD

SnowBit | Sciencx Sunday November 21, 2021 » Random Color Generator in HTML CSS and JS., viewed ,<https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/>

VANCOUVER

SnowBit | Sciencx - » Random Color Generator in HTML CSS and JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/

CHICAGO

" » Random Color Generator in HTML CSS and JS." SnowBit | Sciencx - Accessed . https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/

IEEE

" » Random Color Generator in HTML CSS and JS." SnowBit | Sciencx [Online]. Available: https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/. [Accessed: ]

rf:citation

» Random Color Generator in HTML CSS and JS | SnowBit | Sciencx | https://www.scien.cx/2021/11/21/random-color-generator-in-html-css-and-js/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Purpose of making this

Make sure to check out this video

Related Posts