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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • 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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/my-first-sass-project-a-flip-countdown-clock-lGGQKBpRt
• Live Site URL: https://ameyadeokule.github.io/countdown-clock/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• SASS
• GASP - JS Animation Library

What I learned

Continued development

Try doing the animation without using the GASP library. Conveting the project to Svelte.

Useful resources

• The Beginner’s Guide to the GreenSock Animation Platform - This helped me for understand the types of animation avalable. I learned the basics of timeline animation and how to use it.

• GSAP Animation Tutorial | Create Awesome Animations With Javascript by Dev Ed - This tutorial taught me how to use the library and integrate it into the workflow. Also I made smaller animation shown in the tutorial to prepare me to complete this flip clock challenge.

Author

• Name - [Ameya Deokule]
• Frontend Mentor - @ameyadeokule

Acknowledgments

I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.