This is a submission for Weekend Challenge: Dog Days Edition
What I Built
Three small dog-themed projects, all built from scratch within the challenge window â each one is a single self-contained HTML file with zero dependencies, zero build steps, and zero CDNs. Open the file (or the links below) and it just works, the way software for dogs should.
1. ðī Paw Match â Dog Breed Memory Game
A card-memory game where you flip cards to match dog breed pairs. Match a pair and a real breed fact pops up â did you know Dalmatians are born pure white and only develop spots after 3â4 weeks? Three difficulties (6/8/10 pairs), move counter, timer, star ratings, CSS 3D flip animations and confetti.
2. ð Paw Log â Dog Training & Care Journal
A practical training log (the brief literally suggested this one ðŊ). Log walks, feedings, training sessions, vet visits, baths and playtime. Everything persists in localStorage, with daily stats (walks today, training minutes, day streak), per-activity totals with progress bars, and JSON export/import backups.
3. ðĻ Dog-o-matic â Generative Dog Art
A tiny procedural dog factory. Every click generates a unique dog face â head shape, ear type (flop/point/round/fold), coat color, chest blaze, Dalmatian spots, tongue, freckles â all random. It "identifies" the breed and always concludes the dog is a very good boy. Pure Canvas 2D, and you can save any dog as PNG or auto-breed a dozen in a row.
Demo
All three run right in your browser â no install, no login:
- ðī Paw Match: play it here
- ð Paw Log: use it here
- ðĻ Dog-o-matic: generate dogs here
Code
The entire codebase is the demos themselves: each project is one self-contained HTML file â right-click â View Source in any browser and you have the full code. No frameworks, no lockfiles, no node_modules to explain.
A GitHub repository with the full pack (plus this README) is being published and I'll link it here before submissions close.
How I Built It
The one-file constraint was the fun part. I decided each project had to be a single HTML file that works over file:// â double-click and play, anywhere, even offline. That forced some genuinely nice engineering:
-
Paw Match uses CSS 3D transforms for the flip animation (
perspective+rotateY), a tiny state machine for the flip/lock/match flow, and a hand-picked fact table of 10 real breed facts. - Paw Log is a full CRUD app in ~130 lines of vanilla JS: a single localStorage JSON document, day-keyed aggregation for the "today" view, streak calculation walking back through calendar days, and JSON backup export/import for the "data stays on your machine" promise.
-
Dog-o-matic draws every dog procedurally on a
<canvas>: a parameter object (coat, ear, head, muzzle, patches, spots, tongue, freckles) drives an ordered paint pass â ears behind the head, muzzle overlay, white blaze, then face details. The "breed guess" is a tiny rules engine over those parameters (ears === 'round' â "Corgi (all loaf, no legs)").
The whole pack is responsive, works on mobile, and was built in one weekend sitting â because that's the challenge.
Made for fun. No dogs were harmed (or trained) in the making. ðĶī
Top comments (0)