Age Calculator Using React-JS

// App.jsx

import { useState } from "react";
import { AgeCalculator }
	from "./components/AgeCalculator"
import { AgeResult }
	from "./components/AgeResult"
import {
	differenceInDays,
	differenceInHours,
	differenceInMinutes,
	differenceInMonths,
	differenceInSeconds,
	differenceInWeeks,
	differenceInYears
}
	from "date-fns";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
	const [age, setAge] = useState(null);

	const calculateAge = (date) => {
		const today = new Date();
		const dateObject = new Date(date);
		const ageYears = differenceInYears(today, dateObject);
		const ageMonths = differenceInMonths(today, dateObject);
		const ageDays = differenceInDays(today, dateObject);
		const ageWeeks = differenceInWeeks(today, dateObject);
		const ageHours = differenceInHours(today, dateObject);
		const ageMinutes = differenceInMinutes(today, dateObject);
		const ageSeconds = differenceInSeconds(today, dateObject);
		setAge({
			years: ageYears,
			months: ageMonths,
			days: ageDays,
			weeks: ageWeeks,
			hours: ageHours,
			minutes: ageMinutes,
			seconds: ageSeconds,
		});
	};

	return (
		<center className="container my-3">
			<h1>Age Calculator</h1>
			<strong>This free age calculator
				computes age in terms of years,
				months, weeks, days, hours,
				minutes, and seconds,
				given a date of birth.
			</strong>
			<div className="my-3">
				<AgeCalculator calculateAge={calculateAge} />
			</div>
			{age && <AgeResult age={age} />}
		</center>
	)
}

export default App;

// AgeCalculator.jsx

import { useState } from "react"
import PropTypes from 'prop-types';

export const AgeCalculator = ({ calculateAge }) => {
	const [date, setDate] = useState('');
	console.log(date);

	const handleChangeDate = (val) => {
		setDate(val.target.value);
	};
	const handleSubmit = (val) => {
		val.preventDefault();
		calculateAge(date);
	};

	return (
		<form onSubmit={handleSubmit}>
			<div className="col-auto">
				<input value={date} type="date"
					className="mb-3"
					onChange={handleChangeDate} />
			</div>
			<div className="col-auto">
				<button disabled={!date}
					type="submit"
					className="btn btn-primary mb-3">
					calculate Age
				</button>
			</div>
		</form>
	)
};
AgeCalculator.propTypes = {
	calculateAge: PropTypes.func.isRequired,
}

// AgeResult.jsx

import PropTypes from 'prop-types';
export const AgeResult = ({ age }) => {
	return <>
		<h5>You are age is {age.years} Years</h5>
		<h5>Or {age.months} Months</h5>
		<h5>Or {age.weeks} Weeks</h5>
		<h5>Or {age.days} Days</h5>
		<h5>Or {age.hours} Hours</h5>
		<h5>Or {age.minutes} Minutes</h5>
		<h5>Or {age.seconds} Seconds</h5>
	</>
};

AgeResult.prototypes = {
	age: PropTypes.shape({
		years: PropTypes.number.isRequired,
		months: PropTypes.number.isRequired,
		weeks: PropTypes.number.isRequired,
		days: PropTypes.number.isRequired,
		hours: PropTypes.number.isRequired,
		minutes: PropTypes.number.isRequired,
		seconds: PropTypes.number.isRequired,
	}),
};