H2dOg

Your BEST FRIEND... for hydration!

Comment

Inspiration

WE DON'T DRINK ENOUGH WATER!! On average, people spend 7-8 hours online, and it's easy to forget to take care of ourselves and take a sip of H2O. Thus, a new browser pet was born... H2dOg

What it does

H2dOg follows you on every web page, periodically reminding you to DRINK WATER. The longer you ignore your immensely cute pet, the more passive-aggressive it gets - just like a real-life dog! Once you log your water, your H2dOg will feel happy, but if you stop drinking for too long, he becomes sad and droopy. The simple and cute aesthetic of H2dOg appeals to both older users and younger kids! This extension also serves as a habit-maker for the next generation!

How we built it

We used HTML and CSS to code and format the extension pop-up. With a manifest.JSON file and content-script.js, we transformed our assets into a Google Chrome extension with a browser pet!

Challenges we ran into

  • We started with no knowledge of Google Chrome extension dev., and minimal knowledge of web dev. We are now very comfortable with all of the languages we used
  • We had issues communicating and sending values between the .js file for our browser pet, and the .js file of the extension pop-up. After learning and implementing Chrome Storage API, we could seamlessly communicate between them
  • We also had issues with spawning our index.html as a popup window from content-script.js that controls our on-screen browser pet. We had to create a new file (background.js) to communicate between .js files.

Accomplishments that I'm proud of

  • we've quickly learned and implemented HTML, CSS, and Javascript, making a functioning Google Chrome extension in 48 hours.
  • we coded a working browser pet with cute and simple pixel art

What I learned

  • How to code a Chrome Extension (files like: manifest.JSON)
  • how to code a browser pet! (using content-script.js)
  • fundamentals of HTML, CSS, and Javascript
  • integrating APIs into Chrome extensions (eg: Chrom Storage)

What's next for H2dOg

BROWSER PET FEATURES:

  • animations for dog walking
  • add multiple skins and other pet wear users can equip

EXTENSION FEATURES:

  • a reward system with coins earned every day if the user hits their water goal -> users get to buy and unlock skins and accessories
  • streak system to increase the amount of rewards and incentives to come back and play
  • officially publish our extension so everyone can download it!
Share this project:

Updates