Nurse to Tech in 16 Weeks —Week 6

I Made a Music Streaming-Pomodoro Timer Web Application


I would not have been able to make it through college without the Pomodoro method. For the uninitiated, it is a study timer that gives one short breaks in-between periods of focused work. After a certain number of cycles, you get a long break before you begin focusing again.

I have probably gone through countless cycles of studying, but I have yet to find a timer application that fit all of my needs. I want to stream music and set my focus timer within the same application. That is where the idea for Studify was born.

I made this web application using vanilla JS, CSS, and HTML. The playlists that I curated were accessed using the Spotify API. Be warned that you will need a Spotify account to use Studify on mobile.

It took much longer to get through the authentication than I had initially anticipated, but I was able to implement all of the features I wanted for the app.

There are three modes that correspond with how much the user has procrastinated. Each mode comes with its own color scheme and playlist. The playlists are called through the Spotify API using the playlist endpoint using my user id and playlist index. I curated each playlist myself.

Once I was able to finish the Spotify component of the app, I spent the majority of my remaining time on creating the timer. In order to have different modes with automatic mode switching, I had to create a timer object that held the modes, the modes’ remaining time, the mode’s default times, and the number of focus cycles the user has gone through. I put this object through several functions that start and continually update the clock and buttons. Once the number of cycles hits 4, the timer will automatically switch to the long break mode, and reset the number of cycles completed to 0.

To create the circular progress bar animation, I used an outline of an SVG circle. Using .strokedasharray and .strokedashoffset, I changed the endpoint of the outline as the clock was updated to eventually reveal the full outline.

The last page is a dummy page for user accounts. The credits for the alarm sounds and button images used can be found here. This was my least favorite page to complete as it was purely CSS styling. In the future, I could add local storage that allows the user to track the total amount of time they had spent studying.

All in all, I am pleased with how this project turned out. I am have actually been using it myself during boot-camp hours. If you would like to clone my repo, you will need to create an app on Spotify Web API to receive a client ID and client secret. If you would like to check out my code, it can be found here on my Git.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store