Frontend Mentor - Launch countdown timer solution

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.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

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

Links

• Solution URL on Github
• Live Site URL on Github pages

My process

Built with

• markup: Semantic HTML5
• styles: CSS3
• animation: CSS3 + JavaScript

What I learned

• CSS tricks to get a result as close as possible to the design recommendations
• Logic of a countdown timer with date and time
• CSS + JS card flip animation

Useful resources

I would not have been able to create the flip javascript animation from scratch if I haven't found this amazing project. I updated the original to fit my markups in this project, added the "days" part, and it works like a charm!

• countdownFlipClock on Youtube
• countdownFlipClock on Codepen

Author

• Catevika's Portfolio in English
• Catevika's Portfolio in French
• Frontend Mentor - @Catevika
• Twitter - @dominique_bello

Acknowledgments

Thank you to Frontendmentor for this excellent intermediate project. I feel like I am going to do more of them!

Do not hesitate to visit their site!