I first set out to create a simple countdown timer for myself to practice various aspects of JavaScript.
Wanting an exercise timer for myself, I soon morphed the simple project into a Tababta style workout timer that grew in complexity.
Workout Timer: GitHub
Project Requirements:
- HTML Structure: well-structured to represent the timer and user interface components
- CSS Styling: design an aesthetically pleasing and responsive user interface
- JavaScript Functionality: include handling user input, updating the display dynamically, and controlling the timer based on different workout phases
- Object-Oriented Programming: to organize the JavaScript code
- Event Handling: utilize event listeners to capture user interactions with buttons and trigger corresponding functions
- Dynamic Timer Display: update the timer display dynamically, reflecting the current phase and time remaining in minutes and seconds
- User Experience: visually indicate the current phase, and use appropriate transitions/animations
- Customization Options: allow users to customize the workout parameters
- Validation and Error Handling: implement input validation to handle negative numbers or non-numeric inputs
- Responsive Design: design the application to be responsive, ensuring it works well on various devices and screen sizes.
Lessons Learned:
- Reinforced the practical aspects of web development
- Interactive user interface
- Code modularity (classes) and Organization: increase maintainability and readability
- Time management with JavaScript: handled time related events and operations
Continued Development:
Here are a few things I'd like to add in the future:
- Speech synthasis to phase transitions
- An audible tick or vocal 3 second countdown for each phase
- Add a toggle for a digital or analog clock
- Add a progress bar for each phase and or workout
