Responsive Fitness Tracker Web App

I’m building a browser-based fitness tracker and I want every screen to feel as informative and detailed as possible while remaining quick to load and easy to navigate. The core stack is straightforward—HTML, CSS and vanilla JavaScript with Chart.js for visualisations and LocalStorage for all client-side persistence—so you should be comfortable working without heavy frameworks.

Scope of work
• Build a fully responsive interface that adapts gracefully to mobile, tablet and desktop breakpoints.
• Implement the seven key modules:
– BMI calculator that saves each entry and renders a progress chart.
– Daily calorie calculator.
– Water-intake tracker with daily goal visual.
– Mood-based exercise suggestion engine.
– Short fitness quiz that records and updates a running score.
– Dark / Light mode toggle stored in LocalStorage.
– One-click CSV export of all tracked data.
• Keep the information architecture clear so users can drill into details without feeling lost; tooltips, inline validation and concise labels are encouraged.
• Code must be clean, commented and organised so future devs can extend modules or swap storage layers easily.

Deliverables
1. Source code (HTML, CSS, JS) ready to drop into any static hosting service.
2. Minified production bundle.
3. Brief setup guide and usage notes.
4. Screenshot or short screencast demonstrating each feature working across at least three viewport sizes.

I’ll test by running the app locally, checking data persistence after reloads, and reviewing UI behaviour on phone, tablet emulator and desktop. If that sounds up your alley, let me know your timeline and any similar projects you’ve tackled.