How To Create color Flipper using vanilla Javasscript
Tags: javascript, beginners, html, css
Published: 2023-07-25 16:33:18


### Introduction
Javascript is used in creating web pages. Javascript allows adding dynamic behaviour and interactivity user experience. 
A colour flipper is a simple interactive tool that changes the background color of the HTML element by clicking a button. With the click of a button, a function is run that generates a random colour on the set Background.
Practice makes perfect and to understand Javascript concepts, one needs substantial time and consistency in practice.
The colour flipper is a basic project and understanding how it works will give you a hands-on- approach to a practical understanding of javascript concepts.
In this article, you are going to dive into a colour flipper project using HTML, CSS, and JAVASCRIPT.
When you are finished, you will have covered the following;
- DOM manipulation
- Javascript arrays
- Math. random()
- Math. floor()
- Javascript functions

## Pre-requisites
 Before you dive into this blog, you need to have the following:
- Visual Studio Code installed to write your HTML, CSS, AND JavaScript code. Follow this link to  [Download Visual Studio Code](https://code.visualstudio.com/)
- Working with files. You can successfully create folders, files and navigate through them in VSCode. Get started with this on [Mozilla Developer Docs](https://developer.mozilla.org/en-US/docs/Learn)
- A web browser to test and view the colour flipper. Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari are suitable choices.

## Step 1-Creating Our Files
To get started with creating our colour flipper, we first need to open our code editor and create 3 files index.html, index.css, and index.js.

##  Step 2- Adding the HTML Code
Inside our HTML file, we will add the following code:

```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color flipper</title>
    <!-- css -->
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <!-- HEADER  -->
    <header>
        <h1>Color Flipper</h1>
    </header>
    <!-- MAIN  -->
    <main>
        
        <div class="container">
            <h2>Background Color <span id="value">#0a0a23</span></h2>
            
            <div class="button-container">  <!--div containing button-->
            <button id="btn">click me</button>
        </div>

        </div>
    </main>

    <!-- Javascript -->
    <script src="index.js"></script>
</body>
</html>
```
Let me explain the above code in our HTML file.
The file contains:
- Firstly, we have linked our HTML to our CSS for styling.
  >``` <link rel="stylesheet" href="index.css">```

- Secondly, we added **script tag** to link to the javascript file
  >`<script src="index.js"></script>`
- A **header** with the Color Flipper text. This explains what our project is about.
-  We also created a div container in our main tag that contains an **h2** text Background Color and **span** text of the current body background colour. Also, we have a div that contains a button that changes the body background color style when clicked.
  
  >Note: The span and the button tags have unique IDs, enabling us to target them with javascript.

  - Open your browser and you will see the HTML Output:
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/mbuguadev/embed/NWEXwLm?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/mbuguadev/pen/NWEXwLm">
  Untitled</a> by Dennis Mbugua (<a href="https://codepen.io/mbuguadev">@mbuguadev</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

 ## Step 3-Adding  CSS code
So, let us add our CSS code to the **index.css** file :

```
/* css reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* general styling */

body{
   min-height: 100vh;/* set body min-height to at least 100% viewports height*/
    background-color: #0a0a23;
    color: #fff;
    text-align: centre;

} 

/* --------------  CONTAINER STYLES*
-------------------*/
.container{
    text-align: center;
}
main{
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.container h2{
    margin-bottom: 2rem;
    background-color: coral;
    padding: 1rem;
    border-radius: 10px;
}

/* button styling */
#btn{
    font-family: sans-serif;
    text-transform: uppercase;
    background: transparent;
    color: #fff;
    letter-spacing: 1.2;
    display: inline-block;
    font-weight: 700;
    transition:0.3s;
    border: 2px solid coral;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}
#btn:hover,:focus{
    opacity: 0.7;
    background-color: #999;
    cursor: pointer;
} 
```

Using the ***Css code*** above, we have done the following:
- Reset the default styles using the _*_ universal selector.
- Set the body styles to a min- height to 100% of the viewport height.
- Center the main content using CSS Grid.
- Added styles to the button with ID of "btn" and hover effects. 

* - After adding the css code, save and refresh the browser for result.
   Now the page looks like this with CSS styles
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/mbuguadev/embed/NWEXwLm?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/mbuguadev/pen/NWEXwLm">
  Untitled</a> by Dennis Mbugua (<a href="https://codepen.io/mbuguadev">@mbuguadev</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

 ## Step 4-Adding Functionality with Javascript

 Now that our HTML and CSS codes are set,  it is time write our javascript code.We are going to add functionality to the color flipper.

 In our javascript code, we will first need to do the following:
1. Create an array that contains the HEX color characters.
 
   ```let  hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];```

   HEX colors values contains combination of 6 characters from the set of 0-9 and A-F. We have stored the characters in **hexCharacters** variable.
   
 Select our **span** and **button** elements using their respective ID.
   ```
   const spanValue = document.getElementById('value');
const clickButton = document.getElementById('btn');
   ```
   We have used  the Javascript  in built method `document.getElementById` that helps to retrieve a reference to a HTML element using the element's ID.
   The **spanValue** and **clickButton** variables stores references to HTML elements with the IDs 'value' and 'btn', respectively.



   Now that we are done creating variables, let us add  the functions to our javascript code:
   ```
   // create an event listener to button
clickButton.addEventListener('click', function(){
    getRandomCharacter(); // call the getRandomCharacter function on click
    
});

// function to generate HEX value characters
function getRandomCharacter(){
    
    let hexColorCharacters = "#";  //intial value of of our color value
    
    for(let i=0; i<6;i++){
        hexColorCharacters +=hexCharacters[generateRandomNumber()];  
    }

    spanValue.textContent = hexColorCharacters; // set the span text content to current background color value
    
    /*set body background color to  hexColorCharacters;
    it contains 6 random characters generated from hexCharacters array */
    document.body.style.backgroundColor = hexColorCharacters;
}

/*function that generates random numbers
//generates numbers between 0 and 16 */

function generateRandomNumber(){
    return Math.floor(Math.random() * hexCharacters.length);
}
   ```
   This is what we have done in the above javascript code:

 *Step I:
we have created an event listener to our button with the ID "btn".
We want an event( in this case a click event) to happen when the button is clicked.
When the button is clicked, it triggers the function specified.

 *Step II:
  The event listener triggers anonymous function(function without a name), when button is clicked.
  Now, inside this anonymous function, we call the **getRandomCharacter()**
  function
  
*Step III: What is happening inside the **getRandomCharacter()** function:
  
  In this function, we have a variable  **hexColorCharacters** which  starts with "#" (a valid starting character for HEX colors). 
  when the loop runs,  it appends  a random HEX characters from the **hexCharacters** array, forming a complete 6-character HEX color code.

  In the for loop, we generate a random HEX color value by selecting random characters from a list of valid HEX characters, which includes numbers 0-9 and letters A-F(as we said above). The loop runs six times, with each iteration appending a new random character to the hexColorCharacters variable, initially set  to "#" as the valid HEX color prefix. After completing the loop, the **hexColorCharacters** holds a complete 6-character random HEX color value. For example("#4B32BD");
  
The function also:
   *  Sets  this **hexColorCharacters**  as the content of the span using **textContent**.
   * Sets the background color of the webpage body **(document.body.style.backgroundColor)** to the generated HEX color.
*Step IV
The function **generateRandomNumber()** utilizes the **Math.random()**
and **Math.floor()** mathods to generate random numbers between 0 and 15 **(hexCharacters.length - 1)**.
We noe use the function to index into the **hexCharacters** array, and pick a random HEX character.

Here is the complete  javascript code in our **index.js** file:

```
//  create a variable to store HEX character combination
let  hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];


// Select span and button element using their ID values

const spanValue = document.getElementById('value');
const clickButton = document.getElementById('btn');


// create an event listener to button
clickButton.addEventListener('click', function(){
    getRandomCharacter(); // call the getRandomCharacter function on click
    
});

// function to generate HEX value characters
function getRandomCharacter(){
    
    let hexColorCharacters = "#";  //intial value of of our color value
    
    for(let i=0; i<6;i++){
        hexColorCharacters +=hexCharacters[generateRandomNumber()];  
    }

    spanValue.textContent = hexColorCharacters; // set the span text content to current background color value
    
    /*set body background color to  hexColorCharacters;
    it contains 6 random characters generated from hexCharacters array */
    document.body.style.backgroundColor = hexColorCharacters;
}

/*function that generates random numbers
//generates numbers between 0 and 16 */

function generateRandomNumber(){
    return Math.floor(Math.random() * hexCharacters.length);
}
```

Give yourself a part on the back for the great work. Now that we have completed our code, click the button to start playing with the color flipper.

**See the result in  codepen**
  <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/mbuguadev/embed/NWEXwLm?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/mbuguadev/pen/NWEXwLm">
  Untitled</a> by Dennis Mbugua (<a href="https://codepen.io/mbuguadev">@mbuguadev</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>






## Conclusion
You have successfully created a color flipper that changes the background of our page on the click of a button.
With this Javascript project, you have learnt how to generate random numbers using **Math.random()** and **Math.floor()** methods. Along the way, you have learnt Javascript DOM manipulation and how to write reusable code with Javascript functions. It is my hope that you will use these concepts in your next project.

Let me know how you felt about this on  [Twitter](https://twitter.com/mbugua_dennis33)

Written by **Dennis Mbugua**