https://github.com/hasielhassan/dynamiccalculatorjs
A lightweight, HyperFormula-powered library that transforms simple HTML markup into interactive calculator widgets.
https://github.com/hasielhassan/dynamiccalculatorjs
calculator javascript widget
Last synced: 2 months ago
JSON representation
A lightweight, HyperFormula-powered library that transforms simple HTML markup into interactive calculator widgets.
- Host: GitHub
- URL: https://github.com/hasielhassan/dynamiccalculatorjs
- Owner: hasielhassan
- License: mit
- Created: 2025-03-22T20:02:08.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T20:41:01.000Z (2 months ago)
- Last Synced: 2025-03-22T21:33:07.650Z (2 months ago)
- Topics: calculator, javascript, widget
- Language: JavaScript
- Homepage: https://raw.githack.com/hasielhassan/DynamicCalculatorJS/main/sample.html
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dynamic Calculators
A lightweight, [HyperFormula](hyperformula.handsontable.com)-powered library that converts simple HTML
markup into interactive calculators. Just define a basic `
` with
`` fields and formula placeholders, and call
`BuildDynamicCalculators()` to transform it into a fully functional,
real-time calculator widget.
## Features
- **Minimal Markup**: Use a single `
` with minimal HTML attributes.
- **Formula-Driven**: Leverage [HyperFormula](hyperformula.handsontable.com) to power calculations with
Excel-like functions.
- **Dynamic Updates**: Automatic recalculation on input changes.
- **Easy Styling**: Default CSS styles are provided, with JavaScript
adding extra classes for enhanced layout.
- **Multiple Examples**: Includes three sample calculators to showcase
versatility.
- **Global Named Expressions**: All inputs are mapped to global named
expressions with unique prefixes to avoid collisions.
## Getting Started
## Usage
To use the library in your own project:
1. Include the HyperFormula library from a CDN, and either your own copy of
`script.js`, and `styles.css` of DynamicCalculator from a CDN too in your HTML ``:
```html
```
2. Create your calculator markup by using a container `
`
with the class `DynamicCalculator`. Define your inputs and result
placeholders as shown below:
```html
Annual Interest Rate (%):
Number of Months:
Loan Amount ($):
Monthly Payment ($):
```
Formulas can use any of the built in functions from HyperFormula, you can check the guide and documentation for them here:
https://hyperformula.handsontable.com/guide/built-in-functions.html
3. When the DOM is loaded, call `BuildDynamicCalculators()` to
initialize the calculators:
```html
document.addEventListener('DOMContentLoaded', BuildDynamicCalculators);
```
All defined inputs are converted into global named expressions (with
unique prefixes), and formulas in the result elements are updated
accordingly. HyperFormula handles recalculation automatically.
---
## Examples
The sample page (`index.html`) includes three examples:
1. **Mortgage Calculator**: Calculates monthly payment using the
`PMT` function.
2. **Car Loan Calculator**: Similar to the mortgage example, but factors
in a down payment.
3. **Tip Calculator**: Computes tip per person and total per person.
## License
This project is licensed under the **MIT** license. See the [LICENSE](LICENSE)
file for details.