Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 23, 2022 06:44 pm GMT

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 & 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>

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.

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.

Ok. now I will improve this to show random color each time when you click button. I will update this article as soon as I am done.

Please do comment if you don't understand any part of it.


Original Link: https://dev.to/urstrulyvishwak/project-1-color-flipper-project-in-javascript-explained-3gmg

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To