Spare to Care

Inspiration

With 2020 presenting the world with increasingly difficult challenges, various social movements have become more relevant than ever. As we thought about the role technology plays in advancing social discourse and the obstacles that stand in the way of modern day activism, we realized the importance of educating our community on social movements and how to contribute to them. Under the current circumstances of shelter in place, giving donations to organizations remains one of the most accessible ways for individuals to do their part in advancing social movements. We decided to follow the Identity Track and build Spare to Care, a Google Chrome extension that incentivizes and streamlines the donation process.

What it does

Spare to Care features an embedded button on purchase checkout pages, which gives a user the option to round up their order total from popular online retailers. Each time the user rounds up, the extra amount is added to an accumulated total which serves as a donation pledge. From our extension site, the user can then view information about a variety of organizations. There, users can read about the impact a donation can make and choose one to donate their pledge, which will open the organization’s donation page in a new tab with their pledge amount autofilled into the webpage.

How we built it

To build this extension, we first created a JavaScript backend that reads and extracts site data, performs calculations, adds site HTML elements to websites, and applies the chrome.storage API to store user data in a local cache. More specifically, on the checkout page of a vendor, it calculates the donation amount by extracting site data. We modified the checkout page to add a button that would allow the user to round up their purchase total and accumulate their donation. We used the chrome.storage API to store the user’s accumulated amount in a local cache, which needed to be accessed from donation sites, purchase checkout sites, and our extension site. The extension site, which appears when the user clicks a button from the extension pop-up, was built using HTML, CSS, JavaScript, and React, and is designed to have a simple, easy-to-navigate interface. Finally, we created JavaScript functions that would read data on donation sites and autofill a user’s cached donation total.

Challenges we ran into

We had trouble adding functionality to the checkout button in JavaScript, and when attempting to rewrite it html, the same result was created. After returning to JavaScript and trying many possible solutions, the button finally worked by creating the button on the webpage, then declaring the button a second time using the id of the created button. Additionally, when using a query string to pass parameters into the donation sites, at first we were unable to find the id’s for the input elements on each website. We later found that many clients allow users to pass a custom query string with ?amount= to autofill donation amounts. Lastly, one of our largest challenges was understanding the chrome.storage API, especially the chrome.storage.local.set and chrome.storage.local.get methods, which use callbacks in order to track user data across sites.

Accomplishments that we're proud of

A few components that we’re especially proud of are pre-filling the donation amount, integrating all three aspects of the extension (checkout button, extension site, and the autofill on the donation page), and the final clean look of the site.

What we learned

With three out of the five of us having never attended a hackathon before, it’s safe to say we learned a lot individually and as a team. We learned more about web design and HTML, using React to improve user interface, and the Google Chrome storage API that tracks user data and utilizes local caching.

What's next for Spare to Care...

We're extremely excited to launch Spare to Care! In the future, we hope to add more vendors and charities for users to connect with, build a profile for each user to store their personal information, and introduce a feature that stores and displays a user’s past donation history.