Launch countdown timer with flip animation

Solution retrospective
I've wanting to do this project(especially the flip animation) ever since I started learning JavaScript which was a few weeks ago. I even tried it in my own experimental files after a few days but couldn't execute the timing function of the flip animations no matter how hard I tried. But now that I have some knowledge, I took this challenge and I'm happy with how it turned out. The logic was a bit tricker than I thought so the code looks a bit messy. There're definitely better ways of doing this but this is my take on the challenge. I also tried the CUBE methodology for CSS but ended up deleting everything and starting over(It's an inappropriate project just to begin with). For the timer, instead of using the actual Date
class, I assigned total seconds to localStorage
and reset its value once the countdown is done so that it wouldn't stop running even after the time's up(Just for demonstration purpose only). I'd very much love to hear you feedbacks and suggestions on how I can improve further. Happy Coding!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @besttlookk
hi, Solution looks amazing. You said you started learning js few weeks ago and to do this is quite commendable. I am learning js for quite some time now still had to think about the logic part. I am currenlty doing this challenge. I still have no idea how to do flip animation. I tried to go through your code to have some idea but got lost. If you can guide me to do it that would be awsome .
Till then i am trying my luck on my own.
#happyCoding
- @john-mirage
Wow, nice animation, I did mine with gsap which is a very nice animation library.
- I dont think you need the border bottom on the flip pannel, the "border" effect is made with the background colors.
- For the hills background, i think you can improve it by setting a fixed height so it always cover the social medias icons. You can check my project to find how i did. Feel free to use my code if you like it.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord