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:
- Open any IDE or just a notepad in your computer.
- Write below code and save as
colorFlipper.html. - Double click or open with
Chromebrowser. - Keep clicking on
Flip Color!button - Observe that color is flipped between
redandgreen.
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.
💎 Love to see your response
- Like - You reached here means. I think, I deserve a like.
- Comment - We can learn together.
- Share - Makes others also find this resource useful.
- Subscribe / Follow - to stay up to date with my daily articles.
- Encourage me - You can buy me a Coffee
Let's discuss further.
- Just DM @urstrulyvishwak
-
Or mention
@urstrulyvishwak
Top comments (0)