How to Generate a Random Color Using JavaScript Complete Source Code

How to Generate a Random Color Using JavaScript With Source Code

by

In today’s digital age, color plays a crucial role in enhancing the visual appeal of websites and applications. But what if you need to randomly generate a color for a specific element or background on your website?

In this blog post, we’ll show you how to generate a random color using JavaScript and provide you with the complete source code to implement it in your projects.

Whether you’re a beginner or an experienced developer, this article is perfect for you if you’re looking to add a touch of randomness to your designs. So, let’s dive in and learn how to generate a random color in JavaScript.

If you want to Create an Age Calculator using JavaScript please check this article.

Color Generator Website Layout.

In this project, you see one box in the center of the web page and one button in the center of the box with the text “click me” when you click the button color of the body changes automatically. As you can see in this image.

random color generator using javascript

How to Create a Random Color Generator Using HTML, CSS, and JavaScript.

It is very simple to create this type of project using HTML, CSS, and JavaScript if you have a little bit of knowledge about HTML, CSS, and JavaScript you can make this project easily. But you don’t have enough knowledge so don’t worry I also provide a complete source code for this project.

There are a few steps to create this random color generator using JavaScript that is given below.

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js
  5. Then connect CSS and JS files with the HTML file.

HTML FILE CODE

Copy the HTML code and paste it into your index.html file make sure your file extension is (.html)

<!DOCTYPE html>
<html lang="en">
    <!-- Created By Codingpakistan.com -->
<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>Random Color Generator - CodingPakistan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="main">
        <div class="container">
            <h2 id="color-code">#fff</h2>
            <button id="btn">Click Me</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS FILE CODE

Copy the CSS code and paste it into your style.css file make sure your file extension is (.css)

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
 /* Created By Codingpakistan.com */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body {
    transition: 0.5s;
}
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 30rem;
    padding: 10px;
    border-radius: 10px;
    font-size: 40px;
    background-color: white;
    text-align: center;
}
button {
    margin-top: 5px;
    width: 100%;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    display: block;
    font-size: 35px;
}

JavaScript FILE CODE

Copy the JavaScript code and paste it into your script.js file make sure your file extension is (.js)

const getColor = () => {
    // Hex Code
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomCode = "#" + randomNumber.toString(16);
    document.body.style.backgroundColor = randomCode;
    document.getElementById("color-code").innerText = randomCode;
    navigator.clipboard.writeText(randomCode)
}
//event call
document.getElementById("btn").addEventListener(
    "click",
    getColor
)
// init call
getColor();
Video Tutorial Color Generator Using JavaScript

If you don’t understand this code and you want to learn more about this project and how logic work in this project so please watch this video and subscribe to this YouTube Channel for more videos like this.

Video Created by WS-Cube Tech YouTube Channel

You Might Like This

Conclusion and Final Words

In conclusion, generating random colors using JavaScript is a simple task that can be achieved using a variety of methods. The complete source code provided in this article shows how to use JavaScript’s Math. random() function to generate a random number and then convert it into a hexadecimal code that represents a color.

With this code, you can add color to your web page in an unpredictable and fun way, making your website look more dynamic and engaging for your users.

Leave a Comment