\n \n \n \n \n \n \n \n \n \n \n {milestones\n .sort((a, b) => a - b)\n .map((m) => (\n \n \n \n \n \n \n ))}\n \n

Milestone (days)	Years	Date	Event Title
{m}	\n {(m / 365).toFixed(2)}\n	\n {addDays(birthday, m)}\n	{`${name} is ${m} days old!`}

\n )\n}\n\nexport default MilestoneTable\n",[],[181,187,203],[181,187],{"_102":212,"_95":213,"_151":214,"_153":182,"_154":136,"_155":215,"_157":158,"_104":216,"_99":217,"_160":218,"_162":219,"_163":22,"_164":-5,"_165":220,"_98":221},"e2d77834-5673-11f0-b735-f69ea79377d9","index.html","9b0afe02-5670-11f0-9e9f-f69ea79377d9",20,["D",1751371617526],9,"file","\n\n \n \n \n Day Old Calculator\n \n \n \n \n

\n \n \n\n",[],[181,213],{"_102":223,"_95":224,"_151":225,"_153":182,"_154":136,"_155":226,"_157":158,"_104":227,"_99":228,"_160":197,"_162":229,"_163":22,"_164":-5,"_165":230,"_98":231},"967293f8-5677-11f0-9e86-f69ea79377d9","index.tsx","9b3caf42-5670-11f0-a1dc-f69ea79377d9",28,["D",1751373207358],5,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\"\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?dev\"\nimport MilestoneTable from \"./components/MilestoneTable.tsx\"\nimport ICSGenerator from \"./components/ICSGenerator.ts\"\n\nconst DEFAULT_MILESTONES = [10, 100, 1000, 10000]\n\nconst PRESET_CATEGORIES = {\n palindromes: {\n name: \"Palindromes\",\n numbers: [\n 111, 222, 333, 444, 555, 666, 777, 888, 999, 1001, 1111, 2222, 3333, 4444,\n 5555, 6666, 7777, 8888, 9999, 11111,\n ],\n color: \"bg-blue-100 border-blue-300\",\n },\n ageMilestones: {\n name: \"Age Milestones\",\n numbers: [30, 60, 90, 180, 365, 500, 750, 1000, 1500, 2000],\n color: \"bg-green-100 border-green-300\",\n },\n funNumbers: {\n name: \"Fun Numbers\",\n numbers: [123, 234, 345, 456, 567, 678, 789, 1234, 2345, 3456],\n color: \"bg-purple-100 border-purple-300\",\n },\n}\n\nconst REMINDER_UNITS = [\n { label: \"minutes\", value: \"minutes\", ics: \"M\" },\n { label: \"hours\", value: \"hours\", ics: \"H\" },\n { label: \"days\", value: \"days\", ics: \"D\" },\n { label: \"weeks\", value: \"weeks\", ics: \"W\" },\n]\n\ninterface MilestoneWithCategory {\n number: number\n category?: string\n}\n\nfunction getQueryParams() {\n const params = new URLSearchParams(window.location.search)\n const milestonesParam = params.get(\"milestones\")\n const categoriesParam = params.get(\"categories\")\n\n let milestones: MilestoneWithCategory[] = []\n if (milestonesParam && categoriesParam) {\n const numbers = milestonesParam.split(\",\").map(Number).filter(Boolean)\n const categories = categoriesParam.split(\",\")\n milestones = numbers.map((num, i) => ({\n number: num,\n category: categories[i] || undefined,\n }))\n } else if (milestonesParam) {\n milestones = milestonesParam\n .split(\",\")\n .map(Number)\n .filter(Boolean)\n .map((num) => ({ number: num }))\n } else {\n milestones = DEFAULT_MILESTONES.map((num) => ({ number: num }))\n }\n\n return {\n birthday: params.get(\"birthday\") || \"\",\n name: params.get(\"name\") || \"\",\n milestones,\n reminderValue: parseInt(params.get(\"reminderValue\") || \"7\", 10) || 7,\n reminderUnit: params.get(\"reminderUnit\") || \"days\",\n }\n}\n\nfunction setQueryParams(\n birthday: string,\n name: string,\n milestones: MilestoneWithCategory[],\n reminderValue: number,\n reminderUnit: string\n) {\n const params = new URLSearchParams()\n if (birthday) params.set(\"birthday\", birthday)\n if (name) params.set(\"name\", name)\n if (milestones.length) {\n params.set(\"milestones\", milestones.map((m) => m.number).join(\",\"))\n params.set(\"categories\", milestones.map((m) => m.category || \"\").join(\",\"))\n }\n if (reminderValue) params.set(\"reminderValue\", String(reminderValue))\n if (reminderUnit) params.set(\"reminderUnit\", reminderUnit)\n window.history.replaceState({}, \"\", `?${params.toString()}`)\n}\n\nconst App: React.FC = () => {\n const [birthday, setBirthday] = useState(\"\")\n const [name, setName] = useState(\"\")\n const [milestones, setMilestones] = useState(\n DEFAULT_MILESTONES.map((num) => ({ number: num }))\n )\n const [newMilestone, setNewMilestone] = useState(\"\")\n const [reminderValue, setReminderValue] = useState(7)\n const [reminderUnit, setReminderUnit] = useState(\"days\")\n\n useEffect(() => {\n const { birthday, name, milestones, reminderValue, reminderUnit } =\n getQueryParams()\n setBirthday(birthday)\n setName(name)\n setMilestones(milestones)\n setReminderValue(reminderValue)\n setReminderUnit(reminderUnit)\n }, [])\n\n useEffect(() => {\n setQueryParams(birthday, name, milestones, reminderValue, reminderUnit)\n }, [birthday, name, milestones, reminderValue, reminderUnit])\n\n const addMilestone = () => {\n const num = parseInt(newMilestone, 10)\n if (!isNaN(num) && num > 0 && !milestones.some((m) => m.number === num)) {\n setMilestones(\n [...milestones, { number: num }].sort((a, b) => a.number - b.number)\n )\n setNewMilestone(\"\")\n }\n }\n\n const removeMilestone = (num: number) => {\n setMilestones(milestones.filter((m) => m.number !== num))\n }\n\n const addCategory = (categoryKey: string) => {\n const category =\n PRESET_CATEGORIES[categoryKey as keyof typeof PRESET_CATEGORIES]\n const existingNumbers = milestones.map((m) => m.number)\n const newMilestones = category.numbers\n .filter((num) => !existingNumbers.includes(num))\n .map((num) => ({ number: num, category: categoryKey }))\n\n setMilestones(\n [...milestones, ...newMilestones].sort((a, b) => a.number - b.number)\n )\n }\n\n const removeCategory = (categoryKey: string) => {\n setMilestones(milestones.filter((m) => m.category !== categoryKey))\n }\n\n const getCategoryPreview = (categoryKey: string) => {\n const category =\n PRESET_CATEGORIES[categoryKey as keyof typeof PRESET_CATEGORIES]\n const existingNumbers = milestones.map((m) => m.number)\n return category.numbers.filter((num) => !existingNumbers.includes(num))\n }\n\n const getMilestonesByCategory = () => {\n const grouped: Record = { custom: [] }\n\n milestones.forEach((m) => {\n if (m.category) {\n if (!grouped[m.category]) grouped[m.category] = []\n grouped[m.category].push(m.number)\n } else {\n grouped.custom.push(m.number)\n }\n })\n\n return grouped\n }\n\n const milestoneNumbers = milestones.map((m) => m.number)\n\n return (\n

\n Day Old Calculator\n

\n e.preventDefault()}\n >\n \n Name\n setName(e.target.value)}\n placeholder=\"e.g. Sam\"\n required\n />\n \n \n Birthday\n setBirthday(e.target.value)}\n required\n />\n \n\n

\n Preset Milestone Categories\n

\n {Object.entries(PRESET_CATEGORIES).map(([key, category]) => {\n const preview = getCategoryPreview(key)\n const hasCategory = milestones.some((m) => m.category === key)\n\n return (\n

\n {category.name}\n

\n {preview.length > 0 && (\n addCategory(key)}\n >\n Add {preview.length} milestones\n \n )}\n {hasCategory && (\n removeCategory(key)}\n >\n Remove all\n \n )}\n

\n {preview.length > 0 && (\n

\n Will add: {preview.slice(0, 5).join(\", \")}\n {preview.length > 5\n ? `... and ${preview.length - 5} more`\n : \"\"}\n

\n )}\n

\n )\n })}\n

\n\n

\n Custom Milestones (days old)\n

\n {milestones\n .filter((m) => !m.category)\n .map((m) => (\n \n {m.number}\n removeMilestone(m.number)}\n title=\"Remove\"\n >\n ×\n \n \n ))}\n setNewMilestone(e.target.value)}\n placeholder=\"Add\"\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n addMilestone()\n }\n }}\n />\n \n Add\n \n

\n\n

\n Remind me before each milestone\n

\n setReminderValue(Number(e.target.value))}\n />\n setReminderUnit(e.target.value)}\n >\n {REMINDER_UNITS.map((u) => (\n \n ))}\n \n before each milestone\n

\n \n\n

All Milestones by Category

