plan.md
Goal
The Commute Calculator is a single-page web application designed to help workers understand the true cost and time investment of their daily commute. By inputting basic parameters about their travel patterns, users can see their annual commute time expenditure and financial costs, enabling better decision-making about job locations, transport methods, and work-life balance.
The application supports three primary commute modes: public transport, driving and public transport and driving. For public transport users, the calculator factors in ticket costs and journey duration. For drivers, it considers driving time, parking fees, and provides a framework for understanding vehicle costs. The tool presents results in clear, annualized metrics that make the invisible cost of commuting visible and tangible. For public transport and driving, the calculator factors in same as public transport users and also driving.
Public transport should also support taking the bus, training or taking the bus and train.
The web application generates a graph of hours spent commuting vs the hours in a year. The graph should be easy to understand.
Requirements
MUST implement
- Accept commute duration input (minutes per one-way trip)
- Accept working days per week input (1-7 days)
- Accept working weeks per year input (1-52 weeks, default to 48 excluding holidays)
- Support three commute modes: Public Transport and Driving, Public Transport and Driving
- Public Transport mode: Accept daily/weekly/monthly/yearly ticket cost and calculate annual total
- Driving mode: Accept one-way driving time and daily parking cost, calculate annual totals
- Calculate and display total annual commute time in hours and days (8-hour work days equivalent)
- Calculate and display total annual commute cost
- Display cost per commute hour (efficiency metric)
- All code contained in a single HTML file with embedded CSS and JavaScript
- Responsive layout functional on mobile and desktop devices
- Input fields must use 16px font size minimum for mobile usability
- Form validation to ensure numeric inputs are positive numbers
- Real-time calculation updates as users modify inputs
- Bus and Trains are supported
SHOULD implement
- Option to account for remote work days (hybrid work schedule)
- Toggle between annual, monthly, and weekly cost views
- Visual chart or graph showing time vs cost breakdown
- Local storage to remember user's previous inputs
- Export results as PDF or printable view
- Comparison feature to contrast two different commute scenarios side-by-side
Research
- Standard full-time work year typically consists of 48-50 weeks (accounting for 4-6 weeks annual leave, public holidays, and sick days)
- Average commute times vary significantly by region, with urban areas typically seeing 30-60 minute one-way trips
- Public transport costs often calculated as daily return tickets vs weekly/monthly passes - need to normalize to annual costs
- Driving costs beyond parking (fuel, wear and tear) typically calculated at government reimbursement rates (e.g., $0.50-0.70 per km) but user wants parking only for MVP
- Time value calculations: multiplying one-way trip by 2 for round trip, then by days per week, then by weeks per year
- 8-hour work day standard used for converting commute hours into "work days" equivalent for impact visualization
Phases and TODO
Phase 1: Core Calculator Logic and UI Structure
- [ ] Create HTML structure with input forms for both commute modes
- [ ] Implement CSS styling with Helvetica font, 16px inputs, mobile-responsive layout
- [ ] Build JavaScript calculation engine for time totals (annual hours and work-day equivalents)
- [ ] Build cost calculation logic for public transport mode
- [ ] Build cost calculation logic for driving mode (parking only)
- [ ] Implement mode toggle between Public Transport and Driving inputs
- [ ] Add form validation and input sanitization
- [ ] Display results section with annual time and cost totals
- [ ] Generate hours spent commuting vs hours in year graph
Phase 2: Enhanced Features and Polish
- [ ] Add hybrid/remote work day calculator (days per week in office vs home)
- [ ] Implement cost per hour metric calculation and display
- [ ] Add localStorage persistence for user inputs
- [ ] Create print-friendly stylesheet for results export
- [ ] Add input presets for common scenarios (5-day office worker, 3-day hybrid, etc.)
- [ ] Implement comparison mode to show two scenarios side-by-side