DEV Community

Muhammad Saim
Muhammad Saim

Posted on

3 1

Beautiful Random Color Generator With Vanila JavaScript

JavaScript is most fun language to make fun stuff. I decided to make a Beautifull Color Generator to generate the random colors on every click.

Step #01

Create a folder on your desired location and create three files on it.

  • index.html
  • app.js
  • style.css image

Step #02

Now its time to write some HTML for the project.

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>Beautiful Ranadom Color Generator</title>
  </head>
  <body>

    <div class="wrapper">
      <span class="colorCode" id="colorCode">#1abc9c</span>
      <button class="genNewBtn" id="genNewBtn">Click For New</button>
    </div>

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

Now run this on a browser and its look like this.
image

Step #03

Now its time make this beaytifull add some styles to it. put these css styles in style.css.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

body {
  height: 100vh;
  background-color: #1abc9c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  align-self: center;
}
.wrapper span,
.wrapper button {
  display: block;
}
.wrapper span {
  color: #fff;
  font-size: 3.75rem;
  text-transform: uppercase;
}
.wrapper button {
  background: none;
  border: 3px solid #fff;
  padding: 10px 20px;
  color: #fff;
  font-size: 2.25rem;
  margin-top: 10px;
  outline: none;
}

Enter fullscreen mode Exit fullscreen mode

Now our App is something looks like this.
image

Step #04

Now its time for the fun part of the App The JavaScript part. Now put this code in app.js.

var colorContainer = document.getElementById("colorCode");

var genButton = document.getElementById("genNewBtn");

var symbols = "0123456789ABCDEF";

var color = "";

genButton.addEventListener('click', function(){
    for(var i=0; i<6; i++){
        color += symbols[Math.floor(Math.random() * 16)];
    }   

    colorContainer.innerHTML = "#" + color;
    document.body.style.background = "#"+color;
    color = "";
});
Enter fullscreen mode Exit fullscreen mode

Yeah our fun app is ready 🥳

Thanks for reading 🤗

If you like please thumbs up and follow me for more fun stuff.

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay