\n \n \n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}\n\n/* ------------------------------------------------\n 3) The React App\n------------------------------------------------ */\nfunction App() {\n // States for inputs\n const [entryName, setEntryName] = useState(\"#\");\n const [entryAmount, setEntryAmount] = useState(\"\");\n const [ones, setOnes] = useState(\"\");\n const [twos, setTwos] = useState(\"\");\n const [fives, setFives] = useState(\"\");\n const [tens, setTens] = useState(\"\");\n const [twenties, setTwenties] = useState(\"\");\n const [fifties, setFifties] = useState(\"\");\n const [hundreds, setHundreds] = useState(\"\");\n\n const [entries, setEntries] = useState([]);\n\n // Date/time\n const [currentTime, setCurrentTime] = useState(new Date());\n useEffect(() => {\n const timer = setInterval(() => setCurrentTime(new Date()), 1000);\n return () => clearInterval(timer);\n }, []);\n const dateString = currentTime.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n const timeString = currentTime.toLocaleTimeString(\"en-US\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: true,\n });\n const startOfYear = new Date(currentTime.getFullYear(), 0, 1);\n const dayOfYear = Math.floor((currentTime - startOfYear) / (24 * 60 * 60 * 1000));\n const weekNumber = Math.ceil(dayOfYear / 7);\n\n // Helpers\n function formatNumber(num) {\n return num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n }\n function formatCurrency(num) {\n return `$${num.toFixed(2).replace(/\\d(?=(\\d{3})+\\.)/g, \"$&,\")}`;\n }\n\n // Bill previews\n const previewValues = {\n ones: ones ? parseInt(ones) * 1 : 0,\n twos: twos ? parseInt(twos) * 2 : 0,\n fives: fives ? parseInt(fives) * 5 : 0,\n tens: tens ? parseInt(tens) * 10 : 0,\n twenties: twenties ? parseInt(twenties) * 20 : 0,\n fifties: fifties ? parseInt(fifties) * 50 : 0,\n hundreds: hundreds ? parseInt(hundreds) * 100 : 0,\n };\n\n // Running totals\n const totalOnes = entries.reduce((acc, e) => acc + e.ones, 0);\n const totalTwos = entries.reduce((acc, e) => acc + e.twos, 0);\n const totalFives = entries.reduce((acc, e) => acc + e.fives, 0);\n const totalTens = entries.reduce((acc, e) => acc + e.tens, 0);\n const totalTwenties = entries.reduce((acc, e) => acc + e.twenties, 0);\n const totalFifties = entries.reduce((acc, e) => acc + e.fifties, 0);\n const totalHundreds = entries.reduce((acc, e) => acc + e.hundreds, 0);\n const grandTotal = entries.reduce((acc, e) => acc + e.total, 0);\n\n // Adding a new entry\n const addNewEntry = useCallback(() => {\n const eName = entryName.trim() || `#Entry ${entries.length + 1}`;\n const eAmount = parseFloat(entryAmount) || 0;\n const nOnes = parseInt(ones) || 0;\n const nTwos = parseInt(twos) || 0;\n const nFives = parseInt(fives) || 0;\n const nTens = parseInt(tens) || 0;\n const nTwenties = parseInt(twenties) || 0;\n const nFifties = parseInt(fifties) || 0;\n const nHundreds = parseInt(hundreds) || 0;\n\n const billsTotal = nOnes\n + nTwos * 2\n + nFives * 5\n + nTens * 10\n + nTwenties * 20\n + nFifties * 50\n + nHundreds * 100;\n\n setEntries((prev) => [\n ...prev,\n {\n entryName: eName,\n entryAmount: eAmount,\n ones: nOnes,\n twos: nTwos,\n fives: nFives,\n tens: nTens,\n twenties: nTwenties,\n fifties: nFifties,\n hundreds: nHundreds,\n total: billsTotal,\n },\n ]);\n\n // Reset\n setEntryName(\"#\");\n setEntryAmount(\"\");\n setOnes(\"\");\n setTwos(\"\");\n setFives(\"\");\n setTens(\"\");\n setTwenties(\"\");\n setFifties(\"\");\n setHundreds(\"\");\n }, [\n entryName,\n entryAmount,\n ones,\n twos,\n fives,\n tens,\n twenties,\n fifties,\n hundreds,\n entries.length,\n ]);\n\n // Export CSV\n const exportToCSV = () => {\n let csvText = \"Entry#,Name,Amount,$1,$2,$5,$10,$20,$50,$100,Total\\n\";\n entries.forEach((entry, idx) => {\n csvText += `${\n idx + 1\n },${entry.entryName},${entry.entryAmount},${entry.ones},${entry.twos},${entry.fives},${entry.tens},${entry.twenties},${entry.fifties},${entry.hundreds},${entry.total}\\n`;\n });\n const sumOfEntryAmounts = entries.reduce((acc, e) => acc + e.entryAmount, 0);\n csvText +=\n `Total,,${sumOfEntryAmounts},${totalOnes},${totalTwos},${totalFives},${totalTens},${totalTwenties},${totalFifties},${totalHundreds},${grandTotal}\\n`;\n\n const blob = new Blob([csvText], { type: \"text/csv;charset=utf-8;\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = \"money_count_summary.csv\";\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n };\n\n // Export JSON\n const exportToJSON = () => {\n const dataObj = {\n entries,\n totals: {\n totalOnes,\n totalTwos,\n totalFives,\n totalTens,\n totalTwenties,\n totalFifties,\n totalHundreds,\n grandTotal,\n },\n };\n const jsonData = JSON.stringify(dataObj, null, 2);\n const blob = new Blob([jsonData], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = \"money_count_summary.json\";\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n };\n\n // Print\n const printContent = () => {\n if (typeof window !== \"undefined\") {\n window.print();\n }\n };\n\n // Summaries\n const totalEntries = entries.length;\n const sumOfAllEntries = entries.reduce((acc, e) => acc + e.total, 0);\n const averageTotal = totalEntries ? sumOfAllEntries / totalEntries : 0;\n\n // Bundles\n const bundlesOnes = Math.floor(totalOnes / 20);\n const bundlesFives = Math.floor(totalFives / 20);\n const bundlesTens = Math.floor(totalTens / 10);\n\n // Table rows\n const entryRows = entries.map((entry, i) => (\n \n {i + 1}\n {entry.entryName}\n \n {formatCurrency(entry.entryAmount)}\n \n \n {formatNumber(entry.ones)}\n \n \n {formatNumber(entry.twos)}\n \n \n {formatNumber(entry.fives)}\n \n \n {formatNumber(entry.tens)}\n \n \n {formatNumber(entry.twenties)}\n \n \n {formatNumber(entry.fifties)}\n \n \n {formatNumber(entry.hundreds)}\n \n \n {formatCurrency(entry.total)}\n \n \n ));\n\n const sumOfEntryAmounts = entries.reduce((acc, e) => acc + e.entryAmount, 0);\n const totalsRow = entries.length > 0 && (\n \n Total\n \n \n {formatCurrency(sumOfEntryAmounts)}\n \n \n {formatNumber(totalOnes)}\n \n \n {formatNumber(totalTwos)}\n \n \n {formatNumber(totalFives)}\n \n \n {formatNumber(totalTens)}\n \n \n {formatNumber(totalTwenties)}\n \n \n {formatNumber(totalFifties)}\n \n \n {formatNumber(totalHundreds)}\n \n \n {formatCurrency(grandTotal)}\n \n \n );\n\n return (\n <>\n {/* ========== SIDEBAR ========== */}\n

Money Counter

\n\n

{dateString}

{timeString}

{`Week ${weekNumber} of ${currentTime.getFullYear()}`}

\n\n

Running Totals

\n $1 Bills:\n {formatCurrency(totalOnes)}\n

\n $2 Bills:\n {formatCurrency(totalTwos * 2)}\n

\n $5 Bills:\n {formatCurrency(totalFives * 5)}\n

\n $10 Bills:\n {formatCurrency(totalTens * 10)}\n

\n $20 Bills:\n {formatCurrency(totalTwenties * 20)}\n

\n $50 Bills:\n {formatCurrency(totalFifties * 50)}\n

\n $100 Bills:\n {formatCurrency(totalHundreds * 100)}\n

\n Grand Total:\n {formatCurrency(grandTotal)}\n

\n\n {\n setEntryName(\"#Example Entry\");\n setEntryAmount(\"\");\n setOnes(\"15\");\n setTwos(\"5\");\n setFives(\"8\");\n setTens(\"6\");\n setTwenties(\"4\");\n setFifties(\"2\");\n setHundreds(\"1\");\n }}\n >\n Add Example Values\n \n\n

\n Entry Name:\n setEntryName(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n

\n Entry Amount:\n setEntryAmount(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n

\n\n

Common Bills

\n $1 bills:\n setOnes(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.ones > 0 ? `$${previewValues.ones}` : \"\"}\n \n

\n $5 bills:\n setFives(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.fives > 0 ? `$${previewValues.fives}` : \"\"}\n \n

\n $10 bills:\n setTens(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.tens > 0 ? `$${previewValues.tens}` : \"\"}\n \n

\n $20 bills:\n setTwenties(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.twenties > 0 ? `$${previewValues.twenties}` : \"\"}\n \n

\n $100 bills:\n setHundreds(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.hundreds > 0 ? `$${previewValues.hundreds}` : \"\"}\n \n

\n\n

Other Bills

\n $2 bills:\n setTwos(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.twos > 0 ? `$${previewValues.twos}` : \"\"}\n \n

\n $50 bills:\n setFifties(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addNewEntry()}\n />\n \n {previewValues.fifties > 0 ? `$${previewValues.fifties}` : \"\"}\n \n

\n\n \n

\n\n {/* ========== MAIN CONTENT ========== */}\n

Money Count Summary

\n\n

\n {entries.length === 0 ?

No entries yet. Start adding your money count!

: (\n <>\n

Total Entries: {entries.length}

Grand Total: {formatCurrency(sumOfAllEntries)}

Average Total per Entry: {formatCurrency(averageTotal)}

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

Denomination	Count	Value	Bundles
$1	{formatNumber(totalOnes)}	{formatCurrency(totalOnes)}	\n {bundlesOnes} bundle(s) and {totalOnes % 20} loose\n
$2	{formatNumber(totalTwos)}	{formatCurrency(totalTwos * 2)}	N/A
$5	{formatNumber(totalFives)}	{formatCurrency(totalFives * 5)}	\n {bundlesFives} bundle(s) and {totalFives % 20} loose\n
$10	{formatNumber(totalTens)}	{formatCurrency(totalTens * 10)}	\n {bundlesTens} bundle(s) and {totalTens % 10} loose\n
$20	{formatNumber(totalTwenties)}	{formatCurrency(totalTwenties * 20)}	N/A
$50	{formatNumber(totalFifties)}	{formatCurrency(totalFifties * 50)}	N/A
$100	{formatNumber(totalHundreds)}	{formatCurrency(totalHundreds * 100)}	N/A

\n \n )}\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {entryRows}\n {totalsRow}\n \n

Entry #	Name	Amount	$1	$2	$5	$10	$20	$50	$100	Total

\n\n

\n \n \n \n

\n \n );\n}\n\n/* ------------------------------------------------\n 4) Mount the React client-side\n------------------------------------------------ */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}","deleted","label",[98],"permalink","https://www.val.town/x/arfan/money_counter/code/main.tsx","extension","actionData","errors"]