/* our beloved variables */ let buffer = ''; let operator = ''; let workBuffer = ''; let oldBackgroundColor = ''; let buttonArray = []; const container = document.querySelector("#container"); /* make header */ const header = document.createElement('h1'); header.textContent = "Calculator"; header.setAttribute('id', 'header'); container.appendChild(header); /* make results div */ const results = document.createElement('div'); results.textContent = buffer; results.setAttribute ('id', 'results'); container.appendChild(results); /* eye candy for buttons */ function highlightCell() { oldBackgroundColor = this.style.backgroundColor; this.style.backgroundColor = 'darkgray'; } function normalizeCell() { this.style.backgroundColor = oldBackgroundColor; } /* make grid */ const theGrid = document.createElement('div'); theGrid.setAttribute('id', 'theGrid'); for (i = 0; i < 20; i++) { const button = document.createElement('div'); button.addEventListener('mouseenter', highlightCell); button.addEventListener('mouseleave', normalizeCell); button.setAttribute('id', 'button'+i); theGrid.appendChild(button); buttonArray.push(button); } container.appendChild(theGrid); /* ez pz refresh function */ function refresh() { results.textContent = buffer; } /* cheater function for below */ function clear() { operator = ''; workBuffer = ''; refresh(); } /* determine results */ function resolve() { switch(operator) { case "/" : buffer = workBuffer / buffer; clear(); break; case "*" : buffer = workBuffer * buffer; clear(); break; case "+" : buffer = parseFloat(workBuffer) + parseFloat(buffer); clear(); break; case "-" : buffer = workBuffer - buffer; clear(); break; case "SQRT": buffer = Math.sqrt(parseFloat(buffer)); clear(); break; } } /* the actual calculator */ function operate(string) { switch(string) { case "." : if ((buffer.includes(string)) === false) { buffer += string; refresh(); } break; case "*" : case "/" : case "+" : case "-" : if (operator === '') { operator = string; workBuffer = buffer; buffer = ''; } else { resolve(); operator = string; workBuffer = buffer; buffer = ''; } break; case "=" : resolve(); break; case "DEL" : buffer = buffer.substring(0, buffer.length - 1); refresh(); break; case "SQRT" : operator = string; resolve(); break; case "CLR" : buffer = ''; workBuffer = ''; operator = ''; refresh(); break; case "NEG" : if (buffer.charAt(0) != "-") { buffer = "-" + buffer; refresh(); } else { buffer = buffer.substring(1, buffer.length); refresh(); } break; default : buffer += string; refresh(); break; } } /* assign our buttons */ const button0 = document.querySelector("#button0"); button0.textContent = "SQRT"; const button1 = document.querySelector("#button1"); button1.textContent = "CLR"; const button2 = document.querySelector("#button2"); button2.textContent = "DEL"; const button3 = document.querySelector("#button3"); button3.textContent = "/"; const button4 = document.querySelector("#button4"); button4.textContent = "7"; const button5 = document.querySelector("#button5"); button5.textContent = "8"; const button6 = document.querySelector("#button6"); button6.textContent = "9"; const button7 = document.querySelector("#button7"); button7.textContent = "*"; const button8 = document.querySelector("#button8"); button8.textContent = "4"; const button9 = document.querySelector("#button9"); button9.textContent = "5"; const button10 = document.querySelector("#button10"); button10.textContent = "6"; const button11 = document.querySelector("#button11"); button11.textContent = "-"; const button12 = document.querySelector("#button12"); button12.textContent = "1"; const button13 = document.querySelector("#button13"); button13.textContent = "2"; const button14 = document.querySelector("#button14"); button14.textContent = "3"; const button15 = document.querySelector("#button15"); button15.textContent = "+"; const button16 = document.querySelector("#button16"); button16.textContent = "NEG"; const button17 = document.querySelector("#button17"); button17.textContent = "0"; const button18 = document.querySelector("#button18"); button18.textContent = "."; const button19 = document.querySelector("#button19"); button19.textContent = "="; /* assign listeners to buttons */ buttonArray.forEach (function (element) { element.addEventListener('click', function() { operate(element.textContent); }) }); /* same thing as above but for keypresses */ function keyboardEntry(key) { switch (key) { case "Enter" : operate("="); break; case "Backspace" : operate("DEL"); break; case "Delete" : operate("CLR"); break; case "1" : case "2" : case "3" : case "4" : case "5" : case "6" : case "7" : case "8" : case "9" : case "0" : case "+" : case "-" : case "/" : case "*" : case "." : operate(key); break; } } /* listen for keyboard presses */ document.addEventListener("keydown", function(event) { event.preventDefault(); keyboardEntry(event.key); });