\n {Object.entries(getMilestonesByCategory()).map(\n ([categoryKey, numbers]) => {\n if (numbers.length === 0) return null\n const category =\n PRESET_CATEGORIES[categoryKey as keyof typeof PRESET_CATEGORIES]\n const colorClass = category?.color || \"bg-gray-100 border-gray-300\"\n const displayName = category?.name || \"Custom\"\n\n return (\n \n

{displayName}

\n {numbers.map((num) => (\n \n {num}\n removeMilestone(num)}\n title=\"Remove\"\n style={{ lineHeight: 1 }}\n >\n ×\n \n \n ))}\n

\n )\n }\n )}\n

\n\n \n \n \n )\n}\n\nconst root = createRoot(document.getElementById(\"root\")!)\nroot.render()\n",[],[181,224],[181],{"_102":234,"_95":235,"_151":236,"_153":-5,"_154":136,"_155":237,"_157":158,"_104":238,"_99":32,"_160":218,"_162":239,"_163":22,"_164":-5,"_165":240,"_98":241},"9ae653e0-5670-11f0-8e17-f69ea79377d9",".vtignore","9ae654a8-5670-11f0-8e17-f69ea79377d9",7,["D",1751370208340],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[235],{"_102":243,"_95":244,"_151":245,"_153":-5,"_154":136,"_155":228,"_157":158,"_104":246,"_99":32,"_160":218,"_162":247,"_163":22,"_164":-5,"_165":248,"_98":249},"9adcbfb0-5670-11f0-8f22-f69ea79377d9","deno.json","9adcc05a-5670-11f0-8f22-f69ea79377d9",["D",1751370208278],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[244],"files",[148,167,179,185,192,201,211,222,233,242],"counts",{"_254":32,"_255":173,"_256":32,"_257":258},"pulls","branches","forks","envVars",{"_259":32,"_260":32},"count","emptyCount","contents",[263,266,269,272],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":264,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":265},["D",1751370208142],[150],{"_102":180,"_95":181,"_151":182,"_153":-5,"_154":136,"_155":173,"_157":158,"_104":267,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":268},["D",1751370208100],[181],{"_102":234,"_95":235,"_151":236,"_153":-5,"_154":136,"_155":237,"_157":158,"_104":270,"_99":32,"_160":218,"_162":239,"_163":22,"_164":-5,"_98":271},["D",1751370208340],[235],{"_102":243,"_95":244,"_151":245,"_153":-5,"_154":136,"_155":228,"_157":158,"_104":273,"_99":32,"_160":218,"_162":247,"_163":22,"_164":-5,"_98":274},["D",1751370208278],[244],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":283,"_261":288,"_297":-7,"_298":-5,"_299":-5,"_250":300,"_331":332},{"_102":103,"_95":96,"_104":284,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":285,"_130":286,"_133":287,"_145":22},["D",1751369199376],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[289,291,293,295],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":264,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":290},[150],{"_102":180,"_95":181,"_151":182,"_153":-5,"_154":136,"_155":173,"_157":158,"_104":267,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":292},[181],{"_102":234,"_95":235,"_151":236,"_153":-5,"_154":136,"_155":237,"_157":158,"_104":270,"_99":32,"_160":218,"_162":239,"_163":22,"_164":-5,"_98":294},[235],{"_102":243,"_95":244,"_151":245,"_153":-5,"_154":136,"_155":228,"_157":158,"_104":273,"_99":32,"_160":218,"_162":247,"_163":22,"_164":-5,"_98":296},[244],"readme","upstream","pull",[301,303,307,309,311,314,318,321,325,328],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":159,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":302,"_98":306},[303],{"_102":168,"_95":169,"_151":170,"_153":152,"_154":136,"_155":171,"_157":158,"_104":172,"_99":173,"_160":174,"_162":175,"_163":22,"_164":-5,"_165":304,"_98":305},[],[150,169],[150],{"_102":180,"_95":181,"_151":182,"_153":-5,"_154":136,"_155":173,"_157":158,"_104":183,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":308,"_98":324},[309,318,321],{"_102":186,"_95":187,"_151":188,"_153":182,"_154":136,"_155":189,"_157":158,"_104":190,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":310,"_98":317},[311,314],{"_102":193,"_95":194,"_151":195,"_153":188,"_154":136,"_155":135,"_157":158,"_104":196,"_99":189,"_160":197,"_162":198,"_163":22,"_164":-5,"_165":312,"_98":313},[],[181,187,194],{"_102":202,"_95":203,"_151":204,"_153":188,"_154":136,"_155":205,"_157":158,"_104":206,"_99":156,"_160":197,"_162":207,"_163":22,"_164":-5,"_165":315,"_98":316},[],[181,187,203],[181,187],{"_102":212,"_95":213,"_151":214,"_153":182,"_154":136,"_155":215,"_157":158,"_104":216,"_99":217,"_160":218,"_162":219,"_163":22,"_164":-5,"_165":319,"_98":320},[],[181,213],{"_102":223,"_95":224,"_151":225,"_153":182,"_154":136,"_155":226,"_157":158,"_104":227,"_99":228,"_160":197,"_162":229,"_163":22,"_164":-5,"_165":322,"_98":323},[],[181,224],[181],{"_102":234,"_95":235,"_151":236,"_153":-5,"_154":136,"_155":237,"_157":158,"_104":238,"_99":32,"_160":218,"_162":239,"_163":22,"_164":-5,"_165":326,"_98":327},[],[235],{"_102":243,"_95":244,"_151":245,"_153":-5,"_154":136,"_155":228,"_157":158,"_104":246,"_99":32,"_160":218,"_162":247,"_163":22,"_164":-5,"_165":329,"_98":330},[],[244],"previews",[303],"actionData","errors"]

samlroberts

DayOldCalculator