Calculator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_193":194,"_195":196},"routes/_app.x.$handle.$name",{"_95":94,"_32":44,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","styles.css","latestPath","fileId","e1bcea4c-f8e4-11f0-9ee6-42dde27851f2","name","fileType","content","@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 width: 400px;\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}","@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: 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}","createdAt",["D",1769232600187],"branchVersion","branchId","12b0baee-f8e4-11f0-8c2d-42dde27851f2","id","12b055b8-f8e4-11f0-8c2d-42dde27851f2","JSCalculatorExercise",["D",1769231889821],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","22de98d0-1a98-11f0-b6b4-8dd629af732f","pinnedFileId","12b3b320-f8e4-11f0-8c2d-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","f1a011d2-6ff0-48b1-ae7d-0aba81b3ea1d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",31,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","foliage","handle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2e848b6c-a955-453d-dc89-6c494681cc00/square512?exp=1789574399&sig=baa92127180163b17404d7f32f56f283929985b4dfda9aa502068376d9ebfbe5","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":189,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":190,"_79":191,"_81":192,"_83":25},"tree",[172,173,174,175],"files",[172,173,174,175],"counts",{"_161":61,"_162":163,"_164":61,"_165":166,"_167":168},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":153,"_32":154,"_30":155,"_130":-5,"_40":41,"_39":156,"_131":25,"_37":157,"_13":158,"_33":20,"_34":159,"_24":25,"_134":-5,"_27":160},{"_42":145,"_32":146,"_30":55,"_130":-5,"_40":41,"_39":147,"_131":57,"_37":148,"_13":141,"_33":149,"_34":150,"_24":25,"_134":151,"_27":152},{"_42":136,"_32":137,"_30":138,"_130":-5,"_40":41,"_39":139,"_131":57,"_37":140,"_13":141,"_33":142,"_34":143,"_24":25,"_134":-5,"_27":144},{"_42":129,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_131":25,"_37":132,"_13":133,"_33":20,"_34":36,"_24":25,"_134":-5,"_27":135},"ba1b388a-f8e5-11f0-b31d-42dde27851f2","parentId","latest",["D",1769232600187],5,"label",[28],"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}",[137],"1dd8a160-f8e5-11f0-994b-42dde27851f2","main.ts",15,["D",1769232338032],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);","cutecalculator",[146],"a63444c0-f8e4-11f0-8820-42dde27851f2","index.html","8d848282-f8e4-11f0-938f-42dde27851f2",6,["D",1769232137300],3,"\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",[154],"pulls","branches",1,"forks","envVars",{"_169":61,"_171":61},"connections",{"_169":61,"_170":61},"count","unfilledCount","emptyCount",{"_42":153,"_32":154,"_30":155,"_130":-5,"_40":41,"_39":156,"_131":25,"_37":186,"_13":158,"_33":20,"_34":159,"_24":25,"_134":-5,"_177":187,"_27":188},{"_42":145,"_32":146,"_30":55,"_130":-5,"_40":41,"_39":147,"_131":57,"_37":183,"_13":141,"_33":149,"_34":150,"_24":25,"_134":151,"_177":184,"_27":185},{"_42":136,"_32":137,"_30":138,"_130":-5,"_40":41,"_39":139,"_131":57,"_37":180,"_13":141,"_33":142,"_34":143,"_24":25,"_134":-5,"_177":181,"_27":182},{"_42":129,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_131":25,"_37":176,"_13":133,"_33":20,"_34":36,"_24":25,"_134":-5,"_177":178,"_27":179},["D",1769232600187],"children",[],[28],["D",1769232228359],[],[137],["D",1769232338032],[],[146],["D",1769232137300],[],[154],["D",1769231889821],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":25},{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":226,"_227":228,"_229":230,"_231":25,"_232":25,"_233":25,"_234":57,"_235":-5,"_236":-7,"_237":-7,"_238":61,"_239":25,"_240":25,"_241":-5,"_242":25,"_243":25,"_244":25,"_245":-5},"ENV",{"_197":198,"_199":200,"_201":85,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225},"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"]

Diff · v16