21 - Simple Calculator with Basic Operations

Description

Create a React application that displays a simple calculator with basic operations. The calculator should display a running total and current input, accept user input through buttons or keyboard presses for numbers and operators, perform basic arithmetic operations based on chosen operators, and show the final result after an equals button is clicked.

Algorithm

1. Create a state variable to store the current input and running total.

2. Define a function to handle user input through buttons or keyboard presses.

3. Define a function to perform basic arithmetic operations based on chosen operators.

4. Define a function to handle the equals button click.

5. Render the calculator display and buttons.

Classes

• Calculator: A component that represents the calculator display and buttons.

• Button: A component that represents a single button.

Code

Calculator.js

import React, { useState } from 'react';
import Button from './Button';

function Calculator() {
  const [input, setInput] = useState('0');
  const [total, setTotal] = useState('0');

  const handleInput = (value) => {
    setInput(input + value);
  };

  const handleOperator = (operator) => {
    const currentTotal = parseFloat(total);
    const currentInput = parseFloat(input);
    let result;

    switch (operator) {
      case '+':
        result = currentTotal + currentInput;
        break;
      case '-':
        result = currentTotal - currentInput;
        break;
      case '*':
        result = currentTotal * currentInput;
        break;
      case '/':
        result = currentTotal / currentInput;
        break;
      default:
        result = currentTotal;
    }

    setTotal(result.toString());
    setInput('0');
  };

  const handleEquals = () => {
    const result = parseFloat(total) + parseFloat(input);
    setTotal(result.toString());
    setInput('0');
  };

  return (
    <div>
      <div>
        <input type="text" value={input} readOnly />
        <input type="text" value={total} readOnly />
      </div>
      <div>
        <Button value="1" onClick={() => handleInput('1')} />
        <Button value="2" onClick={() => handleInput('2')} />
        <Button value="3" onClick={() => handleInput('3')} />
        <Button value="+" onClick={() => handleOperator('+')} />
        <Button value="-" onClick={() => handleOperator('-')} />
        <Button value="*" onClick={() => handleOperator('*')} />
        <Button value="/" onClick={() => handleOperator('/')} />
        <Button value="=" onClick={handleEquals} />
      </div>
    </div>
  );
}

export default Calculator;

Button.js

import React from 'react';

function Button({ value, onClick }) {
  return (
    <button onClick={onClick}>
      {value}
    </button>
  );
}

export default Button;

Explanation

The Calculator component renders the calculator display and buttons. The Button component represents a single button. The handleInput function handles user input through buttons or keyboard presses. The handleOperator function performs basic arithmetic operations based on chosen operators. The handleEquals function handles the equals button click.

Possible Future Enhancements

• Add more features to the calculator (e.g., square root, exponentiation).

• Improve the user interface and user experience.

• Add support for multiple operators.

• Display the calculation history.

• Allow users to save and load calculations.