Calculator

React JS

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [displayValue, setDisplayValue] = useState("0");
  const [firstOperand, setFirstOperand] = useState(null);
  const [operator, setOperator] = useState(null);
  const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);

  const inputDigit = (digit) => {
    if (waitingForSecondOperand) {
      setDisplayValue(digit);
      setWaitingForSecondOperand(false);
    } else {
      setDisplayValue(displayValue === "0" ? digit : displayValue + digit);
    }
  };

  const inputOperator = (nextOperator) => {
    const inputValue = parseFloat(displayValue);

    if (operator && waitingForSecondOperand) {
      setOperator(nextOperator);
      return;
    }

    if (firstOperand == null) {
      setFirstOperand(inputValue);
    } else if (operator) {
      const result = performCalculation(firstOperand, inputValue, operator);
      setDisplayValue(String(result));
      setFirstOperand(result);
    }

    setOperator(nextOperator);
    setWaitingForSecondOperand(true);
  };

  const performCalculation = (firstOperand, secondOperand, operator) => {
    switch (operator) {
      case "+":
        return firstOperand + secondOperand;
      case "-":
        return firstOperand - secondOperand;
      case "*":
        return firstOperand * secondOperand;
      case "/":
        return secondOperand !== 0
          ? firstOperand / secondOperand
          : firstOperand;
      case "%":
        return firstOperand % secondOperand;
      default:
        return secondOperand;
    }
  };

  const calculateResult = () => {
    if (operator == null || waitingForSecondOperand) return;

    const secondOperand = parseFloat(displayValue);
    const result = performCalculation(firstOperand, secondOperand, operator);
    setDisplayValue(String(result));
    setFirstOperand(null);
    setOperator(null);
    setWaitingForSecondOperand(false);
  };

  const clearDisplay = () => {
    setDisplayValue("0");
    setFirstOperand(null);
    setOperator(null);
    setWaitingForSecondOperand(false);
  };

  const invertSign = () => {
    setDisplayValue(String(parseFloat(displayValue) * -1));
  };

  return (
    <div className="calculator">
      <div className="display" id="display">
        {displayValue}
      </div>
      <div className="buttons">
        <button className="btn" onClick={clearDisplay}>
          C
        </button>
        <button className="btn" onClick={invertSign}>
          +/-
        </button>
        <button className="btn" onClick={() => inputOperator("-")}>
          -
        </button>
        <button className="btn" onClick={() => inputOperator("/")}>
          /
        </button>
        <button className="btn" onClick={() => inputDigit("7")}>
          7
        </button>
        <button className="btn" onClick={() => inputDigit("8")}>
          8
        </button>
        <button className="btn" onClick={() => inputDigit("9")}>
          9
        </button>
        <button className="btn" onClick={() => inputOperator("*")}>
          X
        </button>
        <button className="btn" onClick={() => inputDigit("4")}>
          4
        </button>
        <button className="btn" onClick={() => inputDigit("5")}>
          5
        </button>
        <button className="btn" onClick={() => inputDigit("6")}>
          6
        </button>
        <button className="btn" onClick={() => inputOperator("%")}>
          %
        </button>
        <button className="btn" onClick={() => inputDigit("1")}>
          1
        </button>
        <button className="btn" onClick={() => inputDigit("2")}>
          2
        </button>
        <button className="btn" onClick={() => inputDigit("3")}>
          3
        </button>
        <button className="btn" onClick={() => inputOperator("+")}>
          +
        </button>
        <button className="btn" onClick={() => inputDigit("0")}>
          0
        </button>
        <button className="btn" onClick={() => inputDigit(".")}>
          .
        </button>
        <button className="btn equal" onClick={calculateResult}>
          =
        </button>
      </div>
    </div>
  );
};

export default App;

CSS Calculator

React TS

import React, { useState } from "react";
import "./styles.css";

