ShahCalc – Visual Calculator Builder

Description

ShahCalc lets you build interactive calculators (loan and mortgage payments, ROI, pricing quotes, fitness and health figures and more) without writing code. Define the inputs, assemble a formula visually, style the result, and embed it with a shortcode, a Gutenberg block or an Elementor widget.

How it works

• Visual builder. Add number fields, sliders, dropdowns and checkboxes. Build the formula by clicking fields and operators, or type it. The builder validates the formula as you go and shows a live preview at desktop, tablet and mobile widths.
• Safe formula engine. Formulas are parsed into an abstract syntax tree and evaluated by walking that tree. Formula text is never executed as code: there is no eval() and no new Function(), on the server or in the browser. Supported: + - * / ^, parentheses, numbers and field IDs.
• Vanilla JavaScript. No jQuery and no charting library. Results update as visitors type, with an animated count-up and a small SVG chart.
• Style isolation. Each calculator renders inside a Shadow DOM, so theme CSS does not restyle it and its CSS does not leak into your theme. Colors, borders, radius, typography and spacing are configured through a fixed set of CSS custom properties.
• Gutenberg block. Search for “ShahCalc” in the block inserter.
• Elementor widget. Pick a calculator and style it from the Elementor Style tab. Elementor is optional.
• Shareable results. Visitors’ inputs are reflected in the page URL (query string) so a specific result can be bookmarked or shared.
• Loads only where needed. The front-end scripts are enqueued only on pages that actually display a calculator.

Who can manage calculators? Administrators only (the manage_options capability). Published calculators are visible to all visitors; drafts are visible only to people who can edit them.

Usage

1. Go to ShahCalc in the admin menu and click Create New (you can start from a template).
2. Add fields, build the formula, style the calculator and click Save Calculator.
3. Embed it with [shahcalc id="123"], the ShahCalc block, or the ShahCalc Elementor widget.

Shortcode attributes: id (required), show_title (true or false, overrides the calculator’s own setting).

Privacy

ShahCalc does not set cookies, does not store visitor data, and does not contact any external service. The shareable-URL feature writes the values a visitor types into their own browser’s address bar. If your analytics or server logs record full page URLs, those values will be recorded too.

Source code

The complete, human-readable source, including the unminified React (JSX) sources for the compiled files in the build/ directory, is public on GitHub: https://github.com/Junaidshah1234/shahcalc

To rebuild the compiled files: clone the repository, run npm ci, then npm run build. The build uses @wordpress/scripts; the entry points are src/builder.jsx, src/dashboard.jsx and src/block.jsx. The scripts in public/js/ are not compiled and are shipped as written.

Technical details