\n \n

\n \n );\n}\n\nfunction Home () {\n const [billAmount, setBillAmount] = React.useState(\"\");\n const [numberOfGuests, setNumberOfGuests] = React.useState(\"\");\n const [tipPercentage, setTipPercentage] = React.useState(15);\n\n const bill = parseFloat(billAmount) || 0;\n const guests = parseInt(numberOfGuests) || 0;\n const tipAmount = bill * (tipPercentage / 100);\n const totalWithTip = bill + tipAmount;\n const perPerson = guests > 0 ? totalWithTip / guests : 0;\n\n return (\n

Tip Calculator

\n\n

\n \n Total Bill Amount ($)\n \n setBillAmount(e.target.value)}\n placeholder=\"0.00\"\n style={{ width: \"100%\", padding: \"10px\", fontSize: \"16px\" }}\n />\n

\n\n

\n \n Number of Guests\n \n setNumberOfGuests(e.target.value)}\n placeholder=\"1\"\n min=\"1\"\n style={{ width: \"100%\", padding: \"10px\", fontSize: \"16px\" }}\n />\n

\n\n

\n \n Tip Percentage: {tipPercentage}%\n \n

\n setTipPercentage(15)}\n style={{\n flex: 1,\n padding: \"10px\",\n backgroundColor: tipPercentage === 15 ? \"#4CAF50\" : \"#f0f0f0\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"16px\"\n }}\n >\n 15%\n \n setTipPercentage(18)}\n style={{\n flex: 1,\n padding: \"10px\",\n backgroundColor: tipPercentage === 18 ? \"#4CAF50\" : \"#f0f0f0\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"16px\"\n }}\n >\n 18%\n \n setTipPercentage(20)}\n style={{\n flex: 1,\n padding: \"10px\",\n backgroundColor: tipPercentage === 20 ? \"#4CAF50\" : \"#f0f0f0\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"16px\"\n }}\n >\n 20%\n \n

\n setTipPercentage(parseInt(e.target.value))}\n style={{ width: \"100%\" }}\n />\n

\n\n {bill > 0 && guests > 0 && (\n

Results

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

\n Total with Tip: ${totalWithTip.toFixed(2)}\n

\n Each person pays: ${perPerson.toFixed(2)}\n

\n )}\n

\n );\n}\n\nfunction About () {\n const data = useLoaderData();\n \n return (\n

Hello, About page

{JSON.stringify(data, null, 2)}

\n )\n}\n\nasync function catsLoader () {\n const data = await fetch(API_URL)\n .then(res => res.json());\n return data;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n {\n Component: About,\n path: \"about\",\n loader: catsLoader,\n },\n ]\n },\n]\n\nexport default routes;","deleted","label",[98],"permalink","https://www.val.town/x/willemhelmet/tip-calculator/code/routes.tsx","extension","actionData","errors"]