Some of Our Sources
- Engadget
- Techcrunch
- Technology Review
- Simplebits
- TutsPlus - Code
- Just Creative
- FanExtra - PSD
- Web Design Ledger
- Stylized Web
- Hashedout
Help Webnuz
Referal links:
Project 2: Random Color Flipper in Javascript
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:
Original Link: https://dev.to/urstrulyvishwak/project-2-random-color-flipper-in-javascript-3i6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To