HabitPets

• 

  The default pet!

• 

  Sad pet with different color scheme!

• 

  Sad pet with ice cream accessory!

Inspiration

For the Apple users out there, you might have hatched your very own Tamagotchi on the touch bar. Games like Webkinz also has users taking care of pets. We wanted to harness the adorable look of these pets while channeling their cuteness to inspire users to be more productive. Another consideration was that it's not enough to just block websites. That often leads to burnout and lower willpower. We wanted a way to reward productivity. Thus, HabitPets was born! By using our extension, you can make the CHANGE to be productive!

What it does

HabitPets is a fun chrome extension that inspires you to be more productive by tying your internet habits to the happiness of an adorable blob pet. If you spend time on a productive website, such as KhanAcademy, you gain diamonds. If you spend time on an unproductive website, such as instagram.com, your pet becomes sad and you start to lose diamonds. With diamonds, you can buy accessories and customize your pets color scheme any way you like! By gamifying productivity, we're hoping to inspire people into leaving distractions behind!

How we built it

To create the chrome extension, we used html, css, and a whole lot of javascript! None of us had experience with chrome extensions, so we followed the Google developer set up instructions to get started. From then on, we worked on adding more HTML popups until we got the full working shop and popup!

Challenges we ran into

Since none of knew how to make a chrome extension, getting started was the first big challenge. Once we did that, the next issue we ran into was the concept of storing information long term, which was linked to purchases in the shop. Our first idea was creating a separate website. Unfortunately after putting in effort into making a website, we realized that extensions don't interact with websites as we expect. Thus, we had to quickly figure out a work out, which was putting the shop into the popup.

Accomplishments that we're proud of

We're most proud of completing the project, especially given how much we had to learn and experiment with over the course of the hackathon. No one in our team had ever made a chrome extension, so this was a big deal!

What we learned

The biggest takeaway from this was learning to adapt to situations when using unfamiliar coding tools. We learned to quickly redesign our code plan and adapt it to the circumstances. Beyond that, we also learned how chrome extensions interact with web pages. Something none of us knew was that extensions use the Storage API to store information across new windows!

What's next for HabitPets

HabitPets is a really customizable extensions, and we had so many ideas that we just didn't have time for! First, we want to add more options to customize your pet and add more to the shop, such as powerups. Secondly, we want to add anti-cheats, such as stopping people from farming points by making sure they're moving their mouse. With even more time, we'd really like to make this a multi-player activity, where you can see other people's browser pets. We hope that you can be motivated by your friends and your friend's pets in order to become more productive.

Built With

• css
• html
• javascript
• json
• storageapi