Skip to content
Submitted over 4 years ago

Countdown w/ Flip Animation & Customizable Dates

Chloe Echikson•220
@cloworm
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

Hi Everyone!

I put a lot of effort into getting the flip animation right. Let me know what you think!

I also added a bonus feature that lets you customize the date you're counting down to. Just pass in an ISO 8601 Date String into the date query param to use it.

Countdown to Christmas 2021: https://countdown.cloworm.vercel.app/?date=2021-12-25T05:00:00.000Z

Countdown to 2022: https://countdown.cloworm.vercel.app/?date=2022-01-01T05:00:00.000Z

Please log in to post a comment

Log in with GitHub

Community feedback

  • Sahas saurav•745
    @SahasSaurav

    Hey, great job and really love the way you are using svg. Everything looks fabulous and responsive

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, nice job on this challenge, Chloe Echikson! 👍

    Everything looks great and responds well! 👏 The flipping animation is very nice! 🤩 It's also cool that you added two versions of this countdown challenge! 😃

    Keep coding (and happy coding, too)! 😁

    And happy holidays! 🎄

  • Grace•32,130
    @grace-snow

    Very nice work, this is great!

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