commit ee3ad076faf65aa4e302e44c2d0ada97d3a80a69 Author: ak Date: Thu May 4 12:12:25 2023 -0700 final diff --git a/README.md b/README.md new file mode 100644 index 0000000..ea33d2b --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# js-calculator + +Simple calculator made in ES6 Javascript diff --git a/index.html b/index.html new file mode 100644 index 0000000..271f1d0 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + Calculator + + +
+
+ +
+ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..7b3b1fa --- /dev/null +++ b/main.js @@ -0,0 +1,218 @@ +/* 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); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..59ff9ee --- /dev/null +++ b/style.css @@ -0,0 +1,61 @@ +*{ + padding: 0; + margin: 0; + background-color: rgb(35, 35, 35); + font-family: Helvetica; +} + +#header { + padding-top: 10px; + padding-bottom: 10px; +} + +#header, #results { + color: white; +} + +#header, #theGrid { + width: 350px; +} + +#results { + width: 334px; + font-family: monospace; + font-size: 28px; + text-align: left; + font-weight: bolder; + border: 2px solid white; + height: 50px; + margin-left: 5px; + margin-right: 5px; + padding-left: 5px; + padding-right: 5px; +} + +#theGrid { + display: grid; + height: 350px; + grid-template-rows: repeat(5, auto); + grid-template-columns: repeat(4, 1fr); +} + +[id^="button"] { + border-width: 1px; + color: white; + border: 1px solid rgb(35, 35, 35); + display: flex; + align-items: center; + justify-content: center; +} + +#button0, #button1, #button2, #button3, #button7, #button11, #button15 { + background-color: rgb(20, 20, 20); +} + +#button4, #button5, #button6, #button8, #button9, #button10, #button12, #button13, #button14, #button16, #button17, #button18 { + background-color: rgb(7, 7, 7); +} + +#button19 { + background-color: rgb(51, 50, 49); +} \ No newline at end of file