<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
</div>
</div>
<div class="button-field">
<button type="button" id="c" class="clear" name="clear"><span>c</span></button>
<button type="button" id="ce" class="clear" name="clear-entry"><span>ce</span></button>
<button type="button" id="del" class="clear" name="delete"><span>del</span></button>
<button type="button" id="/" class="operator" name="devide">÷</button>
<button type="button" id="7" class="number" name="7">7</button>
<button type="button" id="8" class="number" name="8">8</button>
<button type="button" id="9" class="number" name="9">9</button>
<button type="button" id="*" class="operator" name="multiply">×</button>
<button type="button" id="4" class="number" name="4">4</button>
<button type="button" id="5" class="number" name="5">5</button>
<button type="button" id="6" class="number" name="6">6</button>
<button type="button" id="-" class="operator" name="substract">−</button>
<button type="button" id="1" class="number" name="1">1</button>
<button type="button" id="2" class="number" name="2">2</button>
<button type="button" id="3" class="number" name="3">3</button>
<button type="button" id="+" class="operator" name="add">+</button>
<button type="button" id="negative" class="neg" name="+/-">±</button>
<button type="button" id="0" class="number" name="0">0</button>
<button type="button" id="." class="dot" name="dot">.</button>
<button type="button" id="=" class="equal" name="equal">=</button>
</div>
</div>
</div>
</body>
</html>
*,:focus{outline:0}
.clear,.output>*{text-transform:uppercase}
:root{font-size:25px}
*{margin:0;padding:0}
body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)}
button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease}
button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s}
button:active{top:4px;transition:.3s;background:#EEA9A8!important}
.container{height:100vH;display:flex;justify-content:center;align-items:center}
.calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey}
.output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4}
.output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000}
#calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)}
#input{height:1.5rem;font-size:1.5rem}
.number{background-color:rgba(255,255,255,.65)}
.number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)}
.number:active{background-color:rgba(255,255,255,.9)}
.clear{font-size:1rem;background-color:rgba(240,120,120,.5)}
.clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)}
.clear:active{background-color:rgba(240,120,120,.8)}
.equal{background:rgba(70,240,90,.4)}
.equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)}
.equal:active{background-color:rgba(80,240,100,.7)}
.dot,.neg,.operator{background-color:rgba(0,0,0,.15)}
.dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)}
.dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)}
#c{background:rgba(240,10,10,.5)}
#c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)}
#c:active{background:rgba(240,10,10,.6)}
.button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)}
$(document).ready(function(){
const buttons = document.querySelectorAll("button");
const currCalc = document.querySelector("#calculation");
const currInput = document.querySelector("#input");
const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')'
const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string
const re2 = /\.$/; // RegExp matches dot at the end
let calc = [];
let input = [];
let res;
let intRes = false;
let disCalc = [];
let disResult;
let str;
function onNumber(el) {
// print number, unless user tries to input multiple zeros in the beginning & input-display is full
if (
((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") &&
input.length < 20
) {
input[0] === "0" && !input.includes(".") && el !== "0"
? (input = [])
: input;
input.push(el);
currInput.innerHTML = `${input.join("")}`;
}
}
function onClear(el) {
if (el === "c") {
// clear all
calc = [];
input = [];
intRes = false;
res = undefined;
displayCalculation(calc, false);
currInput.innerHTML = "";
// console.log(calc, input, negative, intRes, res);
} else if (el === "ce") {
// clear entry (input)
input = [];
currInput.innerHTML = "";
} else if (el === "del" && input.length > 0) {
// delete last input character
input.splice(-1);
currInput.innerHTML = `${input.join("")}`;
}
}
function onNeg() {
// toggle between ± only if input is not 0
if (input.length !== 0 && eval(input.join("")) !== 0) {
let negative;
input[0] === "-" ? (negative = true) : (negative = false);
// if-condition for display-reasons
if ((!negative && input.length < 20) || negative) {
negative ? input.shift() : input.unshift("-");
currInput.innerHTML = `${input.join("")}`;
}
}
}
function onDot() {
// print dot, unless input is already a decimal & condition for display-reasons
if (!input.includes(".") && input.length < 20) {
input.length > 0 ? input.push(".") : input.push("0", ".");
currInput.innerHTML = `${input.join("")}`;
}
}
function onOperator(operator) {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? (input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split(""))
: input;
// run only, if input ends with checkRE OR
// calc isn't empty and ends with checkRE => || (calc.length > 0 && checkRE.test(calc))
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// operator in calc
calc.push(operator);
// display current input and calc
displayCalculation(calc, false);
currInput.innerHTML = `${input.join("")}`;
}
}
function onEqual() {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split("")
: input;
// run only if input ends with checkRE
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// resolve calculation, only if calc ends with checkRE
if (checkRE.test(calc)) {
res = eval(calc.join(""));
// display calculation and result
displayCalculation(calc, true);
displayResult(res);
}
}
}
function followUp(withIntRes) {
if (withIntRes) {
input = res.toString().split("");
}
calc = [];
res = undefined;
intRes = undefined;
currCalc.innerHTML = `${calc}`;
}
function displayResult(res) {
if (res > 99999999999999999999 || res < -9999999999999999999) {
disResult = "error";
calc = [];
input = [];
res = [];
intRes = false;
displayCalculation([], false);
} else {
disResult = res;
intRes = true;
}
currInput.innerHTML = `${disResult}`;
}
function displayCalculation(calcArr, final) {
final ? calcArr.push("=") : calcArr;
str = calcArr.join("");
if (str.length > 30) {
str = str.substr(-29);
disCalc = `…${str}`;
} else {
disCalc = str;
}
currCalc.innerHTML = disCalc;
}
function calculator() {
if (this.className === "number") {
if (intRes) {
followUp(false);
}
onNumber(this.id);
} else if (this.className === "clear") {
onClear(this.id);
} else if (this.id === "negative") {
if (intRes) {
followUp(true);
}
onNeg();
} else if (this.className === "dot") {
if (intRes) {
followUp(false);
}
onDot();
} else if (this.className === "operator") {
if (intRes) {
followUp(true);
}
onOperator(this.id);
} else if (this.className === "equal") {
onEqual();
}
}
buttons.forEach(button => button.addEventListener("click", calculator));
});
