Last active
June 5, 2019 22:25
-
-
Save gitKrystan/8e1a11cde36321a3d34e23e89f77123c to your computer and use it in GitHub Desktop.
Vanilla Javascript calculator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title> Calculator </title> | |
| <script src="scripts.js"></script> | |
| </head> | |
| <body> | |
| <h1>Calculator</h1> | |
| <p id="display">0</p> | |
| <div id="calculator"> | |
| <!-- Buttons are added programmatically --> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.addEventListener('DOMContentLoaded', (event) => { | |
| const calculatorEl = document.getElementById('calculator'); | |
| const displayEl = document.getElementById('display'); | |
| const UNINITIALIZED = null; | |
| let currentValue = displayEl.value || UNINITIALIZED; | |
| let valueStack = []; | |
| let currentOperation = UNINITIALIZED; | |
| [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function(n) { | |
| calculatorEl.insertAdjacentHTML( | |
| 'beforeend', | |
| `<button class="number" value="${n}">${n}</button>` | |
| ); | |
| }); | |
| document.querySelectorAll('.number').forEach(function(el) { | |
| el.addEventListener('click', handleNumberClick); | |
| }); | |
| ['+', '-', '*', '/', '='].forEach(function(o) { | |
| calculatorEl.insertAdjacentHTML( | |
| 'beforeend', | |
| `<button class="operation" value="${o}">${o}</button>` | |
| ); | |
| }); | |
| document.querySelectorAll('.operation').forEach(function(el) { | |
| el.addEventListener('click', handleOperationClick); | |
| }); | |
| function handleNumberClick(event) { | |
| const number = event.target.value; | |
| currentValue = parseInt((currentValue || '') + number, 10); | |
| displayEl.innerText = currentValue; | |
| // FIXME: if current op is UNINITIALIZED, clear stack? | |
| } | |
| function handleOperationClick(event){ | |
| let operation = event.target.value; | |
| if (currentValue != UNINITIALIZED) { | |
| valueStack.push(currentValue); | |
| if (currentOperation) { | |
| let newValue = OPERATIONS[currentOperation](valueStack); | |
| valueStack = [newValue]; | |
| displayEl.innerText = newValue; | |
| } | |
| } | |
| currentValue = UNINITIALIZED; | |
| if (operation === '=') { | |
| currentOperation = UNINITIALIZED; | |
| } else { | |
| currentOperation = operation; | |
| } | |
| console.log(valueStack); | |
| console.log(currentOperation); | |
| } | |
| }); | |
| const OPERATIONS = { | |
| '+': function(stack) { | |
| return stack[0] + stack[1]; | |
| }, | |
| '-': function(stack) { | |
| return stack[0] - stack[1]; | |
| }, | |
| '*': function(stack) { | |
| return stack[0] * stack[1]; | |
| }, | |
| '/': function(stack) { | |
| return stack[0] / stack[1]; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment