<!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("=");
});
});