We started by brainstorming around an overarching theme involving either mental health, health, and making the mundane fun. After coming up with a list of over a dozen different ideas, we noticed everyone had a similar idea to make a productivity application, that's how we ended up going with the clock tab.

What it does

Clock Tab is a minimalistic web app that simply displays the current time (centered in the window), with the purpose of increasing a user's productivity by unknowingly recognizing the passage of time. The application also comes with a to-do list feature, 3 different timer intervals, and an inspirational quote generator.

How we built it

This single-page frontend web app is constructed with HTML, CSS, and JavaScript. Clock Tab is split into 3 boxed sections, header, main body, and footer. The header consists of two drop-down menu lists, one for the to-do list and the other for timers. Opposite in the top right corner is the Clock Tab name, and when a timer is activated it will substitute over the name. Moving down in the beige coloured section is the main body clock area. The clock is actually divided into many smaller boxes, one for hours, minutes, seconds, am/pm, date, and month. Lastly, at the bottom footer, we have our copyright statement in the center. Bottom left corner is the random inspirational quote generator, and opposite in the bottom right is a pop-up collaborative playlist full of chill bops for studying!

Challenges we ran into

To be fairly honest we didn't run into any major problems at all. As a group, we planned each step of the way very clearly and had quick update meetings every hour or so to stay on track. There were some small challenges when it came to the coding aspect of things, however stack overflow and w3schools were amazing in helping us solve the problems.

Accomplishments that we're proud of

Actually managed to make a working web app
Figuring out how to gather local time of user’s computer in javascript
Implement a working to-do list into the header navbar
Implementing a spotify playlist seamlessly into the interface

What we learned

Creating dropdowns and other functionality through pure CSS
How to parse data from .csv files
Working with HTML, CSS, and JS in conjunction

What's next for Clock Tab

We have many plans for the future of Clock Tab, once it becomes a more popular app, features like changing different colour palette themes, light/dark mode options, and a backend to store the to-do list options could all be implemented. Javascript could also be updated with new animation options, like clicking on the clock to make it zoom fit to tab's max width.

Built With

Share this project: