Focus Focus

Inspiration

We wanted to improve student lives by making chrome distraction-free.

What it does

After Focus Focus is loaded into chrome as an unpacked extension, it blocks 50 of the most popular entertainment websites including youtube, netflix, roblox, coolmathgames, chess.com & more. The user is still able to visit these websites, but will only see our HTML/CSS page. They'll also see a random quote each time they click into a 'blocked' website, intended to motivate them to go back to studying.

How we built it

At first, we only had a web page. We experimented with different cool aspects of front-end web development, but it seemed impossible to block other websites from that. So, we turned it into a chrome extension. After watching various tutorials on building chrome extensions we managed to make our own, implementing the HTML/CSS/JS code we had previously written for the website into the page that shows up when clicking into a blocked site.

Challenges we ran into

• Brainstorming ideas
• Collaborating on the code
• Centering divs
• A mysterious horizontal scrollbar

Accomplishments that we're proud of

It works!

What we learned

• How to use Github + Replit
• How to code a moving background
• How to use JS for a chrome extension
• How to link external CSS and JS code

What's next for Focus Focus

We want to continue to polish Focus Focus and hopefully be able to publish it on the Chrome Web Store one day. To be able to block more than 50 websites, we can use a Postgres SQL server and give more control to users with a user interface.

Built With

• css3
• html5
• javascript