Как сделать историю операций в калькуляторе JS

Question

В программировании недавно, по этому вопрос мб глупый. Как реализовать историю операций в калькуляторе?

    const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
  };
  
  function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;
  
    if (waitingForSecondOperand === true) {
      calculator.displayValue = digit;
      calculator.waitingForSecondOperand = false;
    } else {
      calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
  }
  
  function inputDecimal(dot) {
    // If the `displayValue` does not contain a decimal point
    if (!calculator.displayValue.includes(dot)) {
      // Append the decimal point
      calculator.displayValue += dot;
    }
  }
  
  function handleOperator(nextOperator) {
    const { firstOperand, displayValue, operator } = calculator
    const inputValue = parseFloat(displayValue);
  
    if (operator && calculator.waitingForSecondOperand)  {
      calculator.operator = nextOperator;
      return;
    }
  
    if (firstOperand == null) {
      calculator.firstOperand = inputValue;
    } else if (operator) {
      const currentValue = firstOperand || 0;
      const result = performCalculation[operator](currentValue, inputValue);
  
      calculator.displayValue = String(result);
      calculator.firstOperand = result;
    }
  
    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
  }
  
  const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
  
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
  
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
  
    '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
  
    '=': (firstOperand, secondOperand) => secondOperand
  };
  
  function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
  }
  
  function updateDisplay() {
    const display = document.querySelector('.calculator-screen');
    display.value = calculator.displayValue;
  }
  
  updateDisplay();
  
  const keys = document.querySelector('.calculator-keys');
  keys.addEventListener('click', (event) => {
    const { target } = event;
    if (!target.matches('button')) {
      return;
    }
  
    if (target.classList.contains('operator')) {
      handleOperator(target.value);
          updateDisplay();
      return;
    }
  
    if (target.classList.contains('decimal')) {
      inputDecimal(target.value);
          updateDisplay();
      return;
    }
  
    if (target.classList.contains('all-clear')) {
      resetCalculator();
          updateDisplay();
      return;
    }
  
    inputDigit(target.value);
    updateDisplay();
  });





    <!DOCTYPE html>
<html lang="en">
<head>

        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <title>Document</title>
        <?php wp_head(); ?>
</head>
<body>
    <div class="container my-4">  

        <div class="calculator card">
        
            <input type="text" class="calculator-screen z-depth-1" value="" disabled />
        
            <div class="calculator-keys">
        
              <button type="button" class="operator btn btn-dark" value="+">+</button>
              <button type="button" class="operator btn btn-dark" value="-">-</button>
              <button type="button" class="operator btn btn-dark" value="*">&times;</button>
              <button type="button" class="operator btn btn-dark" value="/">&divide;</button>
        
              <button type="button" value="7" class="btn btn-light waves-effect">7</button>
              <button type="button" value="8" class="btn btn-light waves-effect">8</button>
              <button type="button" value="9" class="btn btn-light waves-effect">9</button>
        
        
              <button type="button" value="4" class="btn btn-light waves-effect">4</button>
              <button type="button" value="5" class="btn btn-light waves-effect">5</button>
              <button type="button" value="6" class="btn btn-light waves-effect">6</button>
        
        
              <button type="button" value="1" class="btn btn-light waves-effect">1</button>
              <button type="button" value="2" class="btn btn-light waves-effect">2</button>
              <button type="button" value="3" class="btn btn-light waves-effect">3</button>
        
        
              <button type="button" value="0" class="btn btn-light waves-effect">0</button>
              <button type="button" class="decimal function btn btn-secondary" value=".">.</button>
              <button type="button" class="all-clear function btn btn-dark btn-sm" value="all-clear">Стереть</button>
        
              <button type="button" class="equal-sign operator btn btn-dark btn-default" value="=">=</button>
        
            </div>
        <div class="result"></div>

          </div>
        </div>

    <script src="/wp-content/themes/calc/script.js"></script>
</body>
</html>

Answer 1

Смотря где тебе нужна история. Можно сделать массив и при каждом вычислении добавлять туда в виде строки вычисление. А потом где нибудь отображать этот массив. Только возможно придется его очищать, чтобы там не было 1000+ элементов

Answer 2

Надеюсь это вам поможет
Код который я добавил лежит между комментариями

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};
const blockResult = document.querySelector(".result");
var history = new Array(),
  historyN = 0;

function inputDigit(digit) {
  const {
    displayValue,
    waitingForSecondOperand
  } = calculator;

  if (waitingForSecondOperand === true) {
    calculator.displayValue = digit;
    calculator.waitingForSecondOperand = false;
  } else {
    calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
  }
}

function inputDecimal(dot) {
  // If the `displayValue` does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

function handleOperator(nextOperator) {
  const {
    firstOperand,
    displayValue,
    operator
  } = calculator
  const inputValue = parseFloat(displayValue);

  if (operator && calculator.waitingForSecondOperand) {
    calculator.operator = nextOperator;
    return;
  }

  if (firstOperand == null) {
    calculator.firstOperand = inputValue;
  } else if (operator) {
    const currentValue = firstOperand || 0;
    const result = performCalculation[operator](currentValue, inputValue);

    //Тут код
    let res = currentValue + operator + inputValue + " = " + result;
    history[historyN] = res;
    historyN++;
    let createP = document.createElement("p");
    createP.className = "history";
    createP.innerHTML = res;
    blockResult.appendChild(createP);
    //Тут конец

    calculator.displayValue = String(result);
    calculator.firstOperand = result;
  }

  calculator.waitingForSecondOperand = true;
  calculator.operator = nextOperator;
}

const performCalculation = {
  '/': (firstOperand, secondOperand) => firstOperand / secondOperand,

  '*': (firstOperand, secondOperand) => firstOperand * secondOperand,

  '+': (firstOperand, secondOperand) => firstOperand + secondOperand,

  '-': (firstOperand, secondOperand) => firstOperand - secondOperand,

  '=': (firstOperand, secondOperand) => secondOperand
};

function resetCalculator() {
  calculator.displayValue = '0';
  calculator.firstOperand = null;
  calculator.waitingForSecondOperand = false;
  calculator.operator = null;
  blockResult.innerHTML = "";
}

function updateDisplay() {
  const display = document.querySelector('.calculator-screen');
  display.value = calculator.displayValue;
}

updateDisplay();

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  const {
    target
  } = event;
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    handleOperator(target.value);
    updateDisplay();
    return;
  }

  if (target.classList.contains('decimal')) {
    inputDecimal(target.value);
    updateDisplay();
    return;
  }

  if (target.classList.contains('all-clear')) {
    resetCalculator();
    updateDisplay();
    return;
  }

  inputDigit(target.value);
  updateDisplay();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container my-4">

  <div class="calculator card">

    <input type="text" class="calculator-screen z-depth-1" value="" disabled />

    <div class="calculator-keys">

      <button type="button" class="operator btn btn-dark" value="+">+</button>
      <button type="button" class="operator btn btn-dark" value="-">-</button>
      <button type="button" class="operator btn btn-dark" value="*">&times;</button>
      <button type="button" class="operator btn btn-dark" value="/">&divide;</button>

      <button type="button" value="7" class="btn btn-light waves-effect">7</button>
      <button type="button" value="8" class="btn btn-light waves-effect">8</button>
      <button type="button" value="9" class="btn btn-light waves-effect">9</button>


      <button type="button" value="4" class="btn btn-light waves-effect">4</button>
      <button type="button" value="5" class="btn btn-light waves-effect">5</button>
      <button type="button" value="6" class="btn btn-light waves-effect">6</button>


      <button type="button" value="1" class="btn btn-light waves-effect">1</button>
      <button type="button" value="2" class="btn btn-light waves-effect">2</button>
      <button type="button" value="3" class="btn btn-light waves-effect">3</button>


      <button type="button" value="0" class="btn btn-light waves-effect">0</button>
      <button type="button" class="decimal function btn btn-secondary" value=".">.</button>
      <button type="button" class="all-clear function btn btn-dark btn-sm" value="all-clear">Стереть</button>

      <button type="button" class="equal-sign operator btn btn-dark btn-default" value="=">=</button>

    </div>
    <div class="result"></div>

  </div>
</div>

БЛОГ НА HUSL

Как сделать историю операций в калькуляторе JS

Ответы (2 шт):