/age-calculator-app

This is a solution to the Age calculator app challenge on Frontend Mentor

Primary LanguageTypeScript

Frontend Mentor - Age calculator app solution

This is a solution to the Age calculator app challenge on Frontend Mentor.

Table of contents

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
    • 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
  • Bonus: See the age numbers animate to their final number when the form is submitted

Screenshot

design

Links

My process

Built with

  • Vite
  • Typescript
  • Eslint for linting
  • Prettier for formatting
  • Mobile-first workflow
  • React - JS library
  • Chakra UI - Modular and accessible component library
  • react-countup - Numbers animation

What I learned

  • The way to deal with dates in js.
  • Below is a function that is calculating the age: with year, month and day passed as params.
import { AgeType } from "../types/AgeType";

export function calculateAge(
  year: number,
  month: number,
  day: number
): AgeType {
  const today = new Date();
  const birthDate = new Date(year, month - 1, day);

  let years = today.getFullYear() - birthDate.getFullYear();
  let months = today.getMonth() - birthDate.getMonth();
  let days = today.getDate() - birthDate.getDate();

  if (months < 0 || (months === 0 && days < 0)) {
    years--;
    months += 12;
  }

  if (days < 0) {
    const prevMonthLastDay = new Date(
      today.getFullYear(),
      today.getMonth(),
      0
    ).getDate();
    days += prevMonthLastDay;
    months--;
  }

  return {
    years,
    months,
    days,
  };
}

Author