Submitted about 3 years ago

Countdown Timer with flipping animation and pause/resume functions

Bonrey• 1,130

@Bonrey

Preview site View code

This is a solution for...

Launch countdown timer

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

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! 😉

Community feedback

The Burrito Doggie• 1,260

@BurritoDoggie

Posted about 3 years ago

Hello Bonrey,

Sweet Job ! I like yours a lot, I saw a different person's solution and only the numbers moved. You made the animation were the little 'flaps' move. Also I like the animation at the end of the countdown.

Keep Coding!

                              (@@)
                                \__/

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@BurritoDoggie thank you! 😊 The animation was really worth it, in my opinion.

The Burrito Doggie• 1,260

@BurritoDoggie

Posted about 3 years ago

@Bonrey

I think so too :)

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hi, Bonrey! 👋

Amazing work on this challenge! 👏 Animating the countdown cards can definitely be tricky, but I think you've done a pretty nice job on that! 👍

I really like the extra features you added and it's great to hear you learned a lot during this challenge (I always learn new things when I complete challenges, too). 😀

Everything else looks good and is responsive. 👏

A minor suggestion might be to make sure the background image of the mountains scales to fit the entire screen on extra-large screens (currently, there's just some empty space to the left side of it). 😉

Keep coding (and happy coding, too)! 😁

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@ApplePieGiraffe wow, thank you for your feedback! It's so cool to get some advice from the top user of this site 😀 I'll definitely fix that little issue with the background fitting extra-large screens.

Elise Rousseau• 685

@SarahHenriette

Posted about 3 years ago

Hi Bonrey !

Wow, well done for your project 😃

I did it too but I clearly did not manage to make the animations on the maps and I admit that I did not have the patience to do it either.

Well done for the features 👍

good continuation !

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@SarahHenriette thank you! I'm so glad to receive the first comment from someone 😊

Javier Romero• 40

@Romerof

Posted about 3 years ago

wow!! I like your solution, crack!

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@Romerof thank you!

Please log in to post a comment

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