Skip to content
Submitted over 2 years ago

Launch countdown timer with flip animation

Kaung Zin Hein•720
@K4UNG
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Launch countdown timer
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

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!

Community feedback

  • Prabhash Ranjan•2,540
    @besttlookkPosted over 2 years ago

    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

    1
    Kaung Zin Hein•720
    @K4UNGPosted over 2 years ago

    Hey @besttlookk ! I'd love to help you. Basically what I did was I had a keyframes in my CSS for flip animation which takes about .6s. In my JS, I used setInterval to execute the countdown every second. I used localStorage and stored the time there but you can just use the built-in Date class. Every second, I update the front and back part of the timer accordingly and add flip animation to the seconds card. But after the animation is finished, the card flips back immediately back to the original position without the animation. To fix that, I added an eventListener to listen for the animationend event and then right after that, I changed the front part of the card to be the same as the back. That way, it creates the illusion of flipping infinitely. And then I just added a bunch of conditions to decide whether or not to flip the minute, hour and day cards. Hope this was helpful. Happy Coding!

    0
  • John Mirage•1,590
    @john-miragePosted over 2 years ago

    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.
    0

Please log in to post a comment

Log in with GitHub

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