/Launch-Countdown-Timer

Launch-Countdown-Timer

Primary LanguageCSSMIT LicenseMIT

Frontend Mentor - Launch countdown timer

Design preview for the Launch countdown timer coding challenge

Welcome! 👋

Thanks for checking out this front-end coding challenge.

To do this challenge, you need a good understanding of HTML, CSS and JavaScript.

The challenge

The challenge is to build out this countdown timer and get it looking as close to the design as possible.

The 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 8 days)
  • Bonus: When a number changes, make the card flip from the middle

My Solution

Desktop screenshot Launch countdown timer Mobile screenshot Launch countdown timer

Link

Create with

HTML5 markup CSS custom properties Saas Flexbox Javascript

What I learned

I learnt how to use saas effectively that helps to organize the styling in a readable format and also, I learnt the @mixing and @include which allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

I also learnt an effective way of using javascript function and the conditional statement. Here is the code that makes the counter work:

if (newNumber === startNumber) return // The golden code

What I can do differently

If I should go back to do this project again, I will learn and implement the use of @mixing and @include for reusable styling and animation.

Happy Coding! 🚀