Dog Years Calculator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_299":300,"_301":302},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_72":209,"_40":-7,"_210":-5,"_17":211,"_212":213,"_214":215,"_216":217,"_218":219,"_111":-5,"_220":221,"_222":223,"_224":48,"_225":226,"_227":26,"_228":-5,"_229":-5,"_230":231},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","willemhelmet","name","dog-time-calculator","branchName","main","project",{"_32":59,"_13":14,"_34":170,"_46":-5,"_171":48,"_49":50,"_172":50,"_173":-5,"_174":-5,"_175":176,"_177":80,"_178":26,"_179":26,"_180":-5,"_181":22,"_53":182,"_183":-5,"_184":-5,"_185":-5,"_186":-5,"_187":188,"_189":188,"_190":191,"_192":191,"_193":191,"_194":188,"_195":188,"_196":197,"_198":199,"_200":28,"_47":48},"ahead",10,"behind",0,"diff",{"_63":64,"_65":66,"_67":68},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":41,"_60":50,"_61":39,"_62":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","0d303272-0b30-11f0-ad54-569c3dd06744","createdAt",["D",1743096145603],"updatedAt",["D",1743197735178],"projectId","0d2fd17e-0b30-11f0-ad54-569c3dd06744","version",39,"forkedBranchId","forkedBranchVersion","lockfileKey","1744626893628-esm.town_v_jxnblk_react-starter@39-main","deletedAt","isOwned",false,"privacy","public","userHandle","jxnblk","orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","projectName","react-starter",11,"fb49a7da-a2ee-11f0-9f51-0224a6c84d84","fb444e02-a2ee-11f0-9f51-0224a6c84d84","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[140,141,142],"deleted",[],"modified",[69,70,71],{"_72":123,"_74":124,"_76":125},{"_72":105,"_74":106,"_76":107},{"_72":73,"_74":75,"_76":77},"path","http.tsx","targetFile",{"_32":97,"_13":73,"_79":98,"_81":-5,"_82":33,"_83":99,"_85":26,"_34":100,"_40":101,"_88":89,"_90":102,"_65":48,"_92":-5,"_93":-7,"_72":103,"_95":104},"sourceFile",{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":84,"_85":26,"_34":86,"_40":87,"_88":89,"_90":91,"_65":48,"_92":14,"_93":-7,"_72":94,"_95":96},"db9de382-a2ef-11f0-aec3-0224a6c84d84","fileId","0199bb1b-a482-7689-bd6c-4e8ecde8fe66","parentId","branchId","branchVersion",6,"latest",["D",1759781151368],1,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\nimport App from \"./App.tsx\";\n\nconst CLIENT_MODULE = import.meta.url.replace(\"http.tsx\", \"client.tsx\");\n\nexport default async function (req: Request): Promise {\n const app = renderToString();\n const html = `\n \n \n Dog Years Calculator\n \n \n

${app}

\n \n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","label","children",[73],"contentHash","373bc5b7d18720dc4a3b0b9650a5384d12389a94444d65a8541c077cc5f66dc2","89b104ec-0c1c-11f0-a015-569c3dd06744","122089bc-0b30-11f0-9093-569c3dd06744",37,["D",1743197715704],17,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\nimport App from \"./App.tsx\";\n\nconst CLIENT_MODULE = import.meta.url.replace(\"http.tsx\", \"client.tsx\");\n\nexport default async function (req: Request): Promise {\n const app = renderToString();\n const html = `\n \n \n React Starter\n \n \n

${app}

\n \n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}",[73],"252b8b116b8902009603e99b3ed194c53285ba8358dc620563c99a0b7255f39e","README.md",{"_32":115,"_13":105,"_79":116,"_81":-5,"_82":33,"_83":117,"_85":26,"_34":118,"_40":119,"_88":111,"_90":120,"_65":48,"_92":-5,"_93":-7,"_72":121,"_95":122},{"_32":108,"_13":105,"_79":109,"_81":-5,"_82":58,"_83":57,"_85":26,"_34":110,"_40":87,"_88":111,"_90":112,"_65":48,"_92":-5,"_93":-7,"_72":113,"_95":114},"7da5a24a-a2f1-11f0-a4e8-0224a6c84d84","0199bb1b-a482-7689-bd6c-455f00c4810c",["D",1759781852715],"file","# 🐕 Dog Time Calculator ⏰\n\nConvert between dog time and human time across multiple time units!\n\nEver wondered how long a dog hour feels? Or how many human seconds are in a dog second? This calculator helps you understand time from your furry friend's perspective.\n\n## Features\n\n- **Bidirectional conversion** between dog time and human time\n- **Multiple time units** supported: seconds, minutes, hours, days, and years\n- **Real-time conversion** as you type or change settings\n- **Flexible interface** - convert any combination of units\n\n## The Formula\n\nThe calculator uses the standard dog age formula:\n- 1st dog year = 15 human years\n- 2nd dog year = 9 human years (24 total)\n- Each year after = 5 human years\n\nThis same ratio applies to all time units! For example:\n- 1 dog hour during their first year = 15 human hours\n- 1 dog minute = 15 human minutes (for puppies)\n- And so on...\n\n## Examples\n\nTry these fun conversions:\n- 1 dog year → human years = 15.00 years (for a puppy)\n- 8 dog hours → human days = 5.00 days\n- 100 dog seconds → human minutes = 25.00 minutes\n\n## How it works\n\nThe `http.tsx` file is the main entry point and serves the app.\nIt renders the `App` component on the server and wraps it in an HTML response.\nThe `client.tsx` module hydrates the React app in the browser for interactivity.",[105],"dd0856bf3e3cdf2177e40d0d282b7462918b613a25b32168e9bf7543ad9d8c4d","3e43b646-0be8-11f0-8629-569c3dd06744","d4d104b8-0b31-11f0-bc8e-569c3dd06744",36,["D",1743175255331],8,"# React Starter\n\nMinimal React SSR example for Val Town\n[View Demo](https://jxnblk--122089bc0b3011f09093569c3dd06744.web.val.run/)\n\nRemix this project to start building your own React app\n\n## How it works\n\nThe `http.tsx` file is the main entry point and serves the app.\nIt renders the `App` component on the server and wraps it in an HTML response.\nThis HTML response includes a `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[152],"b740560111ede7f6f6839a473a9bd87458ce4b5e38bce6ec9334739dcc0c99a5",".vtignore",{"_32":163,"_13":161,"_79":164,"_81":-5,"_82":58,"_83":165,"_85":26,"_34":166,"_40":22,"_88":111,"_90":167,"_65":48,"_92":-5,"_93":-7,"_72":168,"_95":169},"0d22f452-a2ef-11f0-8f16-0224a6c84d84","0d22f4fc-a2ef-11f0-8f16-0224a6c84d84",2,["D",1759780804969],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[161],"18f4273e0b959a6002030663e4e449119845617823d38fc9fbbb206c591a8ff5",["D",1759780774960],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019977b1-1bd1-730d-a575-2665305dd849","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019977b1-1bd1-730d-a575-2afdc309b42c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_208":204},"org",{"_11":12,"_201":202,"_203":204,"_175":176,"_205":206,"_207":48},"branch","displayName","WHP","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMzZ1Q1ZnYnREY3RBMjh5TWtPbU5vS01MejYifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":295,"_46":-5,"_171":48,"_49":50,"_172":50,"_173":-5,"_174":-5,"_175":176,"_177":80,"_178":26,"_179":26,"_180":-5,"_181":22,"_53":182,"_183":-5,"_184":-5,"_185":-5,"_186":-5,"_187":188,"_189":188,"_190":191,"_192":191,"_193":191,"_194":188,"_195":188,"_196":296,"_198":297,"_200":298,"_47":48},"tree",[273,274,275,276,277,278,279],"files",[273,274,275,276,277,278,279],"counts",{"_263":22,"_264":87,"_265":22,"_266":267,"_268":269},"contents",[238,239,240,241,242,243,244],"upstreamProject",{"_32":39,"_13":56,"_173":234,"_174":235,"_49":50,"_196":236},"upstreamBranch",{"_32":33,"_34":232,"_36":233,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743096145603],["D",1743197735178],"Minimal React starter with SSR","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a0afa007-3e32-4914-a751-f7efceecae00/square512?exp=1789556399&sig=b585cc13498fc103f993ad777c3825e50f09c6e92b561b28e84525895433b424",{"_11":52,"_208":237},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789556399&sig=91750b53ebb206e103877e2ab9f7d3cfe4951c4b4f61dcbbda6aa7f3a4e8a9c0",{"_32":163,"_13":161,"_79":164,"_81":-5,"_82":58,"_83":165,"_85":26,"_34":261,"_40":22,"_88":111,"_90":167,"_65":48,"_92":-5,"_72":262},{"_32":154,"_13":152,"_79":155,"_81":-5,"_82":58,"_83":156,"_85":26,"_34":259,"_40":22,"_88":111,"_90":158,"_65":48,"_92":-5,"_72":260},{"_32":126,"_13":123,"_79":127,"_81":-5,"_82":58,"_83":20,"_85":26,"_34":257,"_40":129,"_88":130,"_90":131,"_65":48,"_92":-5,"_72":258},{"_32":108,"_13":105,"_79":109,"_81":-5,"_82":58,"_83":57,"_85":26,"_34":255,"_40":87,"_88":111,"_90":112,"_65":48,"_92":-5,"_72":256},{"_32":249,"_13":250,"_79":251,"_81":-5,"_82":58,"_83":87,"_85":26,"_34":252,"_40":22,"_88":130,"_90":253,"_65":48,"_92":-5,"_72":254},{"_32":145,"_13":143,"_79":146,"_81":-5,"_82":58,"_83":147,"_85":26,"_34":247,"_40":22,"_88":111,"_90":149,"_65":48,"_92":-5,"_72":248},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":84,"_85":26,"_34":245,"_40":87,"_88":89,"_90":91,"_65":48,"_92":14,"_72":246},["D",1759781151368],[73],["D",1759780805027],[143],"fb4e1716-a2ee-11f0-9f51-0224a6c84d84","client.tsx","0199bb1b-a482-7689-bd6c-4a947ba72816",["D",1759780774960],"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\"\nimport { hydrateRoot } from \"https://esm.sh/react-dom@19/client\";\nimport App from \"./App.tsx\"\n\nconst div = document.getElementById(\"app\");\nhydrateRoot(div, );",[250],["D",1759781852715],[105],["D",1759781601452],[123],["D",1759780804999],[152],["D",1759780804969],[161],"pulls","branches","forks","envVars",{"_270":22,"_272":22},"connections",{"_270":22,"_271":22},"count","unfilledCount","emptyCount",{"_32":163,"_13":161,"_79":164,"_81":-5,"_82":58,"_83":165,"_85":26,"_34":166,"_40":22,"_88":111,"_90":167,"_65":48,"_92":-5,"_93":293,"_72":294},{"_32":154,"_13":152,"_79":155,"_81":-5,"_82":58,"_83":156,"_85":26,"_34":157,"_40":22,"_88":111,"_90":158,"_65":48,"_92":-5,"_93":291,"_72":292},{"_32":126,"_13":123,"_79":127,"_81":-5,"_82":58,"_83":20,"_85":26,"_34":128,"_40":129,"_88":130,"_90":131,"_65":48,"_92":-5,"_93":289,"_72":290},{"_32":108,"_13":105,"_79":109,"_81":-5,"_82":58,"_83":57,"_85":26,"_34":110,"_40":87,"_88":111,"_90":112,"_65":48,"_92":-5,"_93":287,"_72":288},{"_32":249,"_13":250,"_79":251,"_81":-5,"_82":58,"_83":87,"_85":26,"_34":284,"_40":22,"_88":130,"_90":253,"_65":48,"_92":-5,"_93":285,"_72":286},{"_32":145,"_13":143,"_79":146,"_81":-5,"_82":58,"_83":147,"_85":26,"_34":148,"_40":22,"_88":111,"_90":149,"_65":48,"_92":-5,"_93":282,"_72":283},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":84,"_85":26,"_34":86,"_40":87,"_88":89,"_90":91,"_65":48,"_92":14,"_93":280,"_72":281},[],[73],[],[143],["D",1759780774960],[],[250],[],[105],[],[123],[],[152],[],[161],["D",1759780774960],{"_11":12,"_208":204},{"_11":12,"_201":202,"_203":204,"_175":176,"_205":206,"_207":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":41,"_60":50,"_61":39,"_62":54,"_55":14,"_51":12},"ctx",{"_196":-5,"_229":332,"_333":334,"_335":336,"_337":48,"_338":48,"_339":48,"_340":26,"_341":-5,"_342":-7,"_343":-7,"_344":22,"_345":48,"_346":48,"_347":-5,"_348":48,"_349":48,"_350":48,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":16,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"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"]

Compare

Mergewillemhelmet/mainintojxnblk/main

App.tsx+223-9

README.md+28-15

Hhttp.tsx+1-1

.vtignore+6-0

AGENTS.md+290-0

deno.json+37-0