https://github.com/derrickreimer/giving-calculator

A simple embeddable JavaScript giving calculator.
https://github.com/derrickreimer/giving-calculator

Last synced: 5 days ago
JSON representation

A simple embeddable JavaScript giving calculator.

• Host: GitHub
• URL: https://github.com/derrickreimer/giving-calculator
• Owner: derrickreimer
• Created: 2022-08-18T01:37:08.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-18T12:03:46.000Z (over 2 years ago)
• Last Synced: 2024-10-30T00:37:12.770Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://derrickreimer.github.io/giving-calculator/demo.html
• Size: 178 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Giving Calculator

A simple embeddable JavaScript giving calculator.

Check out the demo here: https://derrickreimer.github.io/giving-calculator/demo.html

## Usage

First, you'll need to upload the [`dist/embed.js` file](https://raw.githubusercontent.com/derrickreimer/giving-calculator/main/dist/embed.js) to your web host (wherever CSS, JavaScript, image, etc. live).

Then, add the following HTML on the page where you'd like to embed the calculator and replace `/path/to/embed.js` with the URL where the script file is hosted:

```html



```

You can configure the duration of the campaign by editing the `data-years` attribute and the gift levels by editing the `data-gift-levels`. Each level represents a total commitment over the duration of the set number of years.

The calculator is unstyled by default, but you can apply CSS by targeting `#giving-calculator`:

```css

#giving-calculator table {

  /* general table styles... */

}

#giving-calculator table th {

  /* header column styles... */

}

#giving-calculator table td {

  /* body column styles... */

}

#giving-calculator .currency-input {

  /* currency input styles... */

}

```

## Development

Run the following command to rebuild the `dist/embed.js` script. For convenience, we are committing a copy of the built script to Git, so you should run the build before committing changes.

```bash

npm run build

```

Open the demo page to test things out:

```bash

open demo.html

```