Javascript Calculator

In this example below you will see how to do a Javascript Calculator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1ned, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1ned ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Javascript Calculator</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="calculator">
  <center>JAVASCRIPT CALCULATOR</center>
  <div id='screen'>
    <div id="display"></div>
    <div id="arguments"></div>
    <div id="error"></div>
    <!--DEBUG
    <div id="result"></div>
    <div id="firstVar"></div>
    <div id="operation"></div>
    <div id="secondVar"></div>
    -->
  </div>
  <div>
    <div>
      <button id="allClear">AC</button>
      <button id="clear">C</button>
      <button id="dividedBy">÷</button>
      <button id="times">x</button>
    </div>
    <div>
      <button id="seven">7</button>
      <button id="eight">8</button>
      <button id="nine">9</button>
      <button id="minus">-</button>
    </div>
    <div>
      <button id="four">4</button>
      <button id="five">5</button>
      <button id="six">6</button>
      <button id="plus">+</button>
    </div>
    <div>
      <button id="one">1</button>
      <button id="two">2</button>
      <button id="three">3</button>
      <button id="equals">=</button>
    </div>
    <div>
      <button id="zero">0</button>
      <button id="point">.</button>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1ned/javascript-calculator-QvOvJZ */
body {
  background-color: black;
}

#calculator {
  border-radius: 5px;
  background-color: white;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  height: 410px;
  width: 246px;
}

#screen {
  border-radius: 4px;
  background-color: grey;
  height: 95px;
}

#display {
  color: black;
  padding-right: 5px;
  font-size: 40px;
  text-align: right;
}

#arguments {
  color: #333;
  padding-right: 5px;
  font-size: 20px;
  text-align: right;
}

/* #operation {
  background-color: grey;
  color: #333;
  padding-right: 10px;
  font-size: 20px;
  text-align: right;
}

#result {
  background-color: grey;
  color: #333;
  padding-right: 10px;
  font-size: 20px;
  text-align: right;
}

#firstVar {
  background-color: grey;
  color: #333;
  padding-right: 10px;
  font-size: 20px;
  text-align: right;
}

#secondVar {
  background-color: grey;
  color: #333;
  padding-right: 10px;
  font-size: 20px;
  text-align: right;
} */

#error {
  background-color: grey;
  color: #333;
  padding-right: 10px;
  font-size: 20px;
  text-align: right;
}

button {
  background-color: darkgoldenrod;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px #555;
  color: black !important;
  cursor: pointer;
  font-size: 20px !important;
  margin: 4px !important;
  height: 50px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

button:hover {
  background-color: darkblue;
  color: white !important;
}

button:focus {
  outline: none !important;
}

button:active {
  background-color: blue;
  box-shadow: 0 2px #000;
  transform: translateY(2px);
}

#allClear {
  background-color: #550000;
  color: white !important;
}

#allClear:hover {
  background-color: red;
}

#clear {
  background-color: #bb0000;
  color: white !important;
}

#clear:hover {
  background-color: red;
}

#equals {
  height: 108px;
  position: absolute;
  margin-left: 8px !important;
}

#zero {
  width: 112px;
}

/*Downloaded from https://www.codeseek.co/1ned/javascript-calculator-QvOvJZ */
$(document).ready(function() {
  var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
  var operatorsArray = ["+", "-", "÷", "x"];
  // var point = ".";
  var promptError = "";
  var screenText = "";
  var firstVar = "";
  var operation = "";
  var hasOperand = false;
  var secondVar = "";
  var result = "";
  ///for 'C'
  var args = "";

  function errorMet() {
    screenText = "";
    firstVar = "";
    operation = "";
    hasOperand = false;
    secondVar = "";
    result = "";
    addToScreen();
    promptError = "Digit Limit Met";
    $("#error").html(promptError);
  }

  function addToScreen() {
    ///for key='C'
    var symbol = "";
    if (operation === "*") {
      symbol = "x";
    } else if (operation === "/") {
      symbol = "÷";
    } else {
      symbol = operation;
    }
    args = firstVar + symbol + secondVar;

    if (screenText.length > 11) {
      /////
      errorMet(); /////
    } else {
      /////
      promptError = "";
      $("#display").html(screenText);
      $("#arguments").html(args);
      // $("#operation").html(operation);
      // $("#result").html(result);
      // $("#firstVar").html(firstVar);
      // $("#secondVar").html(secondVar);
      $("#error").html(promptError);
    } /////
    ///DEBUG
    // console.log("update display: " + screenText);
    // console.log("update result: " + result);
    // console.log("update firstVar: " + firstVar);
    // console.log("update operation: " + operation);
    // console.log("hasOperand: " + hasOperand);
    // console.log("update secondVar: " + secondVar);
    // // console.log("update error: " + promptError);
    // console.log("arguments: " + args);
    // console.log("arguments length: " + args.length);
    // console.log("test display: " + firstVar + operation + secondVar);
    // console.log("result length: " + result.length);
    // // console.log("##################");
    // console.log("display length: " + screenText.length);
    // console.log("result length: " + result.length);
    // console.log("firstVar length: " + firstVar.length);
    // console.log("operation length: " + operation.length);
    // console.log("secondVar length: " + secondVar.length);
    // console.log("typeof result: " + typeof result);
    // console.log("typeof firstVar: " + typeof firstVar);
    // console.log("typeof operation: " + typeof operation);
    // console.log("typeof hasOperand: " + typeof hasOperand);
    // console.log("typeof secondVar: " + typeof secondVar);
    // console.log('firstVar[0]: ' + firstVar[0]);
    // console.log('firstVar[1]: ' + firstVar[1]);
    // console.log('secondVar[0]: ' + secondVar[0]);
    // console.log('secondVar[1]: ' + secondVar[1]);
    // console.log("xxxxxxxxxxxxxxxxxxxx");
    ///DEBUG
  }

  function resolveOperation(symbol) {
    if (symbol === "x") {
      symbol = "*";
    } else if (symbol === "÷") {
      symbol = "/";
    }
    return symbol;
  }

  function getResult() {
    var res = Number(firstVar) + operation + Number(secondVar);
    var x = eval(res);
    // console.log('typeor x: ' + typeof x);
    // console.log('x: ' + x);
    var y = x.toString();
    // console.log('length of y: ' + y.length);
    if (y.length > 11 && (x < 1 || x < 9999999999)) {
      // alert('OPSSSSSSSSS!!!!!!!');
      y = y.slice(0, 11);
      x = y;
    }
    ///
    if (x > 9999999999) {
      // alert('OPSSSSSSSSS!!!!!!!');
      errorMet();
    }
    ///
    x = x.toString();
    result = x;
    // console.log("result length: " + result.length);/////
    screenText = result;
    operation = "";
    firstVar = "";
    secondVar = "";
    hasOperand = false;
  }

  function input(key) {
    ///nums includes(key)
    if (nums.includes(key)) {
      if (key === "0" && firstVar.length === 0) {
        firstVar = "";
        // screenText = firstVar;
      } else if (key === "0" && firstVar.length > 0 && !hasOperand) {
        firstVar += key;
        screenText = firstVar;
      } else if (key === "0" && secondVar.length === 0) {
        secondVar = "";
      } else if (hasOperand) {
        secondVar += key;
        screenText = secondVar;
      } else {
        result = "";
        firstVar += key;
        screenText = firstVar;
      }
    }
    ///operation includes(key)
    if (operatorsArray.includes(key)) {
      if (firstVar.length > 0 && hasOperand && secondVar.length > 0) {
        getResult();
        firstVar = result;
        operation = resolveOperation(key);
        hasOperand = true;
      } else if (result.length > 0) {
        firstVar = result;
        operation = resolveOperation(key);
        hasOperand = true;
      } else if (firstVar.length > 0) {
        operation = resolveOperation(key);
        hasOperand = true;
      }
    }
    ///evalualte
    if (key === "=") {
      if (
        (firstVar.length > 0 || result.length > 0) &&
        (hasOperand && secondVar.length > 0)
      ) {
        if (result.length > 0) {
          firstVar = result;
        }
        getResult();
        hasOperand = false;
      }
    }
    ///dot
    if (key === ".") {
      if (firstVar.length === 0) {
        firstVar += "0.";
        screenText = firstVar;
      } else if (
        firstVar.length > 0 &&
        firstVar.indexOf(".") === -1 &&
        operation.length === 0
      ) {
        firstVar += ".";
        screenText = firstVar;
      }
      if (secondVar.length === 0 && operation.length > 0) {
        secondVar += "0.";
        screenText = secondVar;
      } else if (secondVar.length > 0 && secondVar.indexOf(".") === -1) {
        secondVar += ".";
        screenText = secondVar;
      }
    }
    addToScreen();
  }

  addToScreen();

  ///reset
  $("#allClear").click(function() {
    promptError = "";
    screenText = "";
    operation = "";
    hasOperand = false;
    result = "";
    firstVar = "";
    secondVar = "";
    args = "";
    addToScreen();
  });
  ///pop last arguement
  $("#clear").click(function() {
    if (result.length > 0 && hasOperand && secondVar.length === 0) {
      operation = "";
      hasOperand = false;
    } else if (result.length > 0 && hasOperand && secondVar.length > 0) {
      secondVar = "";
      screenText = "0";
    } else if (result.length > 0) {
      screenText = "";
      result = "";
      firstVar = "";
      operation = "";
      secondVar = "";
      hasOperand = false;
    } else if (secondVar.length > 0) {
      secondVar = "";
      screenText = "0";
    } else if (hasOperand) {
      operation = "";
      hasOperand = false;
    } else {
      firstVar = "";
      screenText = "";
    }
    addToScreen();
  });
  ///nums
  $("#one").click(function() {
    input("1");
  });
  $("#two").click(function() {
    input("2");
  });
  $("#three").click(function() {
    input("3");
  });
  $("#four").click(function() {
    input("4");
  });
  $("#five").click(function() {
    input("5");
  });
  $("#six").click(function() {
    input("6");
  });
  $("#seven").click(function() {
    input("7");
  });
  $("#eight").click(function() {
    input("8");
  });
  $("#nine").click(function() {
    input("9");
  });
  $("#zero").click(function() {
    input("0");
  });
  ///dot
  $("#point").click(function() {
    input(".");
  });
  ///operators
  $("#plus").click(function() {
    input("+");
  });
  $("#minus").click(function() {
    input("-");
  });
  $("#times").click(function() {
    input("x");
  });
  $("#dividedBy").click(function() {
    input("÷");
  });
  ///result
  $("#equals").click(function() {
    input("=");
  });
});

Comments