Project: Build a pomodoro timer using TypeScript
- TypeScript
- JavaScript
- HTML
- CSS
In this project, I wanted to apply what I have learned about TypeScript. My goal was here to create a Pomodoro Timer that counts down different durations. I made a very simple design in Figma and build the skeleton and the basic styling using HTML and CSS. Then, I added the functionality using TypeScript. For each of the time durations I used enums to differentiate between the classic pomodoro (25 min) timer and two different break timers short (5 min) and long (15 min). Using event listener function on the buttons that take the enum as an input and update the duration of the timer on click. The timer itself gets updated every second (using an interval) and then displayed on the website. When the timer runs out a alert is played to the user. I also now added a reset button as well as fixed some bugs, where repeated pressing of the start button would speed up the time.
Next steps: Adding some animations and musik.
Project is deployed here: Cloud Timer