Claude can help you build a calculator with HTML, CSS and JavaScript. To share it as a website, paste the complete HTML into Pagelet, publish it and send the resulting link.
We'll use a mortgage payment calculator as a coding example. It estimates principal and interest for a fixed-rate loan with monthly payments. It excludes taxes, insurance and fees.
Try the working calculator
Change the loan amount, rate or term, then select Calculate payment. This self-contained example is supplied with the guide so you can inspect and test the result.
1. Give Claude a precise calculator brief
Describe the inputs, output and behaviour you need. For example:
Build a responsive mortgage payment calculator as one complete HTML file.
Include CSS in a style tag and JavaScript in a script tag.
Inputs: loan amount in USD, annual interest rate and loan term in years.
Output: monthly principal and interest for a fixed-rate loan.
Handle 0% interest by dividing principal by the number of payments.
Reject empty, negative or invalid inputs. Require whole years from 1 to 50.
Use labelled inputs, visible focus styles and a result announced to screen readers.
Explain that taxes, insurance and fees are excluded.
Use no external libraries, backend, build step or secret API keys.
Ask Claude for the complete updated document after revisions. That avoids combining a new script with an older form by accident.
The same pattern works for other browser-based calculators. Specify the rules first, then test that the implementation follows them.
2. Verify the calculation before publishing
For monthly payments, convert the annual percentage rate to a monthly decimal rate and multiply the term in years by 12.
For example, a USD 100,000 loan at 6% over 30 years gives approximately USD 599.55 per month in principal and interest. At zero interest, a USD 120,000 loan over 10 years gives USD 1,000.00 per month.
Use these checks on the working example:
| Input | Expected behaviour |
|---|---|
| 100,000; 6%; 30 years | Monthly payment rounds to USD 599.55 |
| 120,000; 0%; 10 years | Monthly payment is USD 1,000.00 |
| Empty loan amount | No new result; the form asks for a value |
| Negative rate | Reject the input |
| 0 years or 2.5 years | Reject the input |
| Change any input | Hide the old result until recalculating |
Do not assume a polished interface means the arithmetic is correct. Check your own calculator's formulas and edge cases too.
3. Copy the HTML and publish
- Copy only the complete HTML document from Claude, without chat text or Markdown code fences.
- Open Pagelet's HTML-to-link publishing page.
- Paste the code, optionally choose a subdomain name and title, then press Publish as guest or Publish.
- Open the link after the security checks pass and test it again.
Prefer a file? Download the example above, or save Claude's complete HTML as calculator.html, then upload it on the homepage. For projects with separate CSS, JavaScript or images, follow the folder and ZIP hosting guide.
4. Claim, share and edit the calculator
After a guest publication, sign in with Google from the same browser to claim your page for free. Your dashboard gives you the link, a QR code, view counts and an editor for the home page.
Saving changes in that editor keeps the URL as long as you don't rename the subdomain. A new upload creates another publication.
The example runs entirely in the visitor's browser. It doesn't submit the input values to a server. If you change the code to call an API, review what data it sends and keep private API keys out of the page.
Want Claude to publish directly?
Connect Claude to Pagelet through MCP to publish through your account. The paste workflow above also works without connecting an AI app.