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.

Overview
My process
Author
Acknowledgments

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

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
Mobile-first workflow
React - JS library
Tailwind CSS - For styles

What I learned

This code helped me to remove Arrow on Input type Number.

  @layer base {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }
  }

Here I leaned to calculate the difference of time entered by user & current time.

  const calculateTimeDifference = () => {
    const currentDate = new Date();
    const inputDateTime = new Date(`${year}-${month}-${day}`);

    const timeDifference = currentDate.getTime() - inputDateTime.getTime();
    const differenceInYears = Math.floor(
      timeDifference / (1000 * 60 * 60 * 24 * 365)
    );
    const remainingMonths = Math.floor(
      (timeDifference % (1000 * 60 * 60 * 24 * 365)) /
        (1000 * 60 * 60 * 24 * 30.5)
    );
    const remainingDays = Math.floor(
      ((timeDifference % (1000 * 60 * 60 * 24 * 365)) %
        (1000 * 60 * 60 * 24 * 30.5)) /
        (1000 * 60 * 60 * 24)
    );

    setDateDifference({
      year: differenceInYears,
      month: remainingMonths,
      day: remainingDays,
    });
  };

Continued development

I learned more about Tailwind css and how to use custome properties of it as wwell.In future I'll explore more side of it for smooth design and development.

Useful resources

stackoverflow - This helped me to remove Arrow on Input type Number.
geeksforgeeks - This is an amazing post helped me to validate user entered date.

Author

Website - Alok Suman
Frontend Mentor - @Alokray007

Acknowledgments

I took help from ChatGPT and stackoverflow to get some problems solved related to date calculation.

Alokray007/Age-Calculator-App-FM