DILLIGAD

Inspiration

We enjoy watching videos of people hiding tiny ducks around houses and office spaces for their family or co-workers to find. We thought, why not make something that hides ducks in random places on the internet? Ducks that wear different silly costumes and have personalities tap into the joy of serendipity and makes being on the internet a little bit whimsical and unserious.

What it does

This extension triggers random ducks to appear onto any website you visit. The duck sprites are random and are meant to be collected by clicking on the duck once they are found and they get added to your duck barn that can be viewed on our webpage. For the purposes of the demo, we made sure a duck is placed on every webpage upon loading, but this will be changed to a smaller chance for the final extension.

How we built it

Kristin made a chrome extension skeleton with a manifest.json file and built out the JS, HTML and CSS files that would make the pop-up side panel when you click on the extension icon. The functions to randomize the position and spawning of the duck were also created within the JS file. Harini drew the different ducks on Procreate and used Illustrator to convert them into SVG files that were later incorporated within the code. We use chat-GPT to generate code in most files but with significant amount of our own customization and editing.

Challenges we ran into

Getting the ducks that you encountered to save to the local memory of your browser so that the barn truly keeps track of the ducks that you have found. Passing data between the side panel and content scripts.

Accomplishments that we're proud of

Completing a functional project during our first ever hackathon!! And we both have also never made a chrome extension before so that was a very fun adventure for us.

What we learned

We really had to push ourselves beyond our comfort zones for this project. Harini was not very familiar with JavaScript and collaborating on Git before this hackathon and learned a lot about front-end development. We came into this project thinking that this would be a simple, accomplishable project for the hackathon and worried that it would be too simple even, but as time progressed, we found ourselves encountering numerous problems. This project really taught us that even the seemingly simple and straight-forward looking build can be complicated in reality.

What's next for DILLIGAD?

To add additional functionality to this whimsical creation, we would like to allow users to customize the trigger for the ducks to benefit a health goal. For example, a "drink water" mode will spawn ducks at regular intervals to remind the user to drink water when they encounter a duck.

Also, more ducks! We love creating these ducks that all have a story behind them that is centered around our life and friends in some way. They bring us so much joy to create. We have a very long list of ducks to include already. Just as it brings us happiness to include ducks are personal to us, we really wanted to include an image generator so that everyone can create ducks that are personal to them. We had hoped to use Modal to create an API call to an image generator model within the extension that would allow users to generate their own ducks.