<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="window clearfix">
<div class="windowName">Calculator <span class="windowControl"
id="close">⨯</span>
<span class="windowControl" id="expand">🗖</span><span class="windowControl"
id="turn">−</span>
</div>
<div class="buttons clearfix">
<div id="historyButton" class="historyButton">🕔</div>
<div>
<div id="menu">≡</div><div class="type">STANDART</div>
</div>
<div id="solveString" class="solveString"></div>
<div id="answer" class="answer">0</div>
<br>
<div class="row">
<div id="ce" strings-operator="ce">CE</div>
<div id="c" strings-operator="c">C</div>
<div id="backspace" strings-operator="backspace">←</div>
<div id="division" data-operator="division">÷</div>
</div>
<div class="row">
<div class="numbers" id="7">7</div>
<div class="numbers" id="8">8</div>
<div class="numbers" id="9">9</div>
<div data-operator="multiplication" id="multiplication">⨯</div>
</div>
<div class="row">
<div class="numbers" id="4">4</div>
<div class="numbers" id="5">5</div>
<div class="numbers" id="6">6</div>
<div data-operator="minus" id="minus">−</div>
</div>
<div class="row">
<div class="numbers" id="1">1</div>
<div class="numbers" id="2">2</div>
<div class="numbers" id="3">3</div>
<div data-operator="plus" id="plus">+</div>
</div>
<div class="row">
<div strings-operator="plusMinus" id="plusMinus">±</div>
<div class="numbers" id="0">0</div>
<div strings-operator="point" id="point">.</div>
<div data-operator="equal" id="equal">=</div>
</div>
<div id="historyList" class=""></div>
<div id="delHistory">
<div id="delHistoryButton" class="historyButton">␡</div>
</div>
</div>
<!-- <div class="historyMemory">
There nothing saved in memory
</div>
-->
</div>
</body>
<script src="script.js"></script>
</html>
var x = y = activeOperator = null,
delCount = false,
shiftOperator = false,
divideByZero = "can't divide by zero",
limitText = "Limit is exceeded",
historyArr = [],
historyList = document.getElementById("historyList"),
callEqual = false;
operatorsList = {
multiplication: function (x, y) {
return x * y;
},
minus: function (x, y) {
return x - y;
},
plus: function (x, y) {
return x + y;
},
division: function (x, y) {
if (y == 0) {
return divideByZero;
}
return x / y;
},
plusMinus: function () {
answer.innerHTML = -parseFloat(answer.innerHTML);
},
c: function () {
x = y = activeOperator = nextActivOperator = delCount = null;
answer.innerHTML = "0";
solveString.innerHTML = "";
},
ce: function () {
answer.innerHTML = "0";
},
backspace: function () {
if (answer.innerHTML.length == 1) {
answer.innerHTML = 0;
return false;
}
if (answer.innerHTML.indexOf("e") > -1) {
return false;
}
if (isNaN(answer.innerHTML)) {
return false;
}
answer.innerHTML = answer.innerHTML.substring(0, answer.innerHTML.length - 1);
},
equal: function (dataOperator, nextDataOperator) {
if (dataOperator && nextDataOperator) {
if (x != null) {
y = parseFloat(answer.innerHTML);
} else {
return false;
}
sortingObj.dataOperator(dataOperator, x, y);
delCount = null;
shiftOperator = false;
return false;
}
if (x != null) {
if (solveString.innerHTML && y == null) {
y = parseFloat(answer.innerHTML);
}
} else {
return false;
}
callEqual = false;
sortingObj.dataOperator(dataOperator, x, y);
if (y) {
solveString.innerHTML = "";
}
nextActivOperator = delCount = null;
shiftOperator = false;
},
point: function () {
var answerNumber = parseFloat(answer.innerHTML);
if (answer.innerHTML.indexOf(".") > -1) {
return false;
}
if (answerNumber < 0) {
answerNumber = -answerNumber;
}
if (answerNumber > 0 && answerNumber / Math.floor(answerNumber) == 1) {
answer.innerHTML += ".";
}
if (answerNumber == 0) {
answer.innerHTML += ".";
}
}
},
sortingObj = {
dataOperator: function (name, x1, y1) {
if (typeof operatorsList[name] === "function") {
if (solveString.innerHTML) {
addSolveString(" " + y1);
}
var answerNumber = operatorsList[name](x1, y1);
answerNumber = float(answerNumber, x, y);
answerNumber = answerNumber.toString();
if (answerNumber.length > 15 && answerNumber != divideByZero) {
answerNumber = parseFloat(answerNumber).toExponential(9);
}
if (isNaN(answerNumber) && answerNumber != divideByZero) {
answerNumber = "Result is undefined";
}
if (answer.innerHTML == limitText) {
return false;
}
if (answerNumber == Infinity) {
answerNumber = limitText;
}
answer.innerHTML = answerNumber;
if (!callEqual) {
createHistoryElem();
callEqual = false;
}
x = parseFloat(answerNumber);
}
},
stringsOperator: function (name, x, y) {
if (typeof operatorsList[name] === "function") {
operatorsList[name](x, y);
}
},
keyPress: function (name) {
if (typeof keyList[name] === "function") {
keyList[name]();
}
}
},
keyList = {
"96": function () {
document.getElementById('0').click();
animationButton("0");
},
"97": function () {
document.getElementById('1').click();
animationButton("1");
},
"98": function () {
document.getElementById('2').click();
animationButton("2");
},
"99": function () {
document.getElementById('3').click();
animationButton("3");
},
"100": function () {
document.getElementById('4').click();
animationButton("4");
},
"101": function () {
document.getElementById('5').click();
animationButton("5");
},
"102": function () {
document.getElementById('6').click();
animationButton("6");
},
"103": function () {
document.getElementById('7').click();
animationButton("7");
},
"104": function () {
document.getElementById('8').click();
animationButton("8");
},
"105": function () {
document.getElementById('9').click();
animationButton("9");
},
"27": function () {
document.getElementById('c').click();
animationButton("c");
},
"8": function () {
document.getElementById('backspace').click();
animationButton("backspace");
},
"111": function () {
document.getElementById('division').click();
animationButton("division");
},
"106": function () {
document.getElementById('multiplication').click();
animationButton("multiplication");
},
"109": function () {
document.getElementById('minus').click();
animationButton("minus");
},
"107": function () {
document.getElementById('plus').click();
animationButton("plus");
},
"13": function () {
document.getElementById('equal').click();
animationButton("equal");
},
"110": function () {
document.getElementById('point').click();
animationButton("point");
},
};
function createHistoryElem() {
var text;
console.log(solveString.innerHTML)
if (solveString.innerHTML) {
text = solveString.innerHTML;
} else {
text = x + " " + document.getElementById(activeOperator).innerHTML + " " + y;
}
var historyElem = {
x: x,
y: y,
activeOperator: activeOperator,
solve: text,
answer: answer.innerHTML
}
historyArr.push(historyElem);
var div = document.createElement("div");
div.setAttribute("data-id", historyArr.length - 1)
div.classList.add("historyElem", "clearfix");
var spanSolve = document.createElement("span");
spanSolve.classList.add("solveString");
spanSolve.innerHTML = historyElem.solve;
var spanAnswer = document.createElement("span");
spanAnswer.classList.add("answer");
spanAnswer.innerHTML = historyElem.answer;
div.appendChild(spanSolve);
div.appendChild(spanAnswer);
historyList.insertBefore(div, historyList.firstChild);
}
function float(answer, x, y) {
var count = yLength = xLength = 0;
if (x < 1 && x > -1) {
if (x > 0) {
while (x < 1) {
x = x * 10;
count++;
}
xLength = count;
}
if (x < 0) {
while (x > -1) {
x = x * 10;
count++;
}
}
xLength = count;
}
if (y < 1 && y > -1) {
count = 0;
if (y > 0) {
while (y < 1) {
y = y * 10;
count++;
}
yLength = count;
}
if (y < 0) {
while (y > -1) {
y = y * 10;
count++;
}
yLength = count;
}
}
if (yLength == 0 && xLength == 0) {
return answer;
}
if (yLength >= xLength) {
return parseFloat(answer).toFixed(yLength);
}
if (xLength >= yLength) {
return parseFloat(answer).toFixed(xLength);
}
}
function addSolveString(text) {
if (answer.innerHTML == "Limit is exceeded") {
return false;
}
var text = solveString.innerHTML + text;
if (text.length > 34) {
text = "..." + text.substring(text.length - 34);
}
solveString.innerHTML = text;
}
function animationButton(id) {
document.getElementById(id).style.backgroundColor = "#B8B8B8";
setTimeout (function () {
document.getElementById(id).style.backgroundColor = "";
}, 100);
}
window.onclick = function (e) {
var target = e.target;
if (target.classList.contains("historyElem")) {
nextActivOperator = delCount = null;
shiftOperator = false;
var obj = historyArr[target.getAttribute("data-id")];
x = obj.x;
y = obj.y;
activeOperator = obj.activeOperator;
solveString.innerHTML = obj.solve;
answer.innerHTML = obj.answer;
return false;
}
if (target == delHistoryButton) {
historyList.innerHTML = "";
historyArr = [];
return false;
}
if (target.getAttribute("id") == "historyButton") {
if (historyList.style.display) {
historyList.style.display = "";
delHistory.style.display = "";
} else {
historyList.style.display = "block";
delHistory.style.display ="block";
}
}
if (target.className == "numbers") {
if (shiftOperator) {
answer.innerHTML = "";
shiftOperator = false;
}
if (activeOperator && !delCount) {
answer.innerHTML = "";
delCount = true;
}
if (answer.innerHTML == "0") {
answer.innerHTML = "";
}
if (answer.innerHTML.length > 15) {
return false;
}
answer.innerHTML += target.innerHTML;
}
if (target.hasAttribute("data-operator")) {
if (target.getAttribute("data-operator") != "equal") {
if (isNaN(solveString.innerHTML.charAt(solveString.innerHTML.length - 1)) &&
solveString.innerHTML.charAt(solveString.innerHTML.length - 1) != target.innerHTML) {
solveString.innerHTML = solveString.innerHTML.substring(0, solveString.
innerHTML.length - 1);
addSolveString(target.innerHTML)
activeOperator = target.getAttribute("data-operator");
return false;
}
if (activeOperator && solveString.innerHTML) {
var nextActivOperator = target.getAttribute("data-operator");
callEqual = true;
operatorsList.equal(activeOperator, nextActivOperator);
addSolveString(" " + target.innerHTML)
shiftOperator = true;
return false;
}
x = parseFloat(answer.innerHTML);
addSolveString(" " + answer.innerHTML + " " + target.innerHTML);
activeOperator = target.getAttribute("data-operator");
}
shiftOperator = true;
if (target.getAttribute("data-operator") == "equal") {
operatorsList.equal(activeOperator);
return false;
}
}
if (target.hasAttribute("strings-operator")) {
sortingObj.stringsOperator(target.getAttribute("strings-operator"));
}
};
window.onkeydown = function (e) {
sortingObj.keyPress(e.keyCode);
};
.window {
border: 1px solid #18A0BF;
display: inline-block;
background-color: #F2F2F2;
font-family: Segoe UI, sans-serif;
cursor: default;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#close {
margin: 0 -5px;
}
#close:hover {
background: #E81123;
color: white;
padding: 0;
}
#expand:hover {
background: #19A3C2;
color: white;
}
#turn:hover {
background: #19A3C2;
color: white;
}
#close:active {
background: #F1707A;
color: white;
padding: 0;
}
#expand:active {
background: #33ADC9;
color: white;
}
#turn:active {
background: #33ADC9;
color: white;
}
#turn {
font-weight: bold;
}
.historyButton {
font-size: large;
width: 50px;
height: 50px;
text-align: center;
display: table-cell;
line-height: 50px;
float: right;
}
#delHistoryButton.historyButton {
font-size: xx-large;
line-height: 35px;
}
#delHistoryButton.historyButton:hover {
background-color: #C6C6C6;
}
#delHistoryButton.historyButton:active {
background-color: #B0B0B0;
}
.historyButton:hover {
background-color: #DADADA;
}
.historyButton:active {
background-color: #B8B8B8;
}
#menu {
font-size: xx-large;
width: 50px;
height: 50px;
text-align: center;
display: inline-block;
vertical-align: bottom;
z-index: 999;
}
#historyList {
width: 320px;
height: 200px;
position: absolute;
background-color: #DCDCDC;
bottom: 50px;
display: none;
overflow: auto;
}
#delHistory {
width: 320px;
height: 50px;
position: absolute;
background-color: #DCDCDC;
bottom: 0;
vertical-align: bottom;
display: none;
overflow: auto;
}
.type {
font-size: medium;
font-weight: bold;
margin: 0 10px;
height: 50px;
display: inline-block;
vertical-align: middle;
}
.type:before { /* для IE8+ */
content: "";
display: inline-block;
min-height: inherit;
height: 100%;
vertical-align: middle;
}
#menu:hover {
background-color: #DADADA;
}
#menu:active {
background-color: #B8B8B8;
}
.historyElem {
margin: 10px 0 10px 0;
}
.historyElem:hover {
background-color: #C6C6C6;
}
.historyElem:active {
background-color: #B0B0B0;
}
.windowControl {
float: right;
width: 30px;
height: 20px;
text-align: center;
font-size: medium;
line-height: 20px;
}
.windowControl:hover {
background-color: #CFCFCF;
}
.answer {
font-size: xx-large;
float: right;
margin: 10px;
clear: right;
font-weight: bold;
}
span.answer {
font-size: x-large;
margin: 0 10px 10px;
font-size: large;
}
.solveString {
color: gray;
float: right;
margin: 0 10px;
height: 21px;
}
span.solveString {
margin: 10px 10px 0;
font-size: small;
}
.numbers {
font-weight: bold;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.row DIV {
float: left;
width: 80px;
height: 50px;
text-align: center;
background-color: #E6E6E6;
line-height: 50px;
font-size: large;
}
.row DIV:hover {
background-color: #CFCFCF;
}
.row DIV:active {
background-color: #B8B8B8;
}
.row {
clear: left;
float: left;
}
.historyMemory {
display: inline-block;
padding: 0;
margin: 0;
}
.border {
border: 1px solid red;
}
.buttons {
display: inline-block;
position: relative;
}
.windowName {
font-size: small;
line-height: 20px;
margin: 0 5px
}