massivelines
5/17/2017 - 10:49 PM

calculator

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("/")] = "&divide;";
	}
	while (str.indexOf("*") >= 0) {
		str[str.indexOf("*")] = "&times;";
	}
	while (str.indexOf("-") >= 0) {
		str[str.indexOf("-")] = "&minus;";
	}
	while (str.indexOf("+") >= 0) {
		str[str.indexOf("+")] = "&plus;";
	}
	$("#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="/">&divide;</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="*">&times;</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="-">&minus;</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="+">&plus;</button>
 </div>
 <div class="row">
  <button class="col btn btn-secondary" value="_">&plusmn;</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>