"use strict"; function defineTemplates() { window.templates = { headerTemplate: { tagName: 'header', attributes: [ { name: 'class', value: 'header', }, ], children: [ { tagName: 'h1', attributes: [ { name: 'class', value: 'header__heading', }, ], children: [ 'Simple calculator', ], }, ], }, mainTemplate: { tagName: 'main', attributes: [ { name: 'class', value: 'calculator-wrapper', }, ], children: [ { tagName: 'article', attributes: [ { name: 'class', value: 'calculator', }, ], children: [ { tagName: 'section', attributes: [ { name: 'class', value: 'calculator__display', }, ], children: [ { tagName: 'div', attributes: [ { name: 'id', value: 'full-history-button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ 'Results', ], }, { tagName: 'div', attributes: [ { name: 'id', value: 'full-history-container', }, ], children: [ { tagName: 'p', children: [ 'Previous results:' ], } ], }, { tagName: 'section', attributes: [ { name: 'class', value: 'calculator__history', }, ], children: [ '.', ], }, { tagName: 'section', attributes: [ { name: 'class', value: 'calculator__result', }, ], children: [ '0', ], }, ], }, { tagName: 'section', attributes: [ { name: 'class', value: 'calculator__buttons', }, ], children: [ { tagName: 'section', attributes: [ { name: 'class', value: 'arithmetic__buttons', }, ], children: [ { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ '(', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ ')', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ '%', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ 'CE', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '7', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '8', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '9', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ '÷', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '4', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '5', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '6', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ '×', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '1', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '2', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '3', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ '−', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '0', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--number', }, ], children: [ '.', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--result', }, ], children: [ '=', ], }, { tagName: 'div', attributes: [ { name: 'class', value: 'calculator__button', }, { name: 'class', value: 'calculator__button--operator', }, ], children: [ '+', ], }, ], }, ], }, ], }, ], }, footerTemplate: { tagName: 'footer', attributes: [ { name: 'class', value: 'footer', }, ], children: [ { tagName: 'p', attributes: [ { name: 'class', value: 'footer__about', }, ], children: [ 'Created on Andersen JS Courses 2020', ], }, ], }, }; window.removeEventListener('load', defineTemplates); } window.addEventListener('load', defineTemplates); /////////////////////////////////////////////////////////////// function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function onWindowLoad() { // https://tc39.github.io/ecma262/#sec-array.prototype.findindex if (!Array.prototype.findIndex) { Object.defineProperty(Array.prototype, 'findIndex', { value: function(predicate) { // 1. Нехай O дорівнює ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); } var o = Object(this); // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError. if (typeof predicate !== 'function') { throw new TypeError('предикат має бути функцією'); } // 4. Якщо наданий thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. var thisArg = arguments[1]; // 5. Нехай k дорівнює 0. var k = 0; // 6. Повторювати, поки k < len while (k < len) { // a. Нехай Pk дорівнює ! ToString(k). // b. Нехай kValue дорівнює ? Get(O, Pk). // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. Якщо testResult дорівнює true, повернути k. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return k; } // e. Збільшити k на 1. k++; } // 7. Повернути -1. return -1; }, configurable: true, writable: true }); } var _templates$mainTempla, _templates$mainTempla2, _templates$mainTempla3, _templates$mainTempla4, _templates$mainTempla5, _templates$mainTempla6; var ERROR = 'Error'; var PERCENT = '%'; var DIVIDE = '÷'; var MULTIPLY = '×'; var SUBTRACT = '−'; var ADD = '+'; var openBraceRegExp = /$/g; var closeBraceRegExp = /$/g; var bracesRegExp = /$|$/g; var operatorsRegExp = /\d+|\./g; var expressionsRegExp = /($.*?$)/g; var clearOperatorsRegExp = /\+−|−−|×−|÷−|%−/g; var numbersRegExp = /\d+\.\d+|\d+|[^\d]−\d+\.\d+|[^\d]−\d+/g; var separateDivideRegExp = /(\d+\.\d+÷\d+\.\d+)|(\d+÷\d+\.\d+)|(\d+\.\d+÷\d+)/g; var separateMultiplyRegExp = /(\d+\.\d+÷\d+\.\d+)|(\d+×\d+\.\d+)|(\d+\.\d+÷\d+)/g; var bodyElement = document.getElementsByTagName('body')[0]; addAttributes(bodyElement, [{ name: 'class', value: 'body-container' }]); var resultsHistory = []; var resultsHistoryElement = null; var currentResultElement = null; var fullHistoryButton = null; var fullHistoryContainer = null; var isHistoryVisible = false; var headerTemplate = templates.headerTemplate; var mainTemplate = templates.mainTemplate; var footerTemplate = templates.footerTemplate; var arithmeticButtons = (_templates$mainTempla = templates.mainTemplate) === null || _templates$mainTempla === void 0 ? void 0 : (_templates$mainTempla2 = _templates$mainTempla.children[0]) === null || _templates$mainTempla2 === void 0 ? void 0 : (_templates$mainTempla3 = _templates$mainTempla2.children[1]) === null || _templates$mainTempla3 === void 0 ? void 0 : _templates$mainTempla3.children[0]; arithmeticButtons.listeners = [{ event: 'click', callback: onButtonClick }, { event: 'contextmenu', callback: onContextMenu }]; var historyButton = (_templates$mainTempla4 = templates.mainTemplate) === null || _templates$mainTempla4 === void 0 ? void 0 : (_templates$mainTempla5 = _templates$mainTempla4.children[0]) === null || _templates$mainTempla5 === void 0 ? void 0 : (_templates$mainTempla6 = _templates$mainTempla5.children[0]) === null || _templates$mainTempla6 === void 0 ? void 0 : _templates$mainTempla6.children[0]; historyButton.listeners = [{ event: 'click', callback: onToggleHistory }]; function addAttributes(element) { var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; for (var i = 0; i < attributes.length; i++) { if (attributes[i].name === 'class') { element.classList.add(attributes[i].value); continue; } element.setAttribute(attributes[i].name, attributes[i].value); } } function addElement(newElement, parentElement) { var _newElement$children, _newElement$listeners; var element = document.createElement(newElement.tagName); addAttributes(element, newElement.attributes); if ((_newElement$children = newElement.children) === null || _newElement$children === void 0 ? void 0 : _newElement$children.length) { for (var i = 0; i < newElement.children.length; i++) { if (newElement.children[i] instanceof Object) { addElement(newElement.children[i], element); } else { var textNode = document.createTextNode(newElement.children[i]); element.appendChild(textNode); } } } if ((_newElement$listeners = newElement.listeners) === null || _newElement$listeners === void 0 ? void 0 : _newElement$listeners.length) { var _loop = function _loop(_i) { element.addEventListener(newElement.listeners[_i].event, function (event) { return newElement.listeners[_i].callback(event); }); }; for (var _i = 0; _i < newElement.listeners.length; _i++) { _loop(_i); } } parentElement.appendChild(element); } addElement(headerTemplate, bodyElement); addElement(mainTemplate, bodyElement); addElement(footerTemplate, bodyElement); resultsHistoryElement = document.querySelector('.calculator__history'); currentResultElement = document.querySelector('.calculator__result'); fullHistoryButton = document.querySelector('#full-history-button'); fullHistoryContainer = document.querySelector('#full-history-container'); function onButtonClick(event) { if (event.target.tagName !== 'DIV') { return; } if (currentResultElement.textContent === ERROR) { currentResultElement.textContent = '0'; } var buttonValue = event.target.textContent; if (buttonValue === '.' && currentResultElement.textContent === '0') { currentResultElement.textContent = '0.'; return; } if (buttonValue === '.' && isNaN(Number(currentResultElement.textContent.slice(-1)))) { currentResultElement.textContent += '0.'; return; } if (buttonValue === '=') { if (currentResultElement.textContent === '0') { return; } var expressionString = currentResultElement.textContent; var result = currentResultElement.textContent = evaluateExpression(expressionString); var expressionResult = "".concat(expressionString, " = ").concat(result); resultsHistory.push(expressionResult); addElement({ tagName: 'p', children: [expressionResult] }, fullHistoryContainer); resultsHistoryElement.textContent = resultsHistory[resultsHistory.length - 1]; return; } if (buttonValue === 'CE') { if (currentResultElement.textContent.length === 1) { currentResultElement.textContent = '0'; } else { currentResultElement.textContent = currentResultElement.textContent.slice(0, -1); } return; } if (currentResultElement.textContent !== '0') { currentResultElement.textContent += buttonValue; } else { currentResultElement.textContent = buttonValue; } } function onContextMenu(event) { if (event.target.tagName !== 'DIV') { return; } if (event.target.textContent === 'CE') { event.preventDefault(); currentResultElement.textContent = '0'; } } function onToggleHistory() { if (isHistoryVisible) { fullHistoryButton.textContent = 'Results'; fullHistoryButton.style.fontWeight = 'normal'; fullHistoryButton.style.color = '#70757a'; fullHistoryContainer.style.display = 'none'; } else { fullHistoryButton.textContent = 'Close'; fullHistoryButton.style.fontWeight = 'bold'; fullHistoryButton.style.color = '#000000'; fullHistoryContainer.style.display = 'block'; } isHistoryVisible = !isHistoryVisible; } function evaluateExpression(expressionString) { var result = ERROR; var string = expressionString; var isBracesUsed = !!(string.match(bracesRegExp) || []).length; if (isBracesUsed) { var separatedExpressions = []; separatedExpressions.push.apply(separatedExpressions, _toConsumableArray(string.match(separateDivideRegExp) || [])); separatedExpressions.push.apply(separatedExpressions, _toConsumableArray(string.match(separateMultiplyRegExp) || [])); for (var i = 0; i < separatedExpressions.length; i++) { string = string.replace(separatedExpressions[i], evaluateExpression(separatedExpressions[i])); } var nestedExpressions = string.match(expressionsRegExp) || []; for (var _i2 = 0; _i2 < nestedExpressions.length; _i2++) { if (!isBracesEqual(nestedExpressions[_i2])) { var openBracesCounter = (nestedExpressions[_i2].match(openBraceRegExp) || []).length; var closeBracesCounter = (nestedExpressions[_i2].match(closeBraceRegExp) || []).length; var bracesToAdd = openBracesCounter - closeBracesCounter; nestedExpressions[_i2] = "".concat(nestedExpressions[_i2]).concat(')'.repeat(bracesToAdd)); } } nestedExpressions = nestedExpressions.map(function (expression) { return expression.slice(1, -1); }); while (nestedExpressions.length) { string = string.replace("(".concat(nestedExpressions[0], ")"), evaluateExpression(nestedExpressions[0])); nestedExpressions.shift(); } result = calculateExpression(string); } else { result = calculateExpression(string); } return result; } function calculateExpression(expressionString) { var result = ERROR; var string = expressionString; var isFirstNegative = false; if (string[0] === SUBTRACT) {//(string.startsWith(SUBTRACT)) { isFirstNegative = true; } var operands = string.match(numbersRegExp) || []; operands = operands.map(function (operand) { return isNaN(Number(operand)) ? operand.slice(1) : operand; }).map(function (operand) { return Number(operand.replace("".concat(SUBTRACT), '-')); }); var operatorsToClear = string.match(clearOperatorsRegExp) || []; for (var _i3 = 0; _i3 < operatorsToClear.length; _i3++) { string = string.replace(operatorsToClear[_i3], operatorsToClear[_i3].charAt(0)); } var operators = string.replace(operatorsRegExp, '').split(''); if (isFirstNegative) { operands[0] = -operands[0]; operators.shift(); } operators = operators.filter(function (operator) { return operator !== '(' && operator !== ')'; }); var operatorsString = operators.join(''); // if (operatorsString.includes(DIVIDE) || operatorsString.includes(MULTIPLY)) { if (/÷/.test(operatorsString) || /×/.test(operatorsString)) { for (var _i4 = 0; _i4 < operatorsString.length; _i4++) { if (operatorsString[_i4] === DIVIDE || operatorsString[_i4] === MULTIPLY) { (function () { var currentOperator = operatorsString[_i4]; var INDEX = operators.findIndex(function (operator) { return operator === currentOperator; }); operands.splice(INDEX, 2, operateMath(currentOperator, operands[INDEX], operands[INDEX + 1])); operatorsString = operatorsString.replace(currentOperator, ''); operators.splice(INDEX, 1); })(); } } } operators = operators.reverse(); operands = operands.reverse(); var i = operators.length - 1; while (operators.length) { var current = operands[i]; var next = operands[i + 1]; if (!next) { next = 0; } operands.splice(i, 2, operateMath(operators.splice(i, 1)[0], next, current)); i--; } result = operands[0]; result = result < 0 ? "".concat(SUBTRACT).concat(String(result).slice(1)) : "".concat(result); return result; } function operateMath(operator, operand1, operand2) { operand1 = typeof operand1 === 'string' ? operand1.replace(/−/, '-') : operand1; operand2 = typeof operand2 === 'string' ? operand2.replace(/−/, '-') : operand2; var result = ERROR; if (operator === SUBTRACT && operand2 === undefined) { return "".concat(SUBTRACT).concat(operand1); } if (operator === SUBTRACT && operand1 === undefined) { return "".concat(SUBTRACT).concat(operand2); } operand1 = parseFloat(operand1); operand2 = parseFloat(operand2); var operation; switch (operator) { case PERCENT: operation = operand1 * operand2 / 100; break; case DIVIDE: operation = operand1 / operand2; break; case MULTIPLY: operation = operand1 * operand2; break; case SUBTRACT: case '-': operation = operand1 - operand2; break; case ADD: operation = operand1 + operand2; break; default: operation = ERROR; } if (typeof operation === 'number' && isFinite(operation) && !isNaN(operation)) { operation = Number(operation.toFixed(12)); } else { operation = ERROR; } result = operation < 0 ? "".concat(SUBTRACT).concat(String(operation).slice(1)) : String(operation); return result; } function isBracesEqual(expressionString) { var openBracesCounter = (expressionString.match(openBraceRegExp) || []).length; var closeBracesCounter = (expressionString.match(closeBraceRegExp) || []).length; return openBracesCounter === closeBracesCounter; } window.removeEventListener('load', onWindowLoad); } window.addEventListener('load', onWindowLoad);

Simple calculator ( ES5^ without eval() BABEL compiled )