⚠️AdBlock Detected

It looks like you're using an ad-blocker!

😭Our team work realy hard to produce quality content on this website and we noticed you have ad-blocking enabled.

ziontutorial.com πŸ‘½

Tech That Matters

React JS Mini-Project Creating Simple Sum Calculator
React Js

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.

See also  How To Build A Simple Counter App In React

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

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

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


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) => {
      if(num1===0 || num2===0)
        alert("please enter a valid weight and height")

        let Add = parseInt(num1)+parseInt(num2);

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

export default App;


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;

  color: white;

  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;


That’s it congratulation you did it

See also  Parsing error: Unterminated JSX contents | React Js [ Updated Solution ]

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: