Week 16: Turn the Estimator into a Proposal-Style Result

This week in plain English

ObjectiveImprove the estimator so it produces a clear proposal-style breakdown.

Why this mattersCommercial estimates should explain what is included, not just show a number.

What she will makeA polished estimator with itemised breakdown, disclaimer and next-step CTA.

What “done” looks likeThe estimator shows selected package, add-ons, total, notes and next action.

At the end, she should be able to say:
“A proposal-style result explains the estimate so the customer understands what they selected.”

Fortnight project: Commercial Project 8 completed.

Skills: itemised breakdown, proposal UX, disclaimers, CTA, commercial testing

Suggested session structure: 10 minutes objective, 10 minutes ChatGPT planning, 25 minutes building, 10 minutes testing, 5 minutes recap.

Commercial outcome

By the end of this week: The estimator should look like the start of a real online quote/proposal experience.

Step-by-step

Add names to each package.
Add names to each extra.
Show selected package in the result.
Show selected extras in a list.
Show total.
Add a note: estimate only, not final quote.
Add a CTA button to enquiry.html or contact.html.
Test multiple combinations.

Better option data

<option value="50" data-name="Starter Package">Starter Package - $50</option>
<option value="100" data-name="Standard Package">Standard Package - $100</option>
<option value="150" data-name="Premium Package">Premium Package - $150</option>

Proposal-style result idea

const packageSelect = document.getElementById("package");
const packageName = packageSelect.options[packageSelect.selectedIndex].dataset.name;

let breakdown = "<h2>Your estimate</h2>";
breakdown += "<p><strong>Package:</strong> " + packageName + "</p>";
breakdown += "<p><strong>Total:</strong> $" + total.toFixed(2) + "</p>";
breakdown += "<p>This is a practice estimate only, not a final quote.</p>";
breakdown += '<p><a class="button" href="enquiry.html">Ask about this estimate</a></p>';

document.getElementById("estimateResult").innerHTML = breakdown;

Commercial quality checklist

Estimate has itemised information.
Total is correct.
Disclaimer is clear.
Next step is obvious.
Estimator works on mobile.
Page is linked from navigation.