How to Make a Calculator with React JS

A calculator is a simple but useful tool that can be used to perform mathematical operations. In this post, we will show you how to make a calculator with React JS.

Prerequisites

To follow this tutorial, you will need the following:

• A basic understanding of React JS

• A text editor or IDE

• A Node.js development environment

Getting Started

First, we need to create a new React project. We can do this by running the following command in our terminal:

1
2npx create-react-app calculator
3
4
5

1calculator

Adding the Calculator Components

Now, we need to add the components for our calculator. We can do this by creating a new file called

1App.js

1src

1JavaScript

1import React, { useState } from "react";
2
3const App = () => {
4  const [number1, setNumber1] = useState("");
5  const [number2, setNumber2] = useState("");
6  const [operator, setOperator] = useState("");
7  const [result, setResult] = useState("");
8
9  const handleNumber1Change = (e) => {
10    setNumber1(e.target.value);
11  };
12
13  const handleNumber2Change = (e) => {
14    setNumber2(e.target.value);
15  };
16
17  const handleOperatorChange = (e) => {
18    setOperator(e.target.value);
19  };
20
21  const handleCalculate = () => {
22    const calculation = eval(`${number1} ${operator} ${number2}`);
23    setResult(calculation);
24  };
25
26  return (
27    <div>
28      <input
29        type="text"
30        placeholder="Number 1"
31        value={number1}
32        onChange={handleNumber1Change}
33      />
34      <select value={operator} onChange={handleOperatorChange}>
35        <option value="+">+</option>
36        <option value="-">-</option>
37        <option value="*">*</option>
38        <option value="/">/</option>
39      </select>
40      <input
41        type="text"
42        placeholder="Number 2"
43        value={number2}
44        onChange={handleNumber2Change}
45      />
46      <button onClick={handleCalculate}>Calculate</button>
47      <h1>{result}</h1>
48    </div>
49  );
50};
51
52export default App;
53

Adding CSS

Now, we need to add some CSS to style our calculator. We can do this by creating a new file called

1App.css

1src

1CSSbody {
2  font-family: sans-serif;
3  margin: 0;
4  padding: 0;
5}
6
7.container {
8  width: 200px;
9  margin: 0 auto;
10}
11
12input {
13  width: 100%;
14  border: 1px solid #ccc;
15  padding: 10px;
16  margin-bottom: 10px;
17}
18
19button {
20  background-color: #000;
21  color: #fff;
22  font-size: 16px;
23  padding: 10px 20px;
24  border-radius: 5px;
25  cursor: pointer;
26}
27
28h1 {
29  font-size: 24px;
30  margin-bottom: 10px;
31}

[Image of a calculator with React JS]

Running the App

Now that we have added all of the necessary code, we can run our app by running the following command in our terminal:

1
2
3npm start
4
5
6

1localhost:3000