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.

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

• https://ibb.co/pjDLf9y
• https://ibb.co/BKMq431

Links

• https://emquiroga.github.io/launch-countdown-timer-main/

My process

• Built the start date form.
• Stylize background for a better approach
• Built the countdown functions (research and code)
• Layout and design
• Animation research
• Latest layout over animations

Built with

• Semantic HTML5 markup
• CSS/Sass
• Flexbox
• JavaScript
• Mobile-first workflow

What I learned

• Select today's date as default via JS.
• Working with Date() objects
• Math functions for distance between the form and the countdown
• Responsive backgrounds with media queries
• Stylize svg tags
• CSS filters
• Animations via JavaScript

Continued development

I would like to go deeper JavaScript and do more useful stuff

Author

Emiliano Quiroga