Create a Colour Flipper using JavaScript

Last Updated : 24 May, 2023

Color flippers are an entertaining way to add a bit of life to a website or application. With the help of JavaScript, it is possible to create a color flipper that will change the background color of an element with a click of a button. In this article, we will guide you through the steps required to create a color flipper using JavaScript.

Step 1: HTML Markup
To create a color flipper, we first need an element to apply the color. In this example, we will use a div element with an id of colorFlipper. We will also create a button that will trigger the color flip. The HTML markup will look like this:

HTML

<!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"> 
    <title>Color Flipper</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div id="colorFlipper"> 
        <button onclick="changeColor()"> 
              Flip Color 
          </button> 
    </div> 
  
</body> 
<script src="script.js"></script> 
</html>

Step 2: CSS Styling: To style the div element, we need to add some CSS code. In this example, we will set the width and height of the div element to 100vw and give it a border of 1px solid black. We will also set the initial background color to white.

CSS

* { 
    box-sizing: border-box; 
    margin: 0px; 
    padding: 0px; 
} 
  
#colorFlipper { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border: 1px solid black; 
    background-color: white; 
} 
  
button { 
    height: 50px; 
    width: 200px; 
    background-color: black; 
    color: white; 
    border-radius: 50px; 
    outline: none; 
    font-size: 20px; 
    cursor: pointer; 
}

Step 3: JavaScript Function
Now it’s time to write the JavaScript code that will change the background color of the div element. We will define a function called changeColor() that will generate a random color and apply it to the div element. To generate a random color, we will use the Math.random() method to generate a number between 0 and 255 for each of the red, green, and blue color values. We will then concatenate these values into a string and apply it as the background color of the div element.

Javascript

function changeColor() { 
    let red = Math.floor(Math.random() * 256); 
    let green = Math.floor(Math.random() * 256); 
    let blue = Math.floor(Math.random() * 256); 
    let color = "rgb(" + red + "," + green + "," + blue + ")"; 
    document.getElementById("colorFlipper").style.backgroundColor = color; 
}

Step 4: Testing: Finally, we can test our color flipper by opening the HTML file in a web browser and clicking the “Flip Color” button. Each time the button is clicked, the background color of the div element will change to a random color.

Output:

Congratulations! You have successfully created a color flipper using JavaScript. You can customize the code by adding more elements and styling or adjusting the code to fit your specific needs.

Suggest improvement

Create a Coin Flip using HTML, CSS & JavaScript

Share your thoughts in the comments