Bonrey• 1,130
@Bonrey
Submitted
That was quite a tough challenge, but I think I learned quite a lot (working with setInterval(), setTimeout() in JS; adding animation via JS, etc.)!
The most difficult part was to animate the cards. I struggled for some time with css and then tortured myself with js, but eventually it worked 😅 (There's a bug where numbers kind of skew a pixel or two every time they flip. I've tried really hard to get rid of it, but the only solution was to change the width/height of the card, which worked only for the desktop design. P.S. I tried all kinds of length units, like px, rem, %, vw, etc.).
In terms of functionality, you can do the following:
- Press "Space" key to pause/resume the timer;
- Press "Enter" key to see what happens at the end of the countdown (there's some extra animation I added);
- Click social-media links to refresh the page and therefore restart the timer.
As always, any feedback is welcome!
Happy coding, everyone! 😉
