Aug
19
ReactJS Age Calculator React Hooks | Source Code
ReactJS Age Calculator App ( React + Bootstrap )
App.js
import React from “react”;
import Calculator from “./Components/Calculator”;
function App() {
return (
<div className=“container”>
<Calculator />
</div>
);
}
export default App;
Calculator.js
import React, { useState } from “react”;
import Results from “./Results”;
import “./Components.css”;
function Calculator() {
const [data, setData] = useState({
date: “”,
birthday: “”,
showResults: false,
});
const CalculateAge = () => {
setData({ birthday: data.date, showResults: true });
};
const changeHandler = (e) => {
setData({ date: e.target.value });
};
return (
<div className=“container”>
<div align=“center” className=“Calculator col-lg-4 col-md-4”>
<div className=“card”>
<div className=“card-header bg-info”>Age Calculator</div>
<div className=“card-body”>
<h6>Select Your Birthday</h6>
<div className=“d-grid col-10”>
<input
type=“date”
className=“textfield”
onChange={changeHandler}
/>
</div>
<br />
<div className=“d-grid “>
<button
type=“button”
className=“btn btn-primary”
onClick={CalculateAge}
>
Calculate
</button>
</div>
<div align=“left”>
{data.showResults ? <Results date={data.birthday} /> : <div />}
</div>
</div>
</div>
</div>
</div>
);
}
export default Calculator;
Results.js
import React from “react”;
import “./Components.css”;
function Results({ date }) {
let today = new Date().getTime();
let birthdate = new Date(date).getTime();
let d = Math.abs(today – birthdate);
let days = Math.floor(d / (1000 * 60 * 60 * 24));
let AllDays = Math.floor(d / (1000 * 60 * 60 * 24));
let AllMonths = Math.floor(days / 31);
let AllWeeks = Math.floor(days / 7);
let hours = Math.abs(days * 24);
let minutes = Math.floor(days * 24 * 60);
let seconds = Math.floor(days * 60 * 60 * 24);
let years = Math.floor(days / 365);
days -= years * 365;
let months = Math.floor(days / 31);
days -= months * 31;
if (today < birthdate) {
alert(“You selected future Date as your birthday”);
}
return (
<div className=“Stats border”>
<div className=“card”>
<div className=“card-body”>
<div align=“center”>
Age in Years:
<br />
{years} Years, {months} Months, {days} Days
</div>
<hr />
<div align=“center”>
Age in Months:
<br />
{AllMonths} Months, {days} Days
</div>
<hr />
<div align=“center”>
Age in Weeks: {AllWeeks} Weeks, {days} Days
</div>
<hr />
<div align=“center”>Age in Days: {AllDays} Days</div>
<div align=“center”>Age in Hours: {hours} </div>
<div align=“center”>Age in Minutes: {minutes} </div>
<div align=“center”>Age in Seconds: {seconds} </div>
</div>
</div>
</div>
);
}
export default Results;
Components.css
.container {
position: relative;
}
.Calculator {
padding-top: 20px;
margin-top: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
}
.Input {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.Stats {
margin-top: 30px;
border-radius: 10px;
}
.Stats h3 {
color: blueviolet;
}
.Stats h6 {
padding-left: 10px;
}
.card {
border-radius: 10px;
}
.card-header {
border-radius: 10px;
}
.btn {
width: 75%;
}
.textfield {
width: 100%;
}