calculator
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
#calculator {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 350px;
border: solid lightgray;
border-radius: 5px;
padding: 10px 25px;
}
#screen {
text-align: right;
height: 100px;
width: 100%;
background: lightgray;
}
#time {
height:15px;
font-size: 15px;
/* background: blueviolet; */
}
#out {
height: 65px;
font-size: 55px;
/* background: green; */
}
.btn {
margin: 1%;
height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
var out = [];
var hold = [];
var time = [];
var holdTime = [];
var equ = null;
var error = 0;
var done; //after = done is one, if num pressed reset everything
function output(str) {
// console.log(str);
// var arr = [];
// var num;
// var sl;
// if (str.length > 3) {
// if (str.length % 3 == 0) {
// num = parseInt(str.length / 3) - 1;
// sl = 3;
// } else if (str.length % 3 >= 1) {
// num = parseInt(str.length / 3);
// sl = str.length % 3;
// }
// arr[0] = str.slice(0, sl);
// str.slice(sl, str.length);
// for (var x = 1; x <= num; x++) {
// arr[x] = str.slice(0, 3);
// str = str.slice(4, str.length);
// }
// str = arr.join(",");
// }
$("#out").html(str);
}
function history(holder) {
str = holder.slice(0, holder.length);
while (str.indexOf("/") >= 0) {
str[str.indexOf("/")] = "÷";
}
while (str.indexOf("*") >= 0) {
str[str.indexOf("*")] = "×";
}
while (str.indexOf("-") >= 0) {
str[str.indexOf("-")] = "−";
}
while (str.indexOf("+") >= 0) {
str[str.indexOf("+")] = "+";
}
$("#time").html(str);
}
function reset() {
holdTime = [];
equ = 0;
out = [];
hold = [];
time = [];
$("#out").html(hold);
$("#time").html(time);
done = 0;
}
$("button").click(function() {
if (error === 1) {
reset();
}
//if number or .
if (($(this).val() >= 0 && $(this).val() <= 9) || $(this).val() == ".") {
// resests if number or . was pressed after =
if (holdTime.length == 1 && done == 1) {
reset();
}
out.push($(this).val());
for (var i = 0; i < out.length; i++) {
hold = out.join("");
}
output(hold);
//if ce
} else if ($(this).val() == "ce") {
if (holdTime.length == 1 && done == 1) {
reset();
}
hold = [];
out = [];
output(hold);
//if c
} else if ($(this).val() == "c") {
reset();
//if del
} else if ($(this).val() == "del") {
if (holdTime.length == 1 && done == 1) {
reset();
}
if (out.length == 1) {
hold = [];
out = [];
output(hold);
} else {
out.pop();
}
for (var i = 0; i < out.length; i++) {
hold = out.join("");
}
output(hold);
//if +-
} else if ($(this).val() == "_") {
if (holdTime.length == 1 && done == 1) {
reset();
}
if (hold[0] != "-") {
out.unshift("-");
} else {
out.shift();
}
for (var i = 0; i < out.length; i++) {
hold = out.join("");
}
output(hold);
//if =
} else if ($(this).val() == "=") {
if (typeof time[0] === "undefined" || typeof hold[0] === "undefined") {
reset();
$("#out").html("ERROR");
} else {
time.push(hold);
history(time);
hold = time.join("");
holdTime = time;
while (holdTime.length > 1) {
equ = holdTime.slice(0, 3);
holdTime = holdTime.slice(3, holdTime.length);
equ = equ.join("");
equ = eval(equ);
holdTime.unshift(equ);
}
done = 1;
output(holdTime);
hold=[];
}
//if any operator is pushed
} else {
// if = was last pressed the operator clear time and add total to time[0]
if (typeof holdTime[0] === "number") {
time = [];
time[0] = holdTime[0];
time.push($(this).val());
history(time);
hold = [];
out = [];
output(hold);
done = 0;
//else normal
} else {
if (typeof hold[0] === "undefined") {
reset();
} else {
for (var i = 0; i < out.length; i++) {
hold = out.join("");
}
// if is number is empty and operator change to new, else push number
if (typeof hold[hold.length - 1] === "undefined") {
time.pop();
} else {
time.push(hold);
}
time.push($(this).val());
history(time);
hold = [];
out = [];
output(hold);
output(hold);
}
}
}
});
// == twice
<div id="calculator">
<div class="row">
<div id="screen" class="btn">
<div id="time"></div>
<div id="out"></div>
</div>
</div>
<div class="row">
<button class="col btn btn-secondary" value="ce">CE</button>
<button class="col btn btn-secondary" value="c">C</button>
<button class="col btn btn-secondary" value="del">DEL</button>
<button class="col btn btn-secondary" value="/">÷</button>
</div>
<div class="row">
<button class="col btn btn-secondary" value="7">7</button>
<button class="col btn btn-secondary" value="8">8</button>
<button class="col btn btn-secondary" value="9">9</button>
<button class="col btn btn-secondary" value="*">×</button>
</div>
<div class="row">
<button class="col btn btn-secondary" value="4">4</button>
<button class="col btn btn-secondary" value="5">5</button>
<button class="col btn btn-secondary" value="6">6</button>
<button class="col btn btn-secondary" value="-">−</button>
</div>
<div class="row">
<button class="col btn btn-secondary" value="1">1</button>
<button class="col btn btn-secondary" value="2">2</button>
<button class="col btn btn-secondary" value="3">3</button>
<button class="col btn btn-secondary" value="+">+</button>
</div>
<div class="row">
<button class="col btn btn-secondary" value="_">±</button>
<button class="col btn btn-secondary" value="0">0</button>
<button class="col btn btn-secondary" value=".">.</button>
<button class="col btn btn-secondary" value="=">=</button>
</div>
</div>