This tutorial guides absolute beginners through the process of building an Age Calculator App in React. The app will determine your age based on the input of your date of birth. Throughout the project, we will cover various concepts, making it a valuable learning experience. By the end, you'll have gained insights into a wide range of features and concepts related to React development. Let's delve into the step-by-step process of building and understanding this application.
However, i think there are many beginners who do not know Age Calculator App in React. Hopefully this article will help you out.
If you want you can watch the live demo with this link.
Don't miss this article : https://bit.ly/3tFJJIB
if you are a beginner do follow my steps what I am doing to Age Calculator App in React.
Download the source code: https://bit.ly/3tFJJIB
Demo:Link
Certainly! Here is the list of functionalities we will build in the Age Calculator App:
- Input Field: Create a text input field for users to enter their date of birth.
- Calculate Age: Implement the logic to calculate the user's age based on the provided date of birth.
- Display Age: Show the calculated age on the screen after the user enters their date of birth.
- Error Handling: Implement validation and display appropriate error messages for invalid date inputs.
- Age in Different Units: Provide options to display the age in different units, such as years, months, days, etc.
- Clear Button: Add a button to clear the input field and reset the displayed age.
- Responsive Design: Ensure the app is visually appealing and functions well on various screen sizes and devices.
Throughout the tutorial, we will cover each of these functionalities to create a fully functional Age Calculator App using React.
App.js
import React, { useState } from 'react';
import './AgeCalculator.css'
const AgeCalculator = () => {
const [birthdate, setBirthdate] = useState('');
const [age, setAge] = useState(0);
const calculateAge = () => {
const today = new Date();
const birthdateDate = new Date(birthdate);
let age = today.getFullYear() - birthdateDate.getFullYear();
const monthDiff = today.getMonth() - birthdateDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthdateDate.getDate())) {
age--;
}
setAge(age);
};
const resetCalculator = () => {
setBirthdate('');
setAge(0);
};
return (
<>
<div className='Container'>
<h2 className='heading container_title'>Age Calculator</h2>
<p className=' para container_title'>The Age Calculator can determine the age or interval between two dates. The calculated age will be displayed in years,</p>
<div className='Container_middle'>
<div className='right'>
<h4>Date of Birth</h4>
<input className='date' type="date" value={birthdate} onChange={e => setBirthdate(e.target.value)} />
<div className='button_div'>
<button className='button-65' onClick={calculateAge}>Calculate Age</button>
<button className="button-65" onClick={resetCalculator}>
Reset
</button>
</div>
</div>
<div className='left'>
<div className='Container_middle_para'>
<h1>Your Age is</h1>
</div>
<h1 className='age_heading'>{age > 0 ? ` ${age}` : ''}</h1>
</div>
</div>
</div>
</>
);
};
export default AgeCalculator;
App.css
.Container_middle
{
display: flex;
justify-content: space-between;
}
.left
{
width: 500px;
background-color:#EEF1F6;
}
.Container_middle_para
{
display: flex;
align-items: center;
justify-content: center;
}
If you are facing any Problem Full source code is available here
with the working output Link
Conclusion
I hope you enjoyed this little tutorial. Let me know over on
Happy Coding! 😇
Top comments (0)