Calculator wirh JS

by Pranab Dey

HTML

<input type="text" readonly>
<table>
  <tr>
    <td><button>1</button></td>
    <td><button>2</button></td>
    <td><button>3</button></td>
  </tr>
  <tr>
    <td><button>4</button></td>
    <td><button>5</button></td>
    <td><button>6</button></td>
  </tr>
  <tr>
    <td><button>7</button></td>
    <td><button>8</button></td>
    <td><button>9</button></td>
  </tr>
  <tr>
    <td><button>+</button></td>
    <td><button>-</button></td>
    <td><button>x</button></td>
  </tr>
  <tr>
    <td><button>/</button></td>
    <td><button>0</button></td>
    <td><button>=</button></td>
  </tr>
  <tr>
    <td colspan="2"><button>CE</button></td>
    <td><button>Del</button></td>
  </tr>
</table>

CSS

button {
  width: 100%;
  cursor: pointer;
}

input {
  pointer-events: none;
}

JavaScript

(function() {
  var td = document.querySelectorAll("td"),
    input = document.querySelector("input");
  input.innerHTML = '';
  td.forEach(d => {
    d.addEventListener("click", function() {
      var f = this.querySelector("button"),
        g;
      if (f.innerHTML === "CE") {
        input.value = '';
      } else if (f.innerHTML === "=") {
        if (input.value.includes("+")) {
          g = input.value.toString().split("+");
          g.reduce((a, c) => input.value = parseInt(a) + parseInt(c), 0);
        } else if (input.value.includes("-")) {
          g = input.value.toString().split("-");
          input.value = parseInt(g[0].toString()) - parseInt(g[1].toString());
        } else if (input.value.includes("x")) {
          g = input.value.toString().split("x");
          input.value = parseInt(g[0].toString()) * parseInt(g[1].toString())
        } else if (input.value.includes("/")) {
          g = input.value.toString().split("/");
          if (g[1] === 0) {
            input.value = "Infinity";
          } else {
            input.value = parseInt(g[0].toString()) / parseInt(g[1].toString())
          }
        } else {
          input.value = input.value;
        }
      } else if (f.innerHTML === "Del") {
        var arr = Array.from(input.value);
        arr.pop();
        input.value = arr.join('');
      } else {
        input.value += f.innerHTML;
      }
    })
  })
})();