Simple Calculator Using (Switch / Case) in JavaScript.

We will create a functional JavaScript calculator logic using switch and case statements in js. The calculator will have functions like clear, add, subtract, divide, multiply, back, etc...

Copy the given code.

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator Using Switch Case</title>
    <!-- CSS Link  -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <div class="container">
            <div id="display"></div>
            <div class="buttons">
                <div class="button clear">C</div>
                <div class="button">/</div>
                <div class="button">*</div>
                <div class="button back">&larr;</div>
                <div class="button">7</div>
                <div class="button">8</div>
                <div class="button">9</div>
                <div class="button">-</div>
                <div class="button">4</div>
                <div class="button">5</div>
                <div class="button">6</div>
                <div class="button">+</div>
                <div class="button">1</div>
                <div class="button">2</div>
                <div class="button">3</div>
                <div class="button">.</div>
                <div class="button">(</div>
                <div class="button">0</div>
                <div class="button">)</div>
                <div class="button equal">=</div>
            </div>
        </div>
    </section>
    <!-- JS Link  -->
    <script src="script.js"></script>
</body>

</html>

CSS

.container {
  max-width: 400px;
  margin: 10vh auto 0 auto;
  border: 2px solid #111;
}

#display {
  text-align: right;
  height: 70px;
  line-height: 70px;
  padding: 16px 8px;
  font-size: 25px;
  border: 2px solid #111;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.buttons > div {
  border: 1px solid #111;
}

.button {
  border: 0.5px solid #999;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}

.button:hover {
  background-color: rgb(54, 54, 54);
  color: white;
  transition: 0.01s ease-in-out;
}

.equal {
  background-color: rgb(85, 85, 255);
  color: white;
}

.clear,
.back {
  background-color: rgb(55, 55, 55);
  color: white;
}

.clear:hover,
.back:hover {
  background-color: rgb(35, 35, 35);
}

JavaScript

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

let buttons = Array.from(document.getElementsByClassName("button"));

buttons.map((button) => {
  button.addEventListener("click", (e) => {
    switch (e.target.innerText) {
      case "C":
        display.innerText = "";
        break;
      case "=":
        try {
          display.innerText = eval(display.innerText);
        } catch {
          display.innerText = "Error";
        }
        break;
      case "←":
        if (display.innerText) {
          display.innerText = display.innerText.slice(0, -1);
        }
        break;
      default:
        display.innerText += e.target.innerText;
    }
  });
});