Item: Javascript Calculator
Rating: 3.4
Author: 1ned

17 Downloads
168 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

InVision - How to make awesome GIFs

Dashboard Template

Carousel

Bar Chart (D3)

Rebuilding Treehouse Tracks Page

New Playpen

Cool lines

A Pen by Kamil