Submitted about 2 years ago

Launch countdown timer using flexbox

shikoto• 1,010

@shikot0

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Launch countdown timer

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

This project was fun as I have created a countdown timer in the past, however I couldn't create the folding animation but everything else works fine.

I made the countdown timer start 14 days away by taking the current date when you load the page then adding 14 days to it and the countdown timer is created by finding the difference between the two dates.

Community feedback

Elaine• 11,400

@elaineleung

Posted about 2 years ago

Hi Shikoto, great job here! I can't seem to see the font family used in the head tags or in the CSS sheet, so in case you didn't add it in, do try to go to Google Fonts to grab the link and paste it in!

About the flipping animation, I think you can check out the solution by @crsimpson5, and the good thing is he also included some links and references that might help you out: https://www.frontendmentor.io/solutions/responsive-countdown-timer-made-using-vanilla-js-sass-3wnMC395Zn

Hope some of this can help you!

Marked as helpful

shikoto• 1,010

@shikot0

Posted about 2 years ago

@elaineleung Thanks for the feedback.

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