Week 15: Build an Interactive Pricing Estimator

This week in plain English

ObjectiveCreate a pricing estimator with base price, options and add-ons.

Why this mattersPricing estimators are valuable for service businesses because they help customers understand likely costs.

What she will makeA simple estimator that calculates a total based on selected options.

What “done” looks likeThe estimator adds a base price and optional extras correctly.

At the end, she should be able to say:
“A pricing estimator uses choices and numbers to create an estimated total.”

Fortnight project: Commercial Project 8 starts: Interactive Pricing Estimator.

Skills: select fields, checkboxes, pricing logic, totals, option handling

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

Commercial objective for Weeks 15–16

Two-week commercial outcome: Build a quote-style pricing estimator that could be adapted for services like pet sitting, website packages, tutoring or security kits.

Step-by-step

Create pricing-estimator.html.
Choose a service to estimate.
Add a package dropdown.
Add optional extras as checkboxes.
Add a calculate button.
Use JavaScript to add the selected prices.
Show the result.

Estimator HTML

<label for="package">Choose a package</label>
<select id="package">
  <option value="50">Starter Package - $50</option>
  <option value="100">Standard Package - $100</option>
  <option value="150">Premium Package - $150</option>
</select>

<label>
  <input type="checkbox" class="extra" value="20">
  Add worksheet pack - $20
</label>

<label>
  <input type="checkbox" class="extra" value="30">
  Add printed checklist - $30
</label>

<button onclick="calculateEstimate()">Calculate estimate</button>

<div id="estimateResult"></div>

Estimator JavaScript

function calculateEstimate() {
  const packagePrice = Number(document.getElementById("package").value);
  const extras = document.querySelectorAll(".extra:checked");

  let total = packagePrice;

  extras.forEach(function(extra) {
    total += Number(extra.value);
  });

  document.getElementById("estimateResult").innerHTML =
    "<h2>Estimated total</h2><p>$" + total.toFixed(2) + "</p>";
}

End of week check

Package dropdown works.
Checkbox extras work.
Total updates correctly.
Result is clear.