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.
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.
Prerequisite:
An Integrated Development Environment (IDE) of your choice (In this tutorial, we will use Visual Studio Code. You can download it from their official website).
npm (Node Package Manager) installed on your system.
create-react-app package installed globally.
Basic Setup:
Open PowerShell or the terminal in your IDE.
- To start a new project using create-react-app, enter the following command:
npx create-react-app myapp
You can replace "myapp" with any desired name for your project, such as "my-first-react-website."
- Navigate to the newly created project folder using the following command:
cd myappReplace "myapp" with the name you chose for your project.
Here is the folder structure for our application after setting up the basic React project.
App.js Code
import './App.css';
import AgeCalculator from './componets/AgeCalculator';
function App() {
return (
<div className="App">
<AgeCalculator/>
</div>
);
}
export default App;
here's the CSS code for styling the "App" class in your React application:
/* app.css */
.App {
background-color: #F4F9FF;
display: flex;
justify-content: center;
/* width: 1530px; */
height: 500px;
padding: 5rem;
}
In this code, we have applied the following styles to the ".App" class:
background-color: Sets the background color of the element to a light blue (#F4F9FF).
display: Makes the element a flex container so that its children can be aligned using flex properties.
justify-content: Centers the child elements horizontally along the main axis (in this case, the center of the screen).
height: Sets the height of the element to 500 pixels.
padding: Adds 5 rem (root em) of padding on all sides of the element.
You can place this CSS code in a separate file named "app.css" within your project's "src" folder. Then, make sure to import this CSS file into your main React component (e.g., "App.js") to apply these styles to the ".App" class.
let's create the component folder structure with "AgeCalculator.js" and "AgeCalculator.css" files. It should look like the following:
Follow these steps to create the files and folders:
Inside the "src" folder, create a new folder named "components" if it doesn't already exist.
Inside the "components" folder, create a new folder named "AgeCalculator."
Inside the "AgeCalculator" folder, create two files: "AgeCalculator.js" and "AgeCalculator.css."
After creating the folder structure and files, you can start building the Age Calculator component inside "AgeCalculator.js" and apply styles using "AgeCalculator.css." This modular approach helps organize your project and makes it easier to manage components and their associated styles.
AgeCalculator.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;
AgeCalculator.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;
}
Now important Css part where all our CSS styling I mean most of the styling part I have to write it here for our application in Index.css for the styling part.
Index.css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');
html,
body {
width: 100%;
height: 100%;
background-color: #e4ecff;
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.age_heading{
color: #5E5AF9;
font-family: Inter;
font-size: 5rem;
font-style: normal;
font-weight: 900;
line-height: normal;
display: flex;
justify-content: center;
}
h2{
color: #000;
font-family: Inter;
font-size: 35px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
h3{
color: #000;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 5rem;
}
h4{
color: #000;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.right
{
width: 500px;
}
.para
{
color: #505050;
font-family: Inter;
font-size: 19px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.button_div
{
margin-top: 2rem;
}
.container_title
{
display: flex;
align-items: center;
justify-content: center;
}
input[type="date"]{
background: #F4F9FF;
border: 2px solid #DEDEDE;
padding: 20px;
font-family: "Roboto Mono",monospace;
color: #000000;
font-size: 18px;
width: 230px;
/* border: none; */
outline: none;
border-radius: 5px;
}
::-webkit-calendar-picker-indicator{
/* background-color: #ffffff; */
padding: 5px;
cursor: pointer;
border-radius: 3px;
}
/* CSS */
.button-65 {
appearance: none;
backface-visibility: hidden;
background-color: #2f80ed;
border-radius: 10px;
border-style: none;
box-shadow: none;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 500;
height: 50px;
letter-spacing: normal;
line-height: 1.5;
outline: none;
overflow: hidden;
padding: 14px 30px;
position: relative;
text-align: center;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
}
.button-65:hover {
background-color: #1366d6;
box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
opacity: 1;
transform: translateY(0);
transition-duration: .35s;
}
.button-65:hover:after {
opacity: .5;
}
.button-65:active {
box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
transform: translateY(2px);
transition-duration: .35s;
}
.button-65:active:after {
opacity: 1;
}
@media (min-width: 768px) {
.button-65 {
padding: 14px 22px;
width: 176px;
}
}
Now the last part which we are going to write which in the main part of our application which is index.js part .
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
In conclusion,
I hope you enjoyed this tutorial on building the Age Calculator App in React. If you have any suggestions for other applications or projects, feel free to leave your comments and opinions. I trust that you have successfully created the Age Calculator App and gained valuable insights from this project.
Stay tuned, as in the future, we will explore more exciting beginner-level projects together. Happy coding and keep learning!
If there is any difficulty, of course you can comment.
You can visit my blog for more tutorials like this.
https://ziontutorial.com/
Top comments (0)