DEV Community

Cover image for Project 1: color flipper project in Javascript explained
Kurapati Mahesh
Kurapati Mahesh

Posted on

Project 1: color flipper project in Javascript explained

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

  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>
Enter fullscreen mode Exit fullscreen mode

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.


💎 Love to see your response

  1. Like - You reached here means. I think, I deserve a like.
  2. Comment - We can learn together.
  3. Share - Makes others also find this resource useful.
  4. Subscribe / Follow - to stay up to date with my daily articles.
  5. Encourage me - You can buy me a Coffee

Let's discuss further.

  1. Just DM @urstrulyvishwak
  2. Or mention
    @urstrulyvishwak

For further updates:

Follow @urstrulyvishwak

Top comments (0)