const App: React.FC = () => {
  const [displayValue, setDisplayValue] = useState<string>("0");
  const [firstOperand, setFirstOperand] = useState<number | null>(null);
  const [operator, setOperator] = useState<string | null>(null);
  const [waitingForSecondOperand, setWaitingForSecondOperand] =
    useState<boolean>(false);

  const inputDigit = (digit: string): void => {
    if (waitingForSecondOperand) {
      setDisplayValue(digit);
      setWaitingForSecondOperand(false);
    } else {
      setDisplayValue(displayValue === "0" ? digit : displayValue + digit);
    }
  };

  const inputOperator = (nextOperator: string): void => {
    const inputValue = parseFloat(displayValue);

    if (operator && waitingForSecondOperand) {
      setOperator(nextOperator);
      return;
    }

    if (firstOperand == null) {
      setFirstOperand(inputValue);
    } else if (operator) {
      const result = performCalculation(firstOperand, inputValue, operator);
      setDisplayValue(String(result));
      setFirstOperand(result);
    }

    setOperator(nextOperator);
    setWaitingForSecondOperand(true);
  };

  const performCalculation = (
    firstOperand: number,
    secondOperand: number,
    operator: string,
  ): number => {
    switch (operator) {
      case "+":
        return firstOperand + secondOperand;
      case "-":
        return firstOperand - secondOperand;
      case "*":
        return firstOperand * secondOperand;
      case "/":
        return secondOperand !== 0
          ? firstOperand / secondOperand
          : firstOperand;
      case "%":
        return firstOperand % secondOperand;
      default:
        return secondOperand;
    }
  };

  const calculateResult = (): void => {
    if (operator === null || waitingForSecondOperand) return;

    const secondOperand = parseFloat(displayValue);
    const result = performCalculation(firstOperand!, secondOperand, operator);
    setDisplayValue(String(result));
    setFirstOperand(null);
    setOperator(null);
    setWaitingForSecondOperand(false);
  };

  const clearDisplay = (): void => {
    setDisplayValue("0");
    setFirstOperand(null);
    setOperator(null);
    setWaitingForSecondOperand(false);
  };

  const invertSign = (): void => {
    setDisplayValue(String(parseFloat(displayValue) * -1));
  };

  return (
    <div className="calculator">
      <div className="display" id="display">
        {displayValue}
      </div>
      <div className="buttons">
        <button className="btn" onClick={clearDisplay}>
          C
        </button>
        <button className="btn" onClick={invertSign}>
          +/-
        </button>
        <button className="btn" onClick={() => inputOperator("-")}>
          -
        </button>
        <button className="btn" onClick={() => inputOperator("/")}>
          /
        </button>
        <button className="btn" onClick={() => inputDigit("7")}>
          7
        </button>
        <button className="btn" onClick={() => inputDigit("8")}>
          8
        </button>
        <button className="btn" onClick={() => inputDigit("9")}>
          9
        </button>
        <button className="btn" onClick={() => inputOperator("*")}>
          X
        </button>
        <button className="btn" onClick={() => inputDigit("4")}>
          4
        </button>
        <button className="btn" onClick={() => inputDigit("5")}>
          5
        </button>
        <button className="btn" onClick={() => inputDigit("6")}>
          6
        </button>
        <button className="btn" onClick={() => inputOperator("%")}>
          %
        </button>
        <button className="btn" onClick={() => inputDigit("1")}>
          1
        </button>
        <button className="btn" onClick={() => inputDigit("2")}>
          2
        </button>
        <button className="btn" onClick={() => inputDigit("3")}>
          3
        </button>
        <button className="btn" onClick={() => inputOperator("+")}>
          +
        </button>
        <button className="btn" onClick={() => inputDigit("0")}>
          0
        </button>
        <button className="btn" onClick={() => inputDigit(".")}>
          .
        </button>
        <button className="btn equal" onClick={calculateResult}>
          =
        </button>
      </div>
    </div>
  );
};

export default App;

CSS Calculator