Project 2: Random Color Flipper in Javascript
Tags: javascript, css, html, discuss
Published: 2022-02-24 15:57:38

To the continuation to [project 1](https://dev.to/urstrulyvishwak/project-1-color-flipper-project-in-javascript-explained-3gmg), I have improved it to flip to new color every time you click on button.

Here is the implementation:

```
<html>

<body id="flipper">
    <p id="text" style="font-size:50px">Background Color: <span id="color"></span> </p>
    <button id="btn" style="padding: 14px 28px;" onclick="perform()">Random color!</button>
    <script>
        function perform() {
            const color = '#' + Math.random().toString(16).substring(9);
            document.getElementById('color').innerHTML = color;
            document.getElementById('flipper').style.backgroundColor = color;
        }
    </script>
</body>

</html>
```

Again, lets understand step by step in the code. 

If you see the HTML, there is again button from which the action begins. When user clicks on `Random color!` button then `perform` action gets triggered. 


In the `perform` function, we are capturing hexadecimal value of color using `'#' + Math.random().toString(16).substring(9);` like `#9af6bf, #815aab, #c17546` etc.


`document.getElementById('color').innerHTML = color;` - setting that randomly generated color to `span` to show on page.
         `document.getElementById('flipper').style.backgroundColor = color;` - Setting as background color of the whole page.

Hope things are clear. 

Thanks! Happy Coding 😊.

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>