Inspiration
Tetris has always been one of my favorite games to relax. I also use the Pomodoro technique when I'm trying to complete homework or other projects. Naturally, I wondered, why not combine the two? And thus, the Tetradoro Technique was born. But of course, I couldn't find an existing website that already did this, so I made it!
What it does
This project is a standard Pomodoro timer that automatically turns into a Tetris page during the 5-minute break period between pomodoros. It has start/pause buttons, vacation-themed music constantly playing in the background, and beautiful sunset beach pictures that change every few minutes.
How we built it
This website was entirely built with HTML, CSS, and Javascript.
Challenges we ran into
Trying to set up multiple timers that functioned properly was a challenge, specifically during the Pomodoro break period / Tetris period. Not only did each piece need to drop every second, but this couldn't be linked to the 5-minute timer used to limit the length of the Tetris break. Making the Tetris game fully functional was also difficult, as this required ensuring that each cell displayed the right color of seashells (or no seashell for the empty cells) and updated properly with each movement.
Accomplishments that we're proud of
I'm proud of making this fully functional. There were a number of bugs that I needed to fix along the way that only compounded with my inexperience in web development. From getting the styling on each feature just right or making the JS files work as intended without overloading the console with errors every second, there were a lot of problems I managed to fix.
What we learned
I have extremely little experience working with HTML / CSS (beyond playing with Inspect Element on my favorite web pages) and absolutely none with javascript. However, I was very familiar with java to begin with, so I knew I'd be up for the task. Understanding how JS can be used to target elements and change their properties, figuring out the difference between IDs and class names for HTML elements and how that impacts queries from the javascript or the CSS selectors, and more all happened over the weekend.
What's next for Tetradoro Technique
There are a few more features that would make this project better, from adding progress bars and notifications to settings buttons to modify pomodoro length / music / backgrounds. I plan on learning more and using that to make this website even more user-friendly and useful in the future.
Log in or sign up for Devpost to join the conversation.