REACT CALCULATOR

 import React, { useState } from 'react';

export default function Calculator() {

  const [display, setDisplay] = useState('0');

  const [previousValue, setPreviousValue] = useState(null);

  const [operation, setOperation] = useState(null);

  const [waitingForNewValue, setWaitingForNewValue] = useState(false);

  const inputNumber = (num) => {

    if (waitingForNewValue) {

      setDisplay(String(num));

      setWaitingForNewValue(false);

    } else {

      setDisplay(display === '0' ? String(num) : display + num);

    }

  };

  const inputOperator = (nextOperator) => {

    const inputValue = parseFloat(display);

    if (previousValue === null) {

      setPreviousValue(inputValue);

    } else if (operation) {

      const newValue = calculate(previousValue, inputValue, operation);

      setPreviousValue(newValue);

      setDisplay(String(newValue));

    }

    setOperation(nextOperator);

    setWaitingForNewValue(true);

  };

  const calculate = (firstValue, secondValue, operation) => {

    switch (operation) {

      case '+':

        return firstValue + secondValue;

      case '-':

        return firstValue - secondValue;

      case '*':

        return firstValue * secondValue;

      case '/':

        return secondValue !== 0 ? firstValue / secondValue : 'Error';

      default:

        return secondValue;

    }

  };

  const performCalculation = () => {

    if (previousValue !== null && operation) {

      const newValue = calculate(previousValue, parseFloat(display), operation);

      setDisplay(String(newValue));

      setPreviousValue(null);

      setOperation(null);

      setWaitingForNewValue(true);

    }

  };

  const clear = () => {

    setDisplay('0');

    setPreviousValue(null);

    setOperation(null);

    setWaitingForNewValue(false);

  };

  return (

    <div style={{ width: '260px', margin: '20px auto', textAlign: 'center' }}>

      <div

        style={{

          background: '#f0f0f0',

          padding: '10px',

          marginBottom: '10px',

          fontSize: '24px',

          minHeight: '40px',

          display: 'flex',

          alignItems: 'center',

          justifyContent: 'flex-end',

        }}

      >

        {display}

      </div>

      <div

        style={{

          display: 'grid',

          gridTemplateColumns: 'repeat(4, 1fr)',

          gap: '5px',

        }}

      >

        <button onClick={clear} style={{ gridColumn: 'span 4', padding: '15px', fontSize: '18px' }}>Clear</button>

        <button onClick={() => inputOperator('/')} style={{ padding: '15px', fontSize: '18px' }}>÷</button>

        <button onClick={() => inputOperator('*')} style={{ padding: '15px', fontSize: '18px' }}>×</button>

        <button onClick={() => inputOperator('-')} style={{ padding: '15px', fontSize: '18px' }}>−</button>

        <button onClick={() => inputNumber(7)} style={{ padding: '15px', fontSize: '18px' }}>7</button>

        <button onClick={() => inputNumber(8)} style={{ padding: '15px', fontSize: '18px' }}>8</button>

        <button onClick={() => inputNumber(9)} style={{ padding: '15px', fontSize: '18px' }}>9</button>

        <button onClick={() => inputOperator('+')} style={{ padding: '15px', fontSize: '18px' }}>+</button>

        <button onClick={() => inputNumber(4)} style={{ padding: '15px', fontSize: '18px' }}>4</button>

        <button onClick={() => inputNumber(5)} style={{ padding: '15px', fontSize: '18px' }}>5</button>

        <button onClick={() => inputNumber(6)} style={{ padding: '15px', fontSize: '18px' }}>6</button>

        <button onClick={performCalculation} style={{ gridRow: 'span 2', padding: '15px', fontSize: '18px' }}>=</button>

        <button onClick={() => inputNumber(1)} style={{ padding: '15px', fontSize: '18px' }}>1</button>

        <button onClick={() => inputNumber(2)} style={{ padding: '15px', fontSize: '18px' }}>2</button>

        <button onClick={() => inputNumber(3)} style={{ padding: '15px', fontSize: '18px' }}>3</button>

        <button onClick={() => inputNumber(0)} style={{ gridColumn: 'span 2', padding: '15px', fontSize: '18px' }}>0</button>

        <button onClick={() => inputNumber('.')} style={{ padding: '15px', fontSize: '18px' }}>.</button>

      </div>

    </div>

  );

}

🛠 How to Run This

1. Make sure you have a React app (npx create-react-app calculator).

2. Replace App.js with this code or put this in Calculator.js and import it.

3. Run npm start.