Calculator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_204":205,"_206":207},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_155":-5,"_20":156,"_22":157,"_158":159,"_160":161,"_26":162,"_24":163,"_164":-5,"_165":-5,"_166":51,"_167":168,"_169":43,"_170":-5,"_171":-5,"_172":173},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","foliage","name","JSCalculatorExercise","branchName","main","version","path","index.html","project",{"_33":101,"_13":14,"_44":102,"_103":-5,"_104":51,"_105":106,"_107":106,"_108":-5,"_109":-5,"_110":111,"_112":90,"_113":43,"_114":-5,"_115":-5,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_133":134,"_135":136,"_137":138,"_139":51},"tree",[54,55,56,57,58],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","717a9ef8-fc97-11f0-8609-42dde27851f2","fileId","8d848282-f8e4-11f0-938f-42dde27851f2","parentId","branchId","12b0baee-f8e4-11f0-8c2d-42dde27851f2","branchVersion",23,"latest",true,"createdAt",["D",1769638782250],4,"fileType","content","\n\n \n \n \n \n \n \n Calculator\n \n \n

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

\n \n","deleted",false,"label",[19],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":98,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_66":99,"_18":100},{"_33":88,"_13":89,"_35":90,"_37":-5,"_38":39,"_40":91,"_42":43,"_44":92,"_17":74,"_47":93,"_48":94,"_50":51,"_52":95,"_66":96,"_18":97},{"_33":79,"_13":80,"_35":81,"_37":-5,"_38":39,"_40":82,"_42":43,"_44":83,"_17":84,"_47":24,"_48":85,"_50":51,"_52":-5,"_66":86,"_18":87},{"_33":69,"_13":70,"_35":71,"_37":-5,"_38":39,"_40":72,"_42":43,"_44":73,"_17":74,"_47":75,"_48":76,"_50":51,"_52":-5,"_66":77,"_18":78},{"_33":59,"_13":60,"_35":61,"_37":-5,"_38":39,"_40":62,"_42":43,"_44":63,"_17":64,"_47":24,"_48":65,"_50":51,"_52":-5,"_66":67,"_18":68},"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}","children",[],[60],"dc79d360-f8e4-11f0-8860-42dde27851f2","script.js","a895b15e-f8e4-11f0-a0b2-42dde27851f2",9,["D",1769232228359],2,"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}",[],[70],"a89961ca-0adf-11f1-a8a5-42dde27851f2","robots.txt","814bd8fa-0adf-11f1-84d0-42dde27851f2",31,["D",1771209114767],3,"User-agent: *\nDisallow: /",[],[80],"1dd8a160-f8e5-11f0-994b-42dde27851f2","main.ts","12b3b320-f8e4-11f0-8c2d-42dde27851f2",15,["D",1769232338032],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);","cutecalculator",[],[89],["D",1769638782250],[],[19],"12b055b8-f8e4-11f0-8c2d-42dde27851f2",["D",1769231889821],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","22de98d0-1a98-11f0-b6b4-8dd629af732f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f1a011d2-6ff0-48b1-ae7d-0aba81b3ea1d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_154":150},"org",{"_11":12,"_148":-5,"_149":150,"_110":111,"_151":152,"_153":51},"branch",{"_17":82,"_13":16,"_33":39,"_140":101,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":14,"_147":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2e848b6c-a955-453d-dc89-6c494681cc00/square512?exp=1789541999&sig=19bd56695d61c41edafcfb081189c79a10ee2f055ca9131022f634e0731879f4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":101,"_13":14,"_44":200,"_103":-5,"_104":51,"_105":106,"_107":106,"_108":-5,"_109":-5,"_110":111,"_112":90,"_113":43,"_114":-5,"_115":-5,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_133":201,"_135":202,"_137":203,"_139":51},[185,186,187,188,189],"files",[185,186,187,188,189],"counts",{"_175":117,"_176":177,"_178":117,"_32":179,"_180":181},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":174},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches",1,"forks",{"_182":117,"_184":117},"connections",{"_182":117,"_183":117},"count","unfilledCount","emptyCount",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":98,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_66":198,"_18":199},{"_33":88,"_13":89,"_35":90,"_37":-5,"_38":39,"_40":91,"_42":43,"_44":92,"_17":74,"_47":93,"_48":94,"_50":51,"_52":95,"_66":196,"_18":197},{"_33":79,"_13":80,"_35":81,"_37":-5,"_38":39,"_40":82,"_42":43,"_44":83,"_17":84,"_47":24,"_48":85,"_50":51,"_52":-5,"_66":194,"_18":195},{"_33":69,"_13":70,"_35":71,"_37":-5,"_38":39,"_40":72,"_42":43,"_44":73,"_17":74,"_47":75,"_48":76,"_50":51,"_52":-5,"_66":192,"_18":193},{"_33":59,"_13":60,"_35":61,"_37":-5,"_38":39,"_40":62,"_42":43,"_44":63,"_17":64,"_47":24,"_48":65,"_50":51,"_52":-5,"_66":190,"_18":191},[],[60],[],[70],[],[80],[],[89],[],[19],["D",1769231889821],{"_11":12,"_154":150},{"_11":12,"_148":-5,"_149":150,"_110":111,"_151":152,"_153":51},{"_17":82,"_13":16,"_33":39,"_140":101,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":14,"_147":12},"ctx",{"_133":-5,"_171":237,"_238":239,"_240":241,"_242":51,"_243":51,"_244":51,"_245":43,"_246":-5,"_247":-7,"_248":-7,"_249":117,"_250":51,"_251":51,"_252":-5,"_253":51,"_254":51,"_255":51,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":16,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]