\n \n \n \n",[],[157,195],"6f257549-14df-4201-a9bc-b2c50054425c","favicon.svg","019f8608-dc16-760f-9b8a-883f5617708d",["D",1784660155314],"\n",[],[157,203],"b39aace3-357e-418f-a295-703a6cf6d223","App.tsx","019f8608-dc15-77ae-8269-2ab047ad54f3","019f8608-dc16-760f-9b8a-850e09850927",2,["D",1784660293013],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [bill, setBill] = useState(\"\");\n const [tipPercent, setTipPercent] = useState(18);\n const [people, setPeople] = useState(1);\n\n const billValue = parseFloat(bill) || 0;\n\n const { tipAmount, total, perPerson } = useMemo(() => {\n const tip = billValue * (tipPercent / 100);\n const totalAmount = billValue + tip;\n const numPeople = Math.max(1, people);\n return {\n tipAmount: tip,\n total: totalAmount,\n perPerson: totalAmount / numPeople,\n };\n }, [billValue, tipPercent, people]);\n\n const presets = [10, 15, 18, 20, 25];\n\n return (\n

Tip calculator

\n\n \n Bill amount\n \n

\n $\n setBill(e.target.value)}\n placeholder=\"0.00\"\n className=\"w-full pl-7 pr-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400\"\n />\n

\n\n \n Tip percentage: {tipPercent}%\n \n

\n {presets.map((p) => (\n setTipPercent(p)}\n className={`flex-1 py-2 rounded-lg text-sm font-medium border transition-colors ${\n tipPercent === p\n ? \"bg-indigo-600 text-white border-indigo-600\"\n : \"bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100\"\n }`}\n >\n {p}%\n \n ))}\n

\n setTipPercent(Number(e.target.value))}\n className=\"w-full mb-5 accent-indigo-600\"\n />\n\n \n Number of people\n \n

\n setPeople((p) => Math.max(1, p - 1))}\n className=\"w-9 h-9 rounded-lg bg-gray-100 text-gray-700 font-bold hover:bg-gray-200\"\n >\n -\n \n {people}\n setPeople((p) => p + 1)}\n className=\"w-9 h-9 rounded-lg bg-gray-100 text-gray-700 font-bold hover:bg-gray-200\"\n >\n +\n \n

\n\n

\n Tip amount\n ${tipAmount.toFixed(2)}\n

\n Total\n ${total.toFixed(2)}\n

\n Per person\n ${perPerson.toFixed(2)}\n

\n\n

\n view source\n

\n );\n}\n",[],[157,218,210],"components","d982a81e-9f83-44b0-8c5f-2c77e080c710",["D",1784660155314],[173],[157,218],["D",1784660155314],[172,174,175,176],[157],["D",1784660155314],["D",1789560070146],{"_11":12,"_96":91},{"_11":12,"_90":91,"_92":91,"_48":49,"_93":94,"_95":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_83":42,"_84":85,"_86":87,"_88":14,"_89":12},"ctx",{"_76":-5,"_119":264,"_265":266,"_267":268,"_269":40,"_270":40,"_271":40,"_272":53,"_273":-5,"_274":-7,"_275":-7,"_276":57,"_277":40,"_278":40,"_279":-5,"_280":40,"_281":40,"_282":40,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":26,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Branches1

Branches
1