OOLO Calculator - Vanilla JS

Developer
Zac Clemans
Size
5,734 Kb
Views
8,096
  1. OOLO Calculator - Vanilla JS Previews
  2. OOLO Calculator - Vanilla JS HTML Codes
  3. OOLO Calculator - Vanilla JS CSS Codes
  4. OOLO Calculator - Vanilla JS JS Codes

How do I make an oolo calculator - vanilla js?

What is a oolo calculator - vanilla js? How do you make a oolo calculator - vanilla js? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

OOLO Calculator - Vanilla JS Previews
IQ Test

OOLO Calculator - Vanilla JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>OOLO Calculator - Vanilla JS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="calc-body"> <div class="calc-body_display" id="display"></div> <div class="clr-btn-container" id="top-btns"></div> <div class="num-btn-container" id="num-btns"></div> <div class="op-btn-container" id="op-btns"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

OOLO Calculator - Vanilla JS - Script Codes CSS Codes

.calc-body { margin: 0 auto; max-width: 400px;
} .calc-body_display { background: rgba(0, 0, 0, 1); box-sizing: border-box; color: rgba(255, 255, 255, 1); font-size: 24px; height: 20vh; line-height: 20vh; padding-right: 20px; text-align: right; width: 100%; }
.top-btn-container { width: 100%;
} .top-btn-container_clr-btn, .top-btn-container_del-btn, .top-btn-container_lprn-btn, .top-btn-container_rprn-btn { height: 15vh; width: 25%; } .top-btn-container_clr-btn { background: rgba(241, 66, 50, 1); } .top-btn-container_del-btn { background: rgba(244, 143, 48, 1); } .top-btn-container_lprn-btn, .top-btn-container_rprn-btn { background: rgba(41, 41, 41, 1); }
.num-btn-container { float: left; width: 75%;
} .num-btn-container_num-btn { background: rgba(49, 49, 49, 1); height: 15vh; max-width: 100px; width: calc(100% / 3); }
.op-btn-container { float: right; width: 25%;
} .op-btn-container_op-btn { background: rgba(41, 41, 41, 1); height: 15vh; width: 100%; }
.s-btn { border: none; color: rgba(255, 255, 255, 1); cursor: pointer; font-size: 24px; padding: 0;
} .s-btn:hover { background: }

OOLO Calculator - Vanilla JS - Script Codes JS Codes

