Charity Widget

Vue.js - Browserify - UI Design - HTML5 - CSS - Stylus


SUMMARY

The charity widget is a way for site owners to accept donations to their non-profit without redirecting the reader to another page. Similar to crowdfunding sites, each widget is customized with up to five donation options including a custom amount, with corresponding gifts or descriptions of where their money is going.


The requirements for this project were simple, but specific. Because the widget needed to work on any page with minimal dependencies, I went with Vue.js for its small footprint, Browserify to package the HTML and Javascript into a single *.js file, and Stylus for CSS.


In terms of design, I went with a very minimal look. Each color and font is totally configurable in order to match the styling of whichever page the widget is used on.

FEATURES

  • Custom amounts
  • Custom descriptions
  • Built-in form validation
  • Specify page ordering
  • Optional form fields
  • Optional form fields
  • Change page order