Calc

by eulomelo

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <title>This is a simple calculator</title>
    <meta charset="UTF-8">
    <style>
      input,
      body {
        font-family: monospace;
      }

    </style>
  </head>

  <body>
    <center>
      <h1>
        Simple Calculator
      </h1>
      <input type="number" id="display"><br>
      <input type="button" value=" 1" class="number">
      <input type="button" value=" 2" class="number">
      <input type="button" value=" 3" class="number">
      <input type="button" value="AC" id="reset"><br>
      <input type="button" value=" 4" class="number">
      <input type="button" value=" 5" class="number">
      <input type="button" value=" 6" class="number">
      <input type="button" value=" +" class="operation"><br>
      <input type="button" value=" 7" class="number">
      <input type="button" value=" 8" class="number">
      <input type="button" value=" 9" class="number">
      <input type="button" value=" -" class="operation"><br>
      <input type="button" value=" 0" class="number">
      <input type="button" value=" ." class="number">
      <input type="button" value=" *" class="operation">
      <input type="button" value=" /" class="operation"><br>
      <input type="button" value=" = " id="equals">
    </center>
  </body>
  <script>
    let firstvalue = [];
    let secondvalue = [];
    let operation = "none";
    let firstvaluedone = false;
    let display = document.getElementById("display");
    let numbers = document.getElementsByClassName("number");
    let operations = document.getElementsByClassName("operation");
    let reset = document.getElementById("reset");
    let equals = document.getElementById("equals");


    for (let i = 0; i < 11; i++) {
      numbers[i].addEventListener("click", function() {
        if (firstvaluedone) {
          secondvalue.push(numbers[i].value);
          display.value = parseFloat(secondvalue.join("").replace(/\s/g, ''));
        } else {
         ...