Build a Service Quote Calculator with JavaScript

Try the working MVP

Describe the result, then build it

A browser-based estimator that multiplies hours by an hourly rate and adds fixed extras. The result is labelled as an estimate so it cannot be mistaken for an accepted order.

1. Write down your unit, rate and extras. Decide which inputs customers may change; a public customer calculator should usually keep your approved rate in configuration.
2. Use labelled numeric inputs with explicit units and bounds. The demo allows editable rates so you can explore the formula.
3. Calculate using quote(hours, rate, extras). Convert monetary amounts to integer cents, then round the extended hourly amount once.
4. Show the assumptions alongside the estimate. Before accepting an order, recalculate with trusted server-side rules and store the pricing version.

Build your version with AI

Copy this prompt into your preferred coding assistant. It is a starting specification, not an assurance that generated code is correct.

Review the first draft

Ask next: “Explain each function and its inputs. Identify assumptions that could change the result. Add tests for the edge cases below, then show me the exact files you changed.” Run the tests yourself before replacing the working version.

Understand the important code

quote() is a pure function: it returns integer cents without reading the page. The submit handler reads inputs and writes the result with textContent. Separating calculation from rendering lets you test price rules before changing the design.

The tools share one dependency-free script. Its pure functions also run in Node; browser setup only runs when a document exists. This keeps arithmetic and parsing testable without a server.

Full runnable source

This page is the runnable implementation. Reuse its demo markup, the shared script and stylesheet. No build step, API key or database migration is needed.

• Complete JavaScript source
• Tool and print styles

<div data-business-tool="quote"><p>Try your own assumptions. Values below are fictional demo inputs, not How2Code prices or a binding offer.</p><form id="tool-form"><label>Estimated hours <input id="hours" type="number" min="0" max="1000000" step="0.25" value="4" required></label><label>Hourly rate (USD) <input id="rate" type="number" min="0" max="1000000" step="0.01" value="25" required></label><label>Fixed extras (USD) <input id="extras" type="number" min="0" max="1000000" step="0.01" value="10" required></label><button>Calculate estimate</button></form><output id="tool-output" aria-live="polite">Enter your assumptions and calculate.</output><p id="tool-status" role="status"></p></div>

For a standalone page, place the markup inside a normal HTML document, link business_tools.css in the head, and load business_tools.js with defer. Keep the IDs unchanged; include only one tool per page.

<link rel="stylesheet" href="business_tools.css">
<script src="business_tools.js" defer></script>

Test the result before publishing

4 hours × USD 25 + USD 10 must return USD 110.00. Try fractional hours, zero, an empty required field and a negative value. Confirm changing inputs does not submit a real order.

Check keyboard navigation, narrow screens and the browser console. In this repository run node tests/business_tools.test.cjs for the calculation/parser checks and python manage.py test for Django routes and rendering.

Publish it

For a standalone tool, upload your HTML, CSS and JavaScript to a static host, enable HTTPS and test the deployed URL. No backend is needed for these local demos.

For this Django site, merge the reviewed branch, install the pinned requirements in your existing virtual environment, run the commands below from the project root and restart the existing Gunicorn service using its configured service name. Nginx must serve STATIC_ROOT at /static/. No new secrets are required.

python manage.py check
python manage.py test
python manage.py collectstatic --noinput

After restarting, open /en/tools/service-quote-calculator/, confirm the script and stylesheet return 200, test the demo and check /sitemap.xml. Keep the previous release available for rollback. These instructions do not deploy the site automatically.

Limits and production decisions

This is one currency and one simple formula. It has no minimum charge, travel zone, discounts, backend quote acceptance or CRM delivery. Browser values are editable and cannot authorize a price. Do not treat the sample rates as a recommended price.

This page makes no network request with tool input and does not write it to local storage. Data disappears on refresh. Browser extensions and scripts added by your own deployment may change that boundary; review them before processing sensitive information.