You can play with the application yourself at this link.
This is a simple 25-5 clock, made for tracking the 25-5 minute session/break cycle. Session and break time can both be configured by using the arrows above and below the break length and session numbers. At the end of your session timer, a beep will play signifying that it's time for a break. At the end of the break, another session will immediately start. You can pause and start the timer by pressing the play/pause button. The button will update depending on what action it will perform (play for play, pause for pause). The reset button can be used to reset the timer back to session mode, with whatever the session length is set to. It will also stop the audio from playing if it's playing while clicked.
- Vite: A build tool that offers fast development and optimized production builds for modern web applications.
- React: A JavaScript library for building user interfaces, allowing for the creation of dynamic and interactive components.
- TypeScript: A statically typed superset of JavaScript. It provides strong type checking, which enhances code quality and maintainability.
- 'src/': At the heart of the application, the 'src/' directory houses various project assets, the main.tsx file for routing, the App.tsx component for program functionality and structure definition, the App.css file for application-wide styling, and the the index.css file for root and body styling.
Feel free to contact via email!
- No known issues at this time, if you find any feel free to let me know! :)
- Increment and Decrement both Session Timer and Break Timer, and Show Updates in Realtime ✅
- Functioning timer set to the Users Session Length input ✅
- Session timer switches seamlessly to break timer at the end of the session ✅
- Break timer switches seamlessly to session timer at the end of the break ✅
- Audio plays at the end of the session timer, to signify it's break time ✅
- Button to handle pausing and playing of the timer ✅
- Pause/Play button design changes to reflect the current functionality ✅
- Make use of FontAwesome icons to add additional style to site ✅