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",[],[158],{"_105":178,"_96":100,"_159":179,"_161":-5,"_162":144,"_163":180,"_165":181,"_107":182,"_101":183,"_168":184,"_170":185,"_172":22,"_173":186,"_174":187,"_99":188},"1dd8a160-f8e5-11f0-994b-42dde27851f2","12b3b320-f8e4-11f0-8c2d-42dde27851f2",15,true,["D",1769232338032],2,"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);","cutecalculator",[],[100],{"_105":190,"_96":191,"_159":192,"_161":-5,"_162":144,"_163":193,"_165":181,"_107":194,"_101":183,"_168":195,"_170":196,"_172":22,"_173":-5,"_174":197,"_99":198},"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}",[],[191],{"_105":200,"_96":201,"_159":202,"_161":-5,"_162":144,"_163":102,"_165":22,"_107":203,"_101":164,"_168":169,"_170":204,"_172":22,"_173":-5,"_174":205,"_99":206},"d351bc48-f8e5-11f0-94ad-42dde27851f2","styles.css","e1bcea4c-f8e4-11f0-9ee6-42dde27851f2",["D",1769232642493],"@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: calc(1vh - 1em);\n margin: 1em 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}",[],[201],"files",[156,177,189,199],"counts",{"_211":32,"_212":213,"_214":32,"_215":216,"_219":220},"pulls","branches",1,"forks","envVars",{"_217":32,"_218":32},"count","emptyCount","connections",{"_217":32,"_221":32},"unfilledCount","contents",[],{"_105":178,"_96":100,"_159":179,"_161":-5,"_162":144,"_163":180,"_165":181,"_107":225,"_101":183,"_168":184,"_170":185,"_172":22,"_173":186,"_99":226},["D",1769232338032],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":235,"_154":240,"_207":253,"_169":254,"_222":256,"_257":-5,"_258":-5,"_259":-5,"_260":-5,"_261":262,"_215":-5},{"_105":106,"_96":97,"_107":236,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":-5,"_120":32,"_16":121,"_122":-5,"_123":-5,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":237,"_136":238,"_141":239,"_153":22},["D",1769231889821],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115,"_139":140},{"_101":143,"_96":44,"_105":144,"_145":106,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":97,"_152":95},[241,244,247,250],{"_105":157,"_96":158,"_159":160,"_161":-5,"_162":144,"_163":164,"_165":22,"_107":166,"_101":167,"_168":169,"_170":171,"_172":22,"_173":-5,"_174":242,"_99":243},[],[158],{"_105":178,"_96":100,"_159":179,"_161":-5,"_162":144,"_163":180,"_165":181,"_107":182,"_101":183,"_168":184,"_170":185,"_172":22,"_173":186,"_174":245,"_99":246},[],[100],{"_105":190,"_96":191,"_159":192,"_161":-5,"_162":144,"_163":193,"_165":181,"_107":194,"_101":183,"_168":195,"_170":196,"_172":22,"_173":-5,"_174":248,"_99":249},[],[191],{"_105":200,"_96":201,"_159":202,"_161":-5,"_162":144,"_163":102,"_165":22,"_107":203,"_101":164,"_168":169,"_170":204,"_172":22,"_173":-5,"_174":251,"_99":252},[],[201],[241,244,247,250],{"_105":178,"_96":100,"_159":179,"_161":-5,"_162":144,"_163":180,"_165":181,"_107":225,"_101":183,"_168":184,"_170":185,"_172":22,"_173":186,"_99":255},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

foliage

calculatorJSExercise