This is a solution to the Launch countdown timer challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover states for all interactive elements on the page
- See a live countdown timer that ticks down every second (start the count at 14 days)
- Bonus: When a number changes, make the card flip from the middle
Solution.mov
- Solution URL: On frontendmentor
- Live Site URL: https://sarvagya2545.github.io/fem-countdown/
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- CSS transitions
- SCSS - CSS preprocessor
- Javascript for clock functionality
I learnt how to create a timer in javascript & learnt how to integrate it with flip animation using transitions. The hardest part was to create the flip animation. But the thing which I ended up doing was to toggle the class using setTimeout and use transitions to create the flip effect.
Also, the transitions which were applied were applied when hovering and not on the actual card so that the flip is visible only going upward and not downward.
I learnt about backface-visibility which was a pretty neat property.
Still, some bugs are there. E.g. we see 60 popup in the seconds card after 1 minute ends instead of 00. The kind of code I wrote was not the cleanest which I could write but I am able to somehow do it. I have yet to refactor the code.
Next thing I want to do once the flip animation issues are fixed is to have a nice animated background. I don't really like the current one and would like to change it up.
- Kevin Powell's video - This video was the one which helped me understand the basics behind the flip animation. Kevin Powell is an amazing instructor and is a css wizard!
Hello there! I am Sarvagya Sharma!
- Frontend Mentor - @sarvagya2545
I saw @tediko's solution to this timer project when I got stuck and gained a lot of insight from that project. Thanks for the insight!