Online Demo:https://ddddkim0525.github.io/TimerPlus3-copy/index.html
TimerPlus3 is a music-player like Timer! It is written completly with pure javascript and css.
I enjoy using the tomato timer (https://tomato-timer.com/), but always wanted a bit of more customizable time sequences.So I thought it would be interesting to create a timer with interface very similar to an MP3 player, where you will have tasks rather than songs.
I built this mini web app with 7 conditions in mind.This was to force myself to complete a project, rather than having multiple unpresentable prototypes.
- The project is done in 3 days.
- Focus on completion than perfection.
- Make only using pure Javascript and CSS
- Look good on first glance.
- Responsive design for different screen sizes.
- Seperate DOM and internal Data structure.
- Plan first with UML, then code.
I've spent around 9 hours spreaded around 3 days to complete this project. By setting a strict deadline, I was constantly pressured to reacess my capabilities, and forced me on design decisions on which features I should work on first, and which could be dropped to deliver the project on time.
I've never written UML beside my software engineering course, so its probably not in correct syntax. I've seperated two class: the Timer part and the Task List part. I plan to use drawing tools such as draw.io for my future projects for cleaner documentation.
This project was also to review and test concepts learned from the beginner learn path from frontendmaster course. So I got to practice CSS concepts like flexbox, grids, Javascript concept such as this context, class syntax, DOM manipulation, and closure.
I dropped the shuffle feature in the end due to time constraints. This is definetly not the finaly product much refactoring and documentation is needed. I plan to visit this project after a have a grasp with React, to see my improvements.
It feels good to finsih a project, whether big or small. This project really helped me to realize that a finish project doesn't need to be perfect,fully packed with feautures planned from the start to be considered publishable. I hope this will give me enough inertia to tackles larger projects, and solidify my theoretical knowledge.