• 

  Pomodoro Timer: Choose how long to work before you take a break.

• 

  Todo list: Quickly refer to your most pressing tasks.

• 

  Entering a new site: Extension asks if you'd like to add it to the whitelist or blacklist

• 

  Entering a blacklisted site: Extension prevents you from interacting with blacklisted sites. Got to options to change this.

• 

  Options page: Add or remove pages from your blacklist and whitelist.

Distract Block

Filter out distractions using the Distract Block Chrome Extension! The pandemic has made it incredibly hard to focus on the tasks at hand as distractions on the web are just a click away. We can help!

Background

The pandemic has been awful to so, so many of us. It has become harder and harder to stay focused on things like school and work. There are so many distractions that are just looming around the corner. At the same time, it's easy to get entirely entranced by your computer for hours if you're not careful. I sure know it happens to me. While these aren't specifically pandemic problems, it sure has exacerbated many of the things we have to deal with on a daily basis just like this.

Inspiration

What motivated us to make this project is our drive to become better students and break out of bad habits. Procrastination is a problem most students face in their everyday lives. (Especially now since everything is online) Having tools like these can help minimize our "lazy moments" we all face.

What it does

The Distraction Block is a chrome extension that helps students develop their time management skills, and overcome detrimental habits that hinder their ability to reach success. This extension includes 3 features: A Checklist (To-Do List), A timer accompanied with a focus mode and study break mode, and finally, a website blocker to help avoid distractions.

How we built it

Our team has used the following languages:

• HTML/CSS
• JavaScript
• Chrome Storage API

Challenges we ran into

Logic of the timer, storage of the to-do list, limited skill level members

Accomplishments that we're proud of

Getting this project done with 3 members that all share their first hackathon. All 3 members were exposed to new languages, new concepts and learned a lot.

What we learned

Basic/In depth of JavaScript (DOM manipulation), chrome storage API, how to make a chrome extension

What's next for Distraction Block

• Adding notifications for our timer to better manage your work time
• Improving interface and adding APIs like Google Tasks
• Adding to Chrome Web Store so anyone can download for their browser.

How to Use it

It takes lots of time to get an extension published with the Chrome store. Meanwhile, you can use the app yourself by following these directions:

1. Download and unzip the code from https://github.com/julian-hecker/distract-block
2. Use the Chrome URL bar to search for chrome://extensions
3. Enable developer mode, click Load Unpacked, and select the folder with distract-block.
4. Enjoy heightened productivity!

Built With

• chrome
• css3
• html
• javascript