Are you starting with React? I will be Building a Simple interest calculator using React Hooks. You can use this simple interest calculator for your personal project and host many calculators like this.
What are we building? ?
we are going to make very basic simple interest calculator using react hooks. Basically, that will take user input and also we going to build a form and display the result along the way. Additionally, I wanted to show off the React hooks API, which lets function components use lifecycle methods and have a state behind the scenes. The sole method for managing state in earlier iterations of React was through class components. This results in a significantly improved development experience.
Design Assets Link? ?
Download: Link
YouTube Tutorial
Shall we start? ?
Section 1 – Create-React-App
Section 2 – Add some CSS ( App.css )
Section 3 – Add Logic and state ( App .js )
Section 4 – Conclusion
Section 1
We don’t need anything complicated to make this project so we’ll use the boilerplate Create-React-App gives us. To create the project, navigate to a directory of your choice and type:
npx create-react-app simple_interest_calculator
You may access the project after create-react-app has finished executing.
cd simple_interest_calculator
To launch the project in Visual Code (or any editor of your choice):
code .
Let’s install Material UI is a library of React UI components that implements Google’s Material Design. So that we can use their components. By following this doc here I am using npm you can use either yarn too for installing this
npm install @mui/material @emotion/react @emotion/styled
Section 2 ( App.css )
The emphasis of this tutorial won’t be on styling, so feel free to add additional styling or copy this CSS into your App.css if you’d like. You may also see examples of how I used my classes on my GitHub repository.
src/App.css
.app {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #0e0e0e;
}
.container {
/* box-shadow: 0px 0px 12px rgb(255, 255, 255); */
background-color: #FAF9FA;
width: 519px;
/* height: 672px; */
border-radius: 8px;
padding: 3rem;
}
.heading_text
{
font-size: 10px;
font-weight: 400;
}
.heading_two
{
padding-top: 5px;
}
.total_amount_card
{
width: 445px;
height: 138px;
background-color: #D6FF58;
margin-top: 22px;
}
.card_text {
padding-top: 40px;
}
.total_amount_heading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: 800;
}
.total_amount_para {
text-align: center;
font-size: 12px;
padding-top: 5px;
color: #4B4B4B;
}
.input_area
{
margin-top: 40px;
}
.input_field
{
margin-top: 30px;
width: 445px;
}
#outlined-basic {
width: 410px;
}
.button_collection
{
margin-top: 61px;
margin-bottom: 1rem;
}
.btn_one {
background-color: #1F1F1F;
width: 200px;
height: 75px;
}
Section 3 ( App .js )
Let’s make our form using material UI in app.js. Here we will make all your logic here .
import './App.css';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'
function App() {
const [num1,setNum1] = useState(0);
const [num2,setNum2] = useState(0);
const [num3,setNum3] = useState(0);
const [Add,setAdd] = useState("");
const calcSum = (e) => {
e.preventDefault()
console.log(e);
if(num1===0 || num2===0 || num3===0)
{
alert("please enter a valid weight and height")
}
else
{
let Add = parseInt(num1)*parseInt(num2)*parseInt(num3)/100;
console.log(typeof(Add));
setAdd(parseInt(Add))
}
}
const handleClick = (e) => {
setAdd(0);
window.location.reload();
}
return (
<>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
></Box>
<div className="app">
<div className='container'>
<div className='heading_text'>
<h1 className='heading_one'>Simple Calculator</h1>
<p className='heading_two'>Calculate your simple interest Easily</p>
</div>
<div className='total_amount_card'>
<div className='card_text '>
<h3 className='total_amount_heading'>₹ {Add}</h3>
<p className='total_amount_para'>Total simple interest</p>
</div>
</div>
<form onSubmit={calcSum}>
<div className='input_area'>
<div className='input_field'>
<TextField type="number" value={num1 || ""} onChange={(e) => setNum1(e.target.value)} id="outlined-basic" label="₹ Principal amount" variant="outlined" />
</div>
<div className='input_field'>
<TextField type="number" value={num2 || ""} onChange={(e) => setNum2(e.target.value)} id="outlined-basic" label="Rate of interest (p.a) %" variant="outlined" />
</div>
<div className='input_field'>
<TextField type="number" value={num3 || ""} onChange={(e) => setNum3(e.target.value)} id="outlined-basic" label="Time period ( Yr )" variant="outlined" />
</div>
</div>
<div className='button_collection'>
<Stack spacing={2} direction="row">
<Button type='submit' className='btn_one' style={{backgroundColor: 'black'}} variant="contained">Calculate</Button>
<Button className='btn_one' onClick={handleClick} variant="outlined">Reset</Button>
</Stack>
</div>
</form>
</div>
</div>
</>
);
}
export default App;
Section 4 ( Conclusion )
We did it! 😀 Now you can make any calculator for your next project. It works on mobile too! I hope you like Building a Simple interest calculator using React Hooks. for such projects do visits and comment on which project should I cover next.
Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project
Happy coding!
People are also reading:
- Crypto-currency website| Source Code Free Download
- How to Build A BMI Calculator in React JS – useState Hook & Conditionals
- How To Create Sign Up Form In HTML and CSS
- Top Stunning Free Websites to Download Responsive HTML Templates 2021
- JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design
- How to make Interactive Feedback Design Using HTML CSS & JS
- 5 amazing ways to earn money online as a side option .
- finest alternative of Chinese apps for Android and iOS
- Top Best 5 Fonts Of 2020 Used By Professional Graphic Designers
- React JS Mini-Project #2 Creating Simple Sum Calculator | Absolute beginners useState Hook & Conditionals
