Blog

You are currently viewing React JS Mini-Project Creating Simple Sum Calculator | Absolute beginners useState Hook
React JS Mini-Project Creating Simple Sum Calculator

React JS Mini-Project Creating Simple Sum Calculator | Absolute beginners useState Hook

React JS Mini-Project Creating Simple Sum Calculator
Build A Sum Calculator in React JS – useState Hook & Conditionals.

In this half of the tutorial, we will focus on the fronted part of the application. The code for this React JS Mini-Project Creating Simple Sum Calculator project is on my git Github if you want that source code just comment in the comment box . we make these projects because I decided to take a deep dive into reacting js hooks part, Gain a better understanding of its use case and figure out how to make it play nice with these technologies and I like to play with it so I decided to make this simple project with react which is Creating Simple Sum Calculator using React js | Mini React Js Project. in my point of view if you want to learn something then you have to make something so that you have a better understanding of that technologies and clear understanding of that technologies. -after that write about it and teach about it to some so that other people can gain knowledge and they figure out and do some suggestions for you.

We are going to build a simple React JS Mini-Project Creating Simple Sum Calculator | Mini project. We will be using Hooks’ concept in this project like how to use state and conditional statements together so that you can figure out the concept and better understanding this jargon.

Lets get to work !

we are going to need to install a our application with these simple commands . and then start our application building. create a new folder and run the following commands in your terminal:

npx create-react-app  simple_sum_calculator

This is our application Folder structure after making this lets move to another part of our application building part.

Now place the following code on your index.html file.

<!DOCTYPE html>
<html>
    <head>
        <title>BMI Calculator</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Let’s jump into the app.js part where all the logic of our application

App.js

let’s jump into our App.js where all the magic happens and we discuss our application logic .

import { useState } from 'react';
import './App.css';

function App() {
  
  const [num1, setNum1] = useState()
  const [num2, setNum2] = useState()
  const [Add, setAdd] = useState('')

    const calcSum = (event) => {
      event.preventDefault() 
      console.log(event);
      if(num1===0 || num2===0)
      {
        alert("please enter a valid weight and height")
      }

      else
      {
        let Add = parseInt(num1)+parseInt(num2);
        console.log(typeof(Add));
        setAdd(parseInt(Add))
      }
    }

  return (
  <div className='app'>
    <div className='container'>
      <h2 className='center'>Sum Calculator</h2>
      <form onSubmit={calcSum}>
        <div>
        <label>Number 1</label>
        <input type="text" placeholder='Enter Number1 value' value={num1} onChange={(e) => setNum1(e.target.value)} />
        </div>
        <div>
        <label>Number 2</label>
            <input type="text" placeholder='Enter Number2 value' value={num2} onChange={(e) => setNum2(e.target.value)} />
        </div>
        <div>
            <button className='btn' type='submit'>Submit</button>
        </div>
      </form>
      <div className='center'>
          <h3>Your Sum is: {Add}</h3>
      </div>
    </div>
  </div>
  );
}

export default App;

App.css

let’s make this form beautiful using CSS. Just copy the below code and make your style work. So this is the Simple Sum Calculator where we can implement our CSS to make this application interactive.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #E3EFEB;
}
.container {
  box-shadow: 0px 0px 12px rgb(255, 255, 255);
  background-color: #0F1217;
  border-radius: 8px;
  padding: 3rem;
  
}

h2,h3
{
  color: white;
}

label
{
  color: white;
  font-size: 13px;
}
input {
  width: 100%;
  font-size: 1rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 6px;
  outline: none;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;   
  background-color: rgb(241, 241, 241);
}

.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */
.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}
.center {
  text-align: center;
  margin: 24px 0;
}
p {
  margin: 10px 0;
}
.img-container {
  text-align: center;
}
.img-container img {
  height: 200px;
}

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used use state hook to manage the state of the application . By making React JS Mini-Project Creating Simple Sum Calculator project you learn new things.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

Tags: , , ,

Leave a Reply