Project 1: color flipper project in Javascript explained
Tags: javascript, webdev, programming, discuss
Published: 2022-02-23 18:44:25

I want to explain each and every step in creating small project in Javascript.

Purely designed this project using `HTML, CSS & Javascript`.

Ok. **What is color flipper first?**

Color of the whole page changes upon clicking button also shows the color name. See below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfuu613f623c6ooqmvmb.gif)

1. Open any IDE or just a notepad in your computer. 
2. Write below code and save as `colorFlipper.html`.
3. Double click or open with `Chrome` browser.
4. Keep clicking on `Flip Color!` button
5. Observe that color is flipped between `red` and `green`.

Code:

```
<html>

<body id="flipper">
    <p id="text" style="font-size:50px">Background Color: <span id="color">red</span> </p>
    <button id="btn" style="padding: 14px 28px;" onclick="perform()">Flip color!</button>
    <script>
        function perform() {
            let showingColor = document.getElementById('color');
            const color = showingColor.innerText === 'red' ? 'green' : 'red';
            showingColor.innerHTML = color;
            document.getElementById('flipper').style.backgroundColor = color;
        }
    </script>
</body>

</html>
```

Hope you got it. Now, we will see what is happening inside the code. 

Basically, you are interacting with `Flip Color!` button. That is your starting point. 

If you see in above HTML,

`<button id="btn" style="padding: 14px 28px;" onclick="perform()">Flip color!</button>`

Button html element with name as `Flip color!` has an action event `onclick="perform()"`. Yes, here `onclick` event calls `perform()` function. Everything under this `perform()` function is the core functionality which is making you to flip the color.

Ok. Now that we have done with `step 1` click on button. Let's go into `perform()` and understand what is happening inside of it.

`function perform() {
            let showingColor = document.getElementById('color');
            const color = showingColor.innerText === 'red' ? 'green' : 'red';
            showingColor.innerHTML = color;
            document.getElementById('flipper').style.backgroundColor = color;
        }`

---

Here, `showingColor` is variable into which we are storing element i.e. `span` inside `p` element.

_document object represents your web page_

`document.getElementById(id) ->	Find an element by element id`

---

`showingColor.innerText` gives the current value of color.

`color` variable assigned with current body color. So, the whole condition is if color is red then assign green and vice versa.

now, that you got which color to update using `color` variable.

---

Let's set text as selected color.

`showingColor.innerHTML = color;` which sets span color with the opposite of existing color always.

`document.getElementById('flipper').style.backgroundColor = color;` - sets background color of body with flipped color.

To learn more about interacting with DOM, you can go through: https://www.w3schools.com/js/js_htmldom.asp

Thank you! Happy Reading.

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> &#128142; 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%20world"
  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%5Etfw" 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%5Etfw" 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>