Подскажите как создать историю операций для калькулятор на JS

Question

Нужно создать историю операций. Я совсем не могу понять как это сделать. Подскажите, пожалуйста! Вот что есть на данный момент:

let operation;

function calc() {
  let num1, num2, result;
  num1 = Number(document.getElementById("num1").value);
  num2 = Number(document.getElementById("num2").value);

  switch (operation) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      result = num1 / num2;
      break;
    default:
      result = "Выберите действие";
      break;
  }

  document.getElementById("result").innerHTML = result;

  if ((num2 == 0) && (operation == '/')) {
    document.getElementById("result").innerHTML = "На ноль делить нельзя";
    return;
  }

  document.getElementById("history").innerHTML = result;


}

Answer 1

Подскажите как создать историю операций для калькулятор

Например вот так...

let operation;

function calc() {
  let num1, num2, result;
  num1 = Number(document.getElementById("num1").value);
  num2 = Number(document.getElementById("num2").value);
  // тут код изменен
  const or = document.getElementById("result")
  const oh = document.getElementById("history")

  switch (operation) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      result = num1 / num2;
      break;
    default:
      // тут код изменен
      or.textContent = "Выберите действие"
      return
  }
  if (!num2 && (operation == '/')) {
    or.textContent = "На ноль делить нельзя"
    return;
  }
  // тут код изменен
  or.textContent = ""
  const html = `<p>${num1} ${operation} ${num2} = ${result}</p>`
  oh.insertAdjacentHTML('beforeend', html)


}

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

ul[class],
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

ul[class] {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

.calc {
  display: flex;
  justify-content: center;
}

.calc-screen {
  max-width: 264px;
  margin: 100px 20px 100px 20px;
  padding: 22px 22px;
  border: 10px solid #000;
  border-radius: 20px;
}

input,
p {
  display: block;
  margin-bottom: 10px;
  padding: 15px 10px 15px 10px;
  font-size: 16px;
  resize: none;
  max-width: 200px;
  min-height: 80px;
  background-color: #ccc8c8;
  border: none;
  border-radius: 20px;
}

button {
  margin-bottom: 10px;
  background-color: #e8e6e6;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 20px;
  padding: 10px 10px 10px 10px;
  cursor: pointer;
}

.calc_button {
  margin-left: 78px;
}

.calc-button+.calc-button {
  margin-left: 2px;
}

.calc-button:hover {
  filter: brightness(90%);
}

.calc_button:hover {
  filter: brightness(90%);
}

.calc-button:active {
  filter: brightness(80%);
}

.calc_button:active {
  filter: brightness(80%);
}

.history-screen {
  width: 264px;
  margin: 100px 20px 100px 20px;
  padding: 22px 22px;
  border: 10px solid #000;
  border-radius: 20px;
}

#history {
  min-height: 370px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Калькулятор</title>
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <div class="calc">
    <div class="calc-screen">
      <input id="num1">

      <button class="calc-button" onclick="operation='+'">+</button>
      <button class="calc-button" onclick="operation='-'">-</button>
      <button class="calc-button" onclick="operation='*'">*</button>
      <button class="calc-button" onclick="operation='/'">/</button>

      <input id="num2">

      <button class="calc_button" onclick="calc()">=</button>

      <p id="result"></p>
    </div>

    <div class="history-screen">

      <p id="history"></p>
    </div>
  </div>

  <script src="js/main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Подскажите как создать историю операций для калькулятор на JS

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