#36Days Old Counter
30min

Overview

Create a React component that calculates and displays how many days old a user is based on their birth date.

Requirements

  • Implement the daysSinceBirth function that takes a birth date string (YYYY-MM-DD) and returns the number of full days between that date and today. If the date is in the future, it should return 0.
  • Add logic so that the counter updates automatically whenever a new date is selected in the provided input field.
  • Ensure the counter starts at 0 when no date is selected.
  • Animate the counter from 0 to the calculated value over the duration specified by DURATION_MS.

Notes

  • Handle edge cases such as future dates (the counter should not go negative).
  • Make sure the counter updates correctly when the user changes the date multiple times.
  • Use requestAnimationFrame for the counter animation instead of setInterval or setTimeout, as it ensures smooth updates and syncs with the browser's refresh rate.

Tests

  1. renders the app title
  2. renders the counter initially at 0
  3. calculates the correct target days for a given birth date
  4. calculates days correctly using daysSinceBirth function with edge cases