react Archives - ziontutorial.com 👽

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:

Tech That Matters

Tag: react

Building a Simple interest calculator using React Hooks