Age Calculator App

This age calculator app was built using HTML, CSS, and vanilla JS. The design for this app was provided by Frontend Mentor).

Overview

Key Functionality

For this Frontend Mentor challenge, the goal was to implement the following functionality:

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
  • The date is invalid e.g. 31/04/1991 (there are 30 days in April)
• 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

Screenshots - Desktop

Screenshots - Mobile

Links

• Live Site URL: Website

My process

Built with:

• Flexbox
• CSS Grid

What I learned

This was a great opportunity to review HTML and CSS as well as practice DOM manipulation. I also wanted to get into the habit of documenting my code during the project and this enabled me to work on that skill as well as organising my code more neatly. Finally, I learned that the JavaScript Date() constructor adjusts the date to the nearest valid date when I provide invalid date strings. This led me to explore the Moment JS library and to use it for birth date validation.

Continued development

I would improve this app further in the future by incorporating additional validation.

Useful resources

• The Complete JavaScript Course - I learned basic DOM manipulation and beginner JavaScript through this course and have completed the first 7 sections of it so far.

Author

• Website - Rachana Hegde
• Twitter - @Rachana__H
• Frontend Mentor - @rachanahegde