Calculator

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n","deleted","label","children",[],[159],{"_104":179,"_97":180,"_160":116,"_162":-5,"_163":145,"_164":181,"_166":118,"_106":182,"_101":183,"_169":184,"_171":185,"_173":22,"_174":186,"_175":187,"_100":188},"1dd8a160-f8e5-11f0-994b-42dde27851f2","main.ts",15,["D",1769232338032],2,"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);","cutecalculator",[],[180],{"_104":190,"_97":191,"_160":192,"_162":-5,"_163":145,"_164":144,"_166":118,"_106":193,"_101":194,"_169":170,"_171":195,"_173":22,"_174":-5,"_175":196,"_100":197},"a89961ca-0adf-11f1-a8a5-42dde27851f2","robots.txt","814bd8fa-0adf-11f1-84d0-42dde27851f2",["D",1771209114767],3,"User-agent: *\nDisallow: /",[],[191],{"_104":199,"_97":200,"_160":201,"_162":-5,"_163":145,"_164":202,"_166":118,"_106":203,"_101":183,"_169":204,"_171":205,"_173":22,"_174":-5,"_175":206,"_100":207},"dc79d360-f8e4-11f0-8860-42dde27851f2","script.js","a895b15e-f8e4-11f0-a0b2-42dde27851f2",9,["D",1769232228359],"script","const MAX_DIGIT = 12;\n\nconst display = document.querySelector(\".display\");\nlet displayValue = \"\";\n\nconst numberButtons = document.querySelectorAll(\".number\");\nnumberButtons.forEach((button) => {\n button.addEventListener(\"click\", () => {\n if (\n (displayValue.includes(\".\") && button.value == \".\") ||\n (displayValue == \"0\" && button.value == \"0\")\n ) {\n return;\n }\n updateDisplay(button.value);\n assignOperand();\n });\n});\n\nconst backspaceButton = document.querySelector(\".backspace\");\nbackspaceButton.addEventListener(\"click\", () => {\n let previousDisplayValue = displayValue;\n displayValue = \"\";\n updateDisplay(previousDisplayValue.slice(0, -1));\n assignOperand();\n});\n\nconst operatorButtons = document.querySelectorAll(\".operator\");\n\n// When one of the operator buttons is clicked:\n// 1. Assign the button value to `operator` variable\n// 2. Reset displayValue variable for num2 input\n// 3. If chain operation (e.g. 1 + 2 + ...):\n// calculate the previous pair of number\noperatorButtons.forEach((button) => {\n button.addEventListener(\"click\", () => {\n if (operator !== \"\" && num2 !== null) {\n calculate();\n }\n\n operator = button.value;\n displayValue = \"\";\n });\n});\n\nlet result = 0;\nconst equalsButton = document.querySelector(\".equals\");\nequalsButton.addEventListener(\"click\", () => {\n if (operator == \"divide\" && num2 === 0) {\n alert(\"LOL this user's trying to divide by zero 🫵😆\");\n return;\n }\n calculate();\n\n // Reset `operator` value only if calculate() is called\n // by the equals button,\n // not by operator button on chain operation\n operator = \"\";\n});\n\nconst clearButton = document.querySelector(\".clear\");\nclearButton.addEventListener(\"click\", () => {\n num1 = null;\n num2 = null;\n operator = \"\";\n displayValue = \"\";\n display.textContent = \"0\";\n});\n\nfunction assignOperand(number = parseFloat(displayValue)) {\n if (!operator) {\n num1 = number;\n } else {\n num2 = number;\n }\n}\n\nfunction calculate() {\n // 1. Call operate()\n // 2. Update display with operation result\n // 3. Assign the result to `num1` for next operation\n // (Will be used if user click operator button\n // but will be overwritten if user clicks\n // number button before operator button)\n // 4. Reset `num2` variable\n result = operate(num1, operator, num2);\n\n // So that the result appear on its own,\n // not appended to the second operand (num2)\n displayValue = \"\";\n\n updateDisplay(result);\n num1 = parseFloat(displayValue);\n num2 = null;\n\n // To allow starting new operation\n // without clicking the clear button\n displayValue = \"\";\n}\n\nfunction updateDisplay(input) {\n if (displayValue.length < MAX_DIGIT) {\n if (displayValue == \"0\" && input != \".\") {\n displayValue = input;\n } else {\n displayValue += input;\n }\n }\n display.textContent = `${displayValue || \"0\"}`;\n}\n\nfunction add(a, b) {\n return a + b;\n}\n\nfunction subtract(a, b) {\n return a - b;\n}\n\nfunction multiply(a, b) {\n return a * b;\n}\n\nfunction divide(a, b) {\n return a / b;\n}\n\nlet num1 = null;\nlet operator = \"\";\nlet num2 = null;\n\nfunction operate(num1, operator, num2) {\n let operationResult;\n\n switch (operator) {\n case \"add\":\n operationResult = add(num1, num2);\n break;\n\n case \"subtract\":\n operationResult = subtract(num1, num2);\n break;\n\n case \"multiply\":\n operationResult = multiply(num1, num2);\n break;\n\n case \"divide\":\n operationResult = divide(num1, num2);\n break;\n }\n\n return roundToMaxDigit(operationResult);\n}\n\nfunction roundToMaxDigit(number) {\n let stringResult = number.toString();\n let intLength = (Math.round(number)).toString().length;\n if (stringResult.length > MAX_DIGIT) {\n if (intLength > MAX_DIGIT) {\n return number.toExponential(MAX_DIGIT - 6);\n } else if (intLength == MAX_DIGIT) {\n return Math.round(number);\n }\n return number.toFixed((MAX_DIGIT - 1) - intLength);\n }\n return number;\n}",[],[200],{"_104":209,"_97":210,"_160":211,"_162":-5,"_163":145,"_164":212,"_166":118,"_106":213,"_101":214,"_169":170,"_171":215,"_173":22,"_174":-5,"_175":216,"_100":217},"471ba1b6-f8e6-11f0-9f9c-42dde27851f2","styles.css","e1bcea4c-f8e4-11f0-9ee6-42dde27851f2",22,["D",1769232836755],11,"@import url(\"https://fonts.googleapis.com/css2?&family=Monomaniac+One&display=swap\");\n\nbody {\n background-color: hsl(19, 100%, 95%);\n}\n\n.calculator {\n max-width: 400px;\n /* height: 1vh; */\n margin: auto;\n padding: 30px;\n border: 4px solid #9d8189;\n border-radius: 20px;\n background-color: #d8e2dc;\n color: hsl(343, 13%, 40%);\n box-sizing: border-box;\n}\n\n.display {\n font-family: \"Monomaniac One\", monospace;\n font-size: 48px;\n margin-bottom: 25px;\n padding-top: 30px;\n padding-left: 5px;\n padding-right: 5px;\n border: 3px solid #9d8189;\n border-radius: 10px;\n height: 100px;\n background-color: hsl(19, 100%, 95%);\n text-align: right;\n box-sizing: border-box;\n}\n\n.button-container {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n padding: 2px;\n}\n\nbutton {\n font-family: sans-serif;\n font-size: 30px;\n background-color: #ffe5d9;\n color: hsl(343, 13%, 40%);\n border: 2px solid #9d8189;\n border-radius: 10px;\n width: 72px;\n height: 72px;\n flex: 1 1 20%;\n}\n\n.operator, .equals {\n background-color: #ffcad4;\n}",[],[210],"files",[157,178,189,198,208],"counts",{"_222":33,"_223":224,"_225":33,"_226":227,"_230":231},"pulls","branches",1,"forks","envVars",{"_228":33,"_229":33},"count","emptyCount","connections",{"_228":33,"_232":33},"unfilledCount","contents",[235,238,241,244,247],{"_104":158,"_97":159,"_160":161,"_162":-5,"_163":145,"_164":165,"_166":118,"_106":236,"_101":168,"_169":170,"_171":172,"_173":22,"_174":-5,"_100":237},["D",1769638782250],[159],{"_104":179,"_97":180,"_160":116,"_162":-5,"_163":145,"_164":181,"_166":118,"_106":239,"_101":183,"_169":184,"_171":185,"_173":22,"_174":186,"_100":240},["D",1769232338032],[180],{"_104":190,"_97":191,"_160":192,"_162":-5,"_163":145,"_164":144,"_166":118,"_106":242,"_101":194,"_169":170,"_171":195,"_173":22,"_174":-5,"_100":243},["D",1771209114767],[191],{"_104":199,"_97":200,"_160":201,"_162":-5,"_163":145,"_164":202,"_166":118,"_106":245,"_101":183,"_169":204,"_171":205,"_173":22,"_174":-5,"_100":246},["D",1769232228359],[200],{"_104":209,"_97":210,"_160":211,"_162":-5,"_163":145,"_164":212,"_166":118,"_106":248,"_101":214,"_169":170,"_171":215,"_173":22,"_174":-5,"_100":249},["D",1769232836755],[210],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_95":96,"_97":98,"_99":-7,"_101":-7,"_102":258,"_233":263,"_274":-7,"_275":-5,"_276":-5,"_218":277,"_293":281,"_294":-5,"_295":-5,"_296":22,"_297":22},{"_104":105,"_97":98,"_106":259,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":-5,"_124":-5,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":260,"_137":261,"_142":262,"_154":22},["D",1769231889821],{"_95":96,"_135":136},{"_95":96,"_139":136,"_14":114,"_140":141},{"_101":144,"_97":45,"_104":145,"_146":105,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":98,"_153":96},[264,266,268,270,272],{"_104":158,"_97":159,"_160":161,"_162":-5,"_163":145,"_164":165,"_166":118,"_106":236,"_101":168,"_169":170,"_171":172,"_173":22,"_174":-5,"_100":265},[159],{"_104":179,"_97":180,"_160":116,"_162":-5,"_163":145,"_164":181,"_166":118,"_106":239,"_101":183,"_169":184,"_171":185,"_173":22,"_174":186,"_100":267},[180],{"_104":190,"_97":191,"_160":192,"_162":-5,"_163":145,"_164":144,"_166":118,"_106":242,"_101":194,"_169":170,"_171":195,"_173":22,"_174":-5,"_100":269},[191],{"_104":199,"_97":200,"_160":201,"_162":-5,"_163":145,"_164":202,"_166":118,"_106":245,"_101":183,"_169":204,"_171":205,"_173":22,"_174":-5,"_100":271},[200],{"_104":209,"_97":210,"_160":211,"_162":-5,"_163":145,"_164":212,"_166":118,"_106":248,"_101":214,"_169":170,"_171":215,"_173":22,"_174":-5,"_100":273},[210],"readme","upstream","pull",[278,281,284,287,290],{"_104":158,"_97":159,"_160":161,"_162":-5,"_163":145,"_164":165,"_166":118,"_106":167,"_101":168,"_169":170,"_171":172,"_173":22,"_174":-5,"_175":279,"_100":280},[],[159],{"_104":179,"_97":180,"_160":116,"_162":-5,"_163":145,"_164":181,"_166":118,"_106":182,"_101":183,"_169":184,"_171":185,"_173":22,"_174":186,"_175":282,"_100":283},[],[180],{"_104":190,"_97":191,"_160":192,"_162":-5,"_163":145,"_164":144,"_166":118,"_106":193,"_101":194,"_169":170,"_171":195,"_173":22,"_174":-5,"_175":285,"_100":286},[],[191],{"_104":199,"_97":200,"_160":201,"_162":-5,"_163":145,"_164":202,"_166":118,"_106":203,"_101":183,"_169":204,"_171":205,"_173":22,"_174":-5,"_175":288,"_100":289},[],[200],{"_104":209,"_97":210,"_160":211,"_162":-5,"_163":145,"_164":212,"_166":118,"_106":213,"_101":214,"_169":170,"_171":215,"_173":22,"_174":-5,"_175":291,"_100":292},[],[210],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

foliage

JSCalculatorExercise