'use strict';
var Button = { // Initialize the button with class, label, and an // onclick function init: function init(label, className, clickEvent) { this.button = document.createElement('button'); this.button.setAttribute('class', className + ' s-btn'); this.button.innerHTML = label; this.button.onclick = clickEvent; }, // Insert the button into the DOM insert: function insert(where) { where.appendChild(this.button); }
};
var Calculator = { _expression: '', _lastEntered: '', _err: false, _operators: ['/', '*', '-', '+'], // Handles all of the button creation create: function create() { var _this = this; var topRow = document.getElementById('top-btns'); var numRow = document.getElementById('num-btns'); var opsRow = document.getElementById('op-btns'); var clrBtn = Object.create(Button); clrBtn.init('C', 'top-btn-container_clr-btn', function () { this.clearDisplay(); }.bind(this)); clrBtn.insert(topRow); var delBtn = Object.create(Button); delBtn.init('Del', 'top-btn-container_del-btn', function () { this.deleteLast(); }.bind(this)); delBtn.insert(topRow); var leftPrnBtn = Object.create(Button); delBtn.init('(', 'top-btn-container_lprn-btn', function () { this.insertOperation('('); }.bind(this)); delBtn.insert(topRow); var leftPrnBtn = Object.create(Button); delBtn.init(')', 'top-btn-container_rprn-btn', function () { this.insertOperation(')'); }.bind(this)); delBtn.insert(topRow); var _loop = function _loop(number) { numBtn = Object.create(Button); // Must bind to 'this' to retain context when // passing the 'insertNumber' function numBtn.init(number, 'num-btn-container_num-btn', function () { this.insertOperation(number); }.bind(_this)); numBtn.insert(numRow); }; for (var number = 9; number >= 0; number--) { var numBtn; _loop(number); } var _loop2 = function _loop2(operator) { opBtn = Object.create(Button); opBtn.init(_this._operators[operator], 'op-btn-container_op-btn', function () { this.insertOperation(this._operators[operator]); }.bind(_this)); opBtn.insert(opsRow); }; for (var operator = 0; operator < this._operators.length; operator++) { var opBtn; _loop2(operator); } var decBtn = Object.create(Button); decBtn.init('.', 'num-btn-container_num-btn', function () { this.insertOperation('.'); }.bind(this)); decBtn.insert(numRow); var eqBtn = Object.create(Button); eqBtn.init('=', 'num-btn-container_num-btn', function () { this.evaluateExpression(); }.bind(this)); eqBtn.insert(numRow); }, insertOperation: function insertOperation(op) { if (this._lastEntered === '=' && this._operators.indexOf(op) === -1) { this._expression = ''; } this._expression += op; this._lastEntered = op; this._updateDisplay(); }, evaluateExpression: function evaluateExpression() { this._lastEntered = '='; var evaluator = Object.create(Evaluator); this._expression = evaluator.parse(this._expression).toString(); this._updateDisplay(); }, clearDisplay: function clearDisplay() { this._expression = ''; this._updateDisplay(); }, deleteLast: function deleteLast() { console.log('deleting last'); this._expression = this._expression.slice(0, -1); this._updateDisplay(); }, _updateDisplay: function _updateDisplay() { var display = document.getElementById('display'); display.innerHTML = this._expression; }
};
var calc = Object.create(Calculator);
calc.create();
// Recursive Descent Math Expression Parser
// Modeled on and borrows heavily from
// http://stackoverflow.com/questions/3422673/evaluating-a-math-expression-given-in-string-form
var Evaluator = { position: -1, char: '', string: '', parse: function parse(stringExpression) { this.string = stringExpression; console.log(this.string); this.nextChar(); var result = this.parseExpression(); // If returned before reaching the end of the string, // unexpected character encountered if (this.position < this.string.length) { throw "Unexpected character: " + this.char; } return result; }, // Top-level, checks for + & - operators parseExpression: function parseExpression() { var expression = this.parseTerm(); // Loop to catch multiple +/- operators while (true) { if (this.isCharMatch('+')) { expression += this.parseTerm(); } else if (this.isCharMatch('-')) { expression -= this.parseTerm(); } else { return expression; } } }, // Middle-level, checks for * & / operators parseTerm: function parseTerm() { var terms = this.parseFactor(); while (true) { if (this.isCharMatch('*')) { terms *= this.parseFactor(); } else if (this.isCharMatch('/')) { terms /= this.parseFactor(); } else { return terms; } } }, // Bottom-level, checks for (), numbers, and other high // priority orders (according to PEMDAS); parseFactor: function parseFactor() { // Unary + & - operators if (this.isCharMatch('-')) { -this.parseFactor(); } else if (this.isCharMatch('+')) { +this.parseFactor; } var startPosition = this.position; var result; // First check for parentheses, and if found complete entire // expression as separate, moving on when completed // Otherwise, check for number // If nothing valid found, throw error, as this is the bottom level if (this.isCharMatch('(')) { result = this.parseExpression(); this.isCharMatch(')'); } else if (this.char.search(/[0-9\.]/gi) !== -1) { while (this.char.search(/[0-9\.]/gi) !== -1) { this.nextChar(); result = parseFloat(this.string.substring(startPosition, this.position)); } } else { // Handles any unaccounted for characters throw "Unexpected character: " + this.char; } return result; }, nextChar: function nextChar() { this.char = ++this.position < this.string.length ? this.string.charAt(this.position) : ''; }, // Matches the character and returns true or false // Skips any spaces // Moves to next character if a match isCharMatch: function isCharMatch(char) { while (this.char === ' ') { this.nextChar(); } if (this.char === char) { this.nextChar(); return true; } return false; }
};
OOLO Calculator - Vanilla JS - Script Codes
OOLO Calculator - Vanilla JS - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 5,734 Kb
Views 8,096
Do you need developer help for OOLO Calculator - Vanilla JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zac Clemans (thalpha) Script Codes
Name
Recipe Box Redux Refactor
FCC Camper Leaderboard Redux Refactor
D3 Scatterplot Project
Local Weather App
Random Chuck Norris Joke Generator
Hero arrow test
FCC Camper Leaderboard
D3 Heatmap Project
Local Weather App - Refactor
Simon Says
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!