Steps to Create Scientific Calculator in React ❤

Step 1: Create a new React JS project using the following command

npx create-react-app <<Project_Name>>

Step 2: Change to the project directory

cd  <<Project_Name>>

Step 3: Install some npm packages required for this project using the following command:

npm install mathjs

Project Structure:

Project Structure

package.json:

"dependencies": {
   "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "mathjs": "^11.11.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Write the following code in respective files

App.js : In our React app App.js is the part that takes care of both the user interface and the logic of the calculator. It handles input and output manages button clicks and performs all kinds of operations whether simple or advanced.
index.js : It serves as the starting point of our React application. Its role is to render the Calculator component, onto the HTML element, which kickstarts the user interface of our application.

Javascript

// FileName: App.js 
  
import React, { useState } from "react"; 
import "./App.css"; 
import * as math from "mathjs"; 
  
function App() { 
    const [expression, setExpression] = useState(""); 
    const [screenVal, setScreenVal] = useState(""); 
    const [customVariables, setCustomVariables] = useState({}); 
    // Default mode is "rad" 
    const [mode, setMode] = useState("rad"); 
  
    function handleChange(e) { 
        setExpression(e.target.value); 
    } 
  
    function handleClick(input) { 
        setExpression((prevExpression) => prevExpression + input); 
    } 
  
    function calculate() { 
        try { 
            const allVariables = { 
                ...customVariables, 
                pi: Math.PI, 
                e: Math.E, 
                // Add factorial function 
                fact: math.factorial,  
                sin: mode === "rad" ? Math.sin : math.sin, 
                cos: mode === "rad" ? Math.cos : math.cos, 
                tan: mode === "rad" ? Math.tan : math.tan, 
                asin: mode === "rad" ? Math.asin : math.asin, 
                acos: mode === "rad" ? Math.acos : math.acos, 
                atan: mode === "rad" ? Math.atan : math.atan, 
            }; 
  
            const result = math.evaluate(expression, allVariables); 
            if (typeof result === "number" && !isNaN(result)) { 
                setScreenVal(Number(result).toFixed(4)); 
            } else { 
                setScreenVal("Error: Invalid expression"); 
            } 
        } catch (error) { 
            setScreenVal("Error: Invalid expression"); 
        } 
    } 
  
    function clearScreen() { 
        setExpression(""); 
        setScreenVal(""); 
    } 
  
    function backspace() { 
        const newExpression = expression.slice(0, -1); 
        setExpression(newExpression); 
    } 
  
    function toggleMode() { 
        // Toggle between "rad" and "deg" modes 
        setMode(mode === "rad" ? "deg" : "rad"); 
    } 
  
    return ( 
        <> 
            <div className="App"> 
                <div className="calc-body"> 
                    <h1>Scientific Calculator</h1> 
                    <div className="input-section"> 
                        <input 
                            className="screen"
                            type="text"
                            value={expression} 
                            onChange={handleChange} 
                        /> 
                        <div className="output">Output: {screenVal}</div> 
                    </div> 
                    <div className="button-section"> 
                        <div className="numeric-pad"> 
                            {["1", "2", "3", "4", "5", 
                                "6", "7", "8", "9", "0"].map( 
                                    (input) => ( 
                                        <button key={input} 
                                            onClick={() => 
                                                handleClick(input)}> 
                                            {input} 
                                        </button> 
                                    ) 
                                )} 
                            <button onClick={() => 
                                handleClick(".")}>,</button> 
                        </div> 
                        <div className="operators"> 
                            {[ 
                                "+", 
                                "-", 
                                "*", 
                                "/", 
                                "^", 
                                "sqrt(", 
                                "sin(", 
                                "cos(", 
                                "tan(", 
                                "cbrt(", 
                                "asin(", 
                                "acos(", 
                                "atan(", 
                                // Add open parenthesis 
                                "(",  
                                // Add close parenthesis 
                                ")",  
                            ].map((input) => ( 
                                <button key={input} 
                                    onClick={() => 
                                        handleClick(input)}> 
                                    {input} 
                                </button> 
                            ))} 
  
                            <button onClick={() => 
                                handleClick("pi")}>Pi</button> 
                            <button onClick={() => 
                                handleClick("fact(")}>Factorial</button> 
                        </div> 
                        <div className="control-buttons"> 
                            <button className="clear-button"
                                onClick={clearScreen}> 
                                C 
                            </button> 
                            <button className="equals-button"
                                onClick={calculate}> 
                                = 
                            </button> 
                            <button className="backspace-button"
                                onClick={backspace}> 
                                del 
                            </button> 
                        </div> 
                    </div> 
                </div> 
                <div className="variables"></div> 
            </div> 
        </> 
    ); 
} 
  
export default App;

CSS

/* FileName: App.css */
  
.App { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-left: 5%; 
    margin-top: 50px; 
} 
  
h1 { 
    color: #1fb334; 
    margin-bottom: 30px; 
    /* Adjusted margin */
} 
  
.calc-body { 
    background-color: #c5f5b7; 
    border: 1px solid #141414; 
    border-radius: 8px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    width: 60vw; 
    /* Adjusted container width */
    padding: 2vw; 
    /* Adjusted padding */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
  
.input-section { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
  
.screen { 
    width: 100%; 
    padding: 10px; 
    font-size: 18px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    margin-bottom: 10px; 
} 
  
.output { 
    margin-top: 5%; 
    margin-bottom: 5%; 
    color: green; 
    font-weight: 900; 
    font-size: 2vw; 
} 
  
.button-section { 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 
  
.numeric-pad { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; 
} 
  
.operators { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; 
} 
  
.control-buttons { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
  
button { 
    padding: 5px 10px; 
    font-size: 16px; 
    font-weight: 600; 
    background-color: #b8bcb9; 
    color: #000000; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
} 
  
button:hover { 
    background-color: #1fb334; 
} 
  
.equals-button { 
    background-color: #ff5733; 
    /* Different color for equals button */
    margin: 5px; 
} 
  
.clear-button { 
    background-color: #ff5733; 
    /* Different color for clear button */
    margin: 5px; 
} 
  
.backspace-button { 
    background-color: #1f73b3; 
    /* Different color for backspace button */
    margin: 5px; 
} 
  
.variables { 
    margin-bottom: 5%; 
    color: #fff; 
    background-color: #272727; 
    flex-basis: 10%; 
} 
  
.variables h2 { 
    color: #fff; 
} 
  
.fields input { 
    background-color: #e8eef5; 
    border: 1px solid rgb(231, 228, 228); 
    width: 5vw; 
}

Steps to run the project:

Step 1: Type the following command in terminal.

npm start

Step 2: Open web-browser and type the following URL

http://localhost:3000/

Output:

Output

Steps to Create Scientific Calculator in React

Javascript

CSS

Scientific Calculator using React

Contact Us

Steps to Create Scientific Calculator in React

Javascript

CSS

Scientific Calculator using React

Similar Reads

Contact Us