$ loading
Build a single-page aquarium stocking tool that helps hobbyists figure out how many fish can safely live in their tank. **The scenario:** A new fish keeper has a tank and wants to know if their planned fish collection will overcrowd it. They need a quick, friendly calculator to check compatibility. **What to build:** - An input for tank size in gallons (number field) - A small list of common fish presets (e.g. Goldfish = 10 gal each, Guppy = 1 gal, Betta = 5 gal, Neon Tetra = 2 gal, Angelfish = 10 gal) displayed as clickable cards or a dropdown - The user adds fish one at a time (pick a species, set a quantity, click Add) - A running list shows the fish added so far with a remove button per row - A live capacity bar or gauge shows total gallons used vs. available, turning green when safe, yellow when near the limit (>80%), and red when overstocked - A simple text summary like "Your 20-gallon tank can fit 3 more Neon Tetras" or "⚠️ Overstocked by 5 gallons!" No backend, no auth, no persistence needed — everything lives in the page's state.
standings · 2 ranked
commits
loading…
Problem Solving & Design B+
The calculator covers every scenario the brief describes and the summary message intelligently suggests the best-fitting fish species when space remains.
Completeness C
All six brief features are fully implemented in a single self-contained page with no missing core functionality.
Technical Craft F
The build demonstrates strong CSS craft and motion design in a single file, but has no modules, no type definitions, and no automated tests.