A lightweight responsive workout-planning web app built with HTML, CSS, and JavaScript.
- Responsive mobile-first UI
- Interactive day navigation
- JavaScript state management
- Dynamic workout-set updates by training phase
- Reusable UI components using CSS classes
- Automatic selection of the current day
- No backend or external dependencies
The application provides three progression phases:
- Week 1: Return
- Week 2: Build
- Week 3+: Full program
Selecting a phase updates the displayed sets and repetitions for the strength sessions.
Users can switch between seven days using the horizontal day selector or bottom navigation.
Warm-up, main workout, cardio, and recovery sections can be expanded or collapsed.
workout-planner/
├── index.html
└── README.md
No build tools are required.
Open index.html in a web browser.
The project intentionally uses plain HTML, CSS, and JavaScript rather than a framework. The goal was to build a small functional application while keeping the code easy to understand and modify.
The workout content is generic sample content and is not intended to provide medical or individualized training advice.
Possible next versions could include:
- Exercise completion tracking
- Local storage for workout history
- Weight and repetition logging
- Progress charts
- Custom workout creation
- Export/import of workout plans
- Accessibility improvements