Item: Javascript Calculator
Rating: 3.4
Author: 1ned

4 Downloads
35 Views
Tweet
Download Now View Demo

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

More from 1ned

Javascript Calculator

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

Technologies

Comments

More from 1ned

Local Weather App FCC weather API

Simon Game

Random Quote Machine

Tic Tac Toe

You Might Also Like

Menu using loop

ANIMATED SMILEY

A Pen by Hirad Azar

Hover zoom effect

JSON → CSS evaluator

Time Line

Background image on image hover over

hexagons puzzle