Calculator - 2024-03-21

by Ttt Yyy

HTML

<div id="calculator">
  <div id="display">0</div>
  <div id="keyboard">
    <div class="expression char number">1</div>
    <div class="expression char number">2</div>
    <div class="expression char number">3</div>
    <div class="expression char operator">+</div>
    <div class="expression char number">4</div>
    <div class="expression char number">5</div>
    <div class="expression char number">6</div>
    <div class="expression char operator">-</div>
    <div class="expression char number">7</div>
    <div class="expression char number">8</div>
    <div class="expression char number">9</div>
    <div class="expression char operator">*</div>
    <div id="clear" class="char">AC</div>
    <div class="expression char number">0</div>
    <div class="expression char operator">/</div>
    <div id="equals" class="char">=</div>
  </div>
</div>

CSS

#calculator {
  align-items: center;
  background-color: gray;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
}

#display {
  border: 1px solid black;
  background-color: white;
  margin: 4px;
  padding: 0 4px;
  text-align: right;
  width: 180px;
}

#keyboard {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4px;
  width: 180px;
}

.char {
  align-items: center;
  border: 1px solid black;
  display: flex;
  flex: 1 1 auto;
  margin: 4px 2px 4px 0px;
  justify-content: center;
  height: 40px;
  width: 40px;
}

.number {
  background-color: #dddddd;
}

.operator {
  background-color: orange;
}

#clear {
  background-color: red;
}

#equals {
  background-color: green;
}

JavaScript

let expression = "";
const display = document.getElementById("display");

// document.getElementsByClassName returns HTMLCollection so use ...
[...document.getElementsByClassName("expression")].forEach(element =>
  element.addEventListener("click", event => {
    expression += event.target.innerText;
    display.innerText = expression;
  })
);

document.getElementById("equals").addEventListener("click", () => {
  expression = eval(expression);
  display.innerText = expression;
});

document.getElementById("clear").addEventListener("click", () => {
  expression = "";
  display.innerText = "0";
});