PCC - Project Cost Calculator

Updated: 2026-02-27

This version runs on jQuery 4.0.0 and includes a 10-scenario real-life demo hub, schema-driven themed demos, strict validation, quote persistence, local autosave/share state, and print/PDF/CSV export from live summary.

1) Package Structure

2) Base Integration

<script>wpcc_domain = 'https://yourdomain.com/PCC';</script>
<script>wpcc_csrf_token = 'server-generated-token';</script>
<script src="lib-pcc/jquery-4.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="lib-pcc/jquery.pcc.js"></script>
<link rel="stylesheet" href="lib-pcc/pcc.css" />
<script>jQuery(function($){ $('#my-form').pcc(); });</script>

If jsPDF is not loaded, PDF action falls back to print mode.

3) Required Form Markup

Each calculator form must use class pcc-form with an ID. The summary container must be that ID plus -show.

<form id="myquote" class="pcc-form" data-curr=" USD">...</form>
<div id="myquote-show" class="wpcc-preview"></div>

Cost fields

4) Strong Validation System

PCC supports required fields, numeric bounds, length bounds, regex, type checks, and custom messages per field.

Supported validation attributes

Custom message attributes

<input
  name="client_phone"
  data-title="Phone Number"
  data-required="1"
  data-pattern="^[0-9+()\\-\\s]{10,20}$"
  data-msg-required="Phone number is required."
  data-msg-pattern="Use a valid phone format."
/>

Invalid fields/groups get .pcc-invalid and are blocked before wizard next step or email send.

5) Multi-step Wizard Mode

<form class="pcc-form" id="quote" data-wizard="1">
  <section class="pcc-step" data-step-title="Scope">...</section>
  <section class="pcc-step" data-step-title="Contact">...</section>
</form>

6) Save/Restore + Share State

7) Export Options

All exports are generated from the live summary output (#formid-show).

8) Conditional Logic + Coupons

Example: data-show-if="timeline=2500;project_scope!=8500"

9) jQuery Plugin API

PCC now exposes a public API for host projects:

$('#my-form').pcc(); // init
$('#my-form').pcc('recalc');
$('#my-form').pcc('validate');
$('#my-form').pcc('getState');
$('#my-form').pcc('setState', stateObj);
$('#my-form').pcc('goToStep', 2);
$('#my-form').pcc('undo');
$('#my-form').pcc('redo');
$('#my-form').pcc('destroy');

Utility object: $.pcc.version, $.pcc.defaults, $.pcc.registerAdapter(name, binder), $.pcc.recalcAll().

10) Events and Hooks

Plugin emits extension events for host apps and no-core-edit customization.

$('#my-form').on('pcc:afterCalc', function (e, payload) {
  console.log(payload.finalTotal);
});

11) Formula Engine and Advanced Rules

<input data-formula="({floor_area}*0.3)+({room_count}*120)" />
<div data-show-if="(timeline=2500 || project_scope=22000) && floor_area>=1000"></div>

12) Schema Mode and Visual Builder

const result = $.pcc.renderSchema('#preview', schemaConfig, {
  skipRestore: true,
  autosave: false
});

Builder supports copy JSON, download JSON (Blob API), import JSON, and render back to interactive form.

13) Rule Debugger Panel

14) Repeaters, Adapters, and History

15) i18n, Theming, Templates, Accessibility

16) Quote API and Admin

SQLite database file is auto-created at data/pcc_quotes.sqlite.

17) Security Notes

18) Demo URLs