Frontend Mentor - Age calculator app solution

This is a solution to the Age calculator app 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
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View an age in years, months, and days after submitting a valid date through the form
• Receive validation errors if:
  • Any field is empty when the form is submitted
  • The day number is not between 1-31
  • The month number is not between 1-12
  • The year is in the future
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: See the age numbers animate to their final number when the form is submitted

Screenshot

Links

• Solution URL: github.com/xyugen/FM-age-calculator-app
• Live Site URL: xyugen.github.io/FM-age-calculator-app/

My process

Built with

• Semantic HTML5 markup
• CSS (SASS)
• TypeScript
• Google Fonts API
• Flexbox

What I learned

I managed to learn and use SASS and TypeScript for the first time and I've immediately loved it.

I also learned from this project:

1. Input Validation: I learned how to validate user inputs for the day, month, and year fields.
2. Date Calculations: It took a some time but I learned to calculate the age using the provided birth date.
3. Animation: The result is presented with animated counting of years, months, and days. It was achieved by using requestAnimationFrame and updating the displayed numbers over time.

Useful resources

• How to Calculate Age Manually - This helped me for implementing the date calculations logic.

Author

• Frontend Mentor - @xyugen
• Twitter - @_zygen