Picture this: It’s 12 am. You need to do your chemistry culminating project, there’s an ICS test tomorrow, and the dishes are still sitting in the sink, waiting to be washed. You’re sitting in front of your computer, looking at your long list of to-do’s, thinking to yourself: “Where did all the time go?” If a normal task list doesn’t work, then… what about a timed task list to keep track of where all the time is being spent? That’s how our idea for Klok came to be. Originally, we planned it to be a discord bot, as a lot of people, including us, get sidetracked by activity in discord servers. However, we realized that it would better serve its purpose as a chrome extension, as we would be able to let users block websites that they get distracted by, as well as keep track of how much time they are spending on their tasks. On a side note: Max (being Max) set Shiv’s phone language to Dutch. Clock became Klok, and it just happened to be the perfect name for our project.

What it does

Klok is a chrome extension designed to increase the productivity of the user. Users are able to stay on top of their tasks and workload by actually being able to assess how much time they are spending on each task. Klok allows users to create a to-do list, letting them keep track of the tasks they have to complete. Tasks can be added to the to-do list, with a time limit set by the user, allowing them to work more efficiently, without procrastinating, as they can allocate an exact amount of time per task. Websites can be blocked for each specific task. Notifications will be sent when the timer is up, as well as reminder/motivational notifications during work periods. A summary will also be given at the end of the day, including a graph of how much time was spent on each task and which tasks were completed.

How we built it

Klok was built using HTML, CSS, and JS. Figma was used to design the visuals of Klok. To work together through an online environment, we used Replit.

Challenges we ran into

There were multiple challenges that our team faced while developing Klok. We were all completely new to all three languages we used and so essentially every part of implementing this project was challenging. One thing we really struggled with was implementing the summary bar graph, as well as figuring out how to block websites properly.

Accomplishments that we're proud of

Some accomplishments that our team is proud of includes : The creativity of the name, Klok. (Thanks Max) Innovative method of combining time and task management to raise productivity. Creating an activity graph to allow the user to assess how much time they spent per task. The user friendly and visually appealing interface. (Thanks Figma)

What we learned

Through this hackathon, our team learnt quite a lot. We gained plenty of skill with languages such as HTML, CSS, and JS. We also learnt how to utilize applications such as Figma to prototype our software. In addition, we gained knowledge on creating chrome extensions. Overall, this hackathon was a great experience (despite the lack of sleep).

What's next for klok

Website Blocker : Bugs and glitches have to be resolved for the website blocking feature. Once this feature is fully functional, users will be able to add websites to block, enabling them to stay on task, and reduce procrastination.

Full Features: As we did not have enough time to perfect Klok, some features in our Figma plan still need to be implemented, such as sleep time and settings popups, as well as motivational notifications.

Points System : A points system, where users gain points every time they complete a task, will act as an incentive for users to complete tasks efficiently, and on time.

Built With

+ 1 more
Share this project: