This content originally appeared on DEV Community and was authored by DEV Community
To the continuation to project 1, I have improved 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 😊.
💎 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
For further updates:
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-24T15:57:38+00:00) Project 2: Random Color Flipper in Javascript. Retrieved from https://www.scien.cx/2022/02/24/project-2-random-color-flipper-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.