ROI Mortgage Calculator
AlphaCalc.js - Quick Start Guide
AlphaCalc is a powerful calculator library specifically designed for Webflow projects. It lets you build interactive calculators without custom JavaScript coding.
Basic Setup
- Include the library (place in Header code):
<!-- AlphaCalc.js - Webflow Calculator Library -->
<script defer src="https://cdn.jsdelivr.net/gh/jpthedio/alphacalc@2.2.0/dist/alphacalc.min.js"></script>
- Create your calculator container (place in Form Block):
<div data-alphacalc-calculator="MyCalculator">
<!-- Your calculator elements go here -->
</div>
- Add inputs with unique identifiers and values (alphanumeric A-Z 0-9):
<input
type="number"
data-alphacalc-input="price"
data-alphacalc-value="100"
>
<input
type="number"
data-alphacalc-input="quantity"
data-alphacalc-value="2"
>
- Display calculated results:
<div data-alphacalc-output="price * quantity">200</div>
Key Features
- Formula Support: Use simple JavaScript expressions with your input values
- Multiple Input Types: Works with text inputs, numbers, checkboxes, radio buttons, and select dropdowns
- Real-Time Calculations: Updates automatically as values change
- Loading Indicators: Shows when calculations are processing
- Formatting Options: Control decimal places and number formatting
Example Calculator
<div data-alphacalc-calculator="ExampleCalc">
<label>
Price: $<input data-alphacalc-input="price" type="number" value="10">
</label>
<label>
Quantity: <input data-alphacalc-input="qty" type="number" value="1">
</label>
<div>
Total: $<span data-alphacalc-output="price * qty">10</span>
</div>
</div>
Example Calculator with Custom Inputs
AlphaCalc.js - Comprehensive Documentation
Now you have both a quick start guide for AlphaCalc.js and a comprehensive documentation that goes into much more detail. The full documentation covers everything from installation to advanced usage patterns, with plenty of examples and code snippets to help you implement calculators in your Webflow projects.
Link to comprehensive documentation. NOT YET WORKED ON
SEE MORE EXAMPLES BELOW
Roadmap
Near Future
- Current focus
- Connect with CMS. haven't tried but is possible in theory
- Parsing of value numbers. Values from Plain Text field to be parsed then outputted to a number field
- Remove
=
for output. default to look for fomula, if only 1 element, assume as a mirror value - ‼️ prevent form/s submission by default. test
- ✅ if the calculator is a form or has a form or is inside a form then prevent from submitting
- ✅ override with
data-alphacalc-allowsubmit='true'
- ✅ placed in the calculator element for all forms; ancestors and descendants
- ✅ or placed in the form element for each specific form
- ✅ edge case of having a different button for calculate and submit form to be tested
- ✅ calculation debounce/delay
- ✅ option loading element
- ✅ alculation active class
- ✅ setter bugs
- ✅ formulas to work on display elements without needed inputs
- ✅ check multiple getters from one input if working
- outputs
- ✅ remove
display
,from
and use output - check use
output
or=formula
value in selects, radios, and checkboxes to dynamically store value
- ✅ remove
- loading element
- control visibility property by default if no
classactive
attribute found
- control visibility property by default if no
- setters
- use
to
element with an object value to set multiple values with one button{ N1: 500, S1: 3.5 }
- ✅ use
set
instead ofto
- use
- easy copy-paste elements Relume style for component library
- ✅ Rename method
DisplayManager()
toOutputManager()
- Query parameters to set value and be generated
- Additional options
- Element visibility option
- control with CSS generated by JS?
- default setting in calculator
data-alphacalc-defaulthidden="true/false"
- element
data-alphacalc-hidden="true/false"
- ‼️ check and test. currently not working. Autocalculate = true/false
- if false, use a button with custom attribute to do a calculation
- ✅ Debounce option before calculation
data-alphacalc-debounce="200"
- ✅ Natural delay debounce
- ✅ Animated option. show element while waiting for debounce
- ✅ Display elements animate with active class
data-alphacalc-classactive="is-active"
- ✅ Custom JS to run calculator / calculations
- Add event or option custom JS to run after each calculation
- Label controls
- label options and overrides
- use custom attribute then children's name
- visibility: show/hide depending on debug
- what to show:
name
,cell
,name, cell
,formula
- placement:
top left
,bottom right
... - Text element labels
- maybe a fixed tooltip that follows mouse to show label in texts?
- or wrap texts to have labels
- label options and overrides
- Element visibility option
- More debugging tools
- default to show only on
webflow.io
- attribute overrides this
- Call out missing elements/cells
- if formula has a missing cell, log it
- default to show only on
- ‼️ Topologically sort formula executions to avoid execution bugs/errors
- Additional formula expressions
- check if negative values work and workaround if not
- ❌ (not doing. input value name is enough) Option for using names
Name A + Name B
instead of cell namesA1 + B1
- Sum of a column/row
SUM( A1 + B1 )
- Exponents
A1^B1
- Squareroot
SQRT(A1)
- Percentage
45%
to0.45
in formula calculation - Absolute
ABS(A1)
- Random number
RAND()
from 0 to 1 - JS math can be used?
- Spreadsheet math can be used?
- look into other forms of JS maths. others might be more accurate
- Additional inputs
- ✅ Checkbox groups by {Finsweet
- ✅ Radio groups by {Finsweet
- ✅Webflow Radio to have started checked/active
- Radio and Checkbox custom toggle value when on and off [-100, 300]
- Radio reset
- right now, just another radio with 0 or 1 value (depends on formulas used)
- ✅ Slider element by {Finsweet
- Slider or other inputs options
min
andmax
to be based on aninput
value
- Fix bug
- ✅ Slider setter button to set value (update code to push a change to update FS slider)
- ✅ Update display elements after initial values are set on load
- ✅ Select dropdown element by {Finsweet
- Input counter by {Finsweet
- ✅ Setter / To for single elements not working
- ✅ input slider to push change when set
- Setters / To for multiple elements with one button
- Full calculator setter like case 1, 2, 3...
- by button mirror click to many setter
- or object value of setter
-
{ "A1": 300, "S1": 0.5 }
A1:300, S1:0.5
-
- Random values
- Full calculator setter like case 1, 2, 3...
- Display ideas
- ✅ Change display and formula elements to output elements?
- ✅ change
display
,from
tooutput
- Others
- Check for infinite calculation loops. stop calculator if any
- Commas in input fields, attribute value
- international and localized formats
- Stylized forms. free/paid
- with a multi-step form
- quiz
- Graphs for results
- SEO
aria-label
generated by name or placeholder for inputs- Table generator for sample computations. Can be for human visitors or SEO, site crawlers. to understand what the calculator does and how are the calculations done. Mostly so robot/AI can understand the calculator
- can be screen-reader-only
Far Future
- Full documentation
- GSAP count fromTo animation of results
- Alternative selector for radios, checkboxes. Edge cases. needed?
- Apps Script: Google Sheet to JSON calculator blueprint
- ChatGPT Agent: JSON calculator blueprint to Webflow HTML
- Webflow App
- Set attributes instantly. and just remove others
- Google Sheet to Webflow Calculator Builder
- Calculator management
- Calculator free & premium templates
Pricing
- Free tier $0/mo
- core functionality. 90% of use cases
- staging link. all calculators work
- production domain. first 2 calculators loaded work by user visit
- Free library of calculators
- Free cloneables
- Features
- Calc reset
- Calc setters
- Paid tier $18/mo ($180/yr)
- all of free
- staging and production domain. unlimited calculators
- Calculator memory
- math extensions
- math.js
- decimal.js
- accounting.js
- query parameters
- setter for multiple inputs
- JavaScript API
- onCompelet JS
- Custom message per input
- Premium library of calculators
- Slack/Discord Channel Support
- Geolocate based values
- Progress indicator?
- Feature request
- Done for you calculator by JP
- $2k+ per calculator. Webflow build and AlphaCalc.js implementation
- $1k per calculator. AlphaCalc.js implementation
- $0 FREE. Use AlphaCalc.js by yourself