Project Vera: 20-Week Commercial Website Course

Learn websites, coding with ChatGPT, HTML, CSS, JavaScript, calculators, quizzes, SEO and launch QA — with one commercial-quality project completed every two weeks.

Week 6: Make the Calculator Commercial Quality

This week in plain English

ObjectiveAdd validation, better results, explanation content and SEO to the calculator page.
Why this mattersA commercial calculator must handle mistakes, explain results and be useful enough for visitors.
What she will makeA polished calculator page with validation, result card, explanation, FAQ and sitemap entry.
What “done” looks likeThe calculator handles bad inputs, shows helpful messages and looks like a real website tool.
At the end, she should be able to say:
“Commercial calculators need good user experience, not just correct maths.”
Fortnight project: Commercial Project 3 completed.

Skills: validation, result cards, error messages, SEO content, FAQs, sitemap update

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 calculator should feel like a real website tool, not a coding experiment.

Step-by-step

  1. Add checks for empty or negative values.
  2. Put the result inside a styled result card.
  3. Add an explanation section: how the calculator works.
  4. Add an example calculation.
  5. Add FAQ content.
  6. Add a proper title and meta description.
  7. Add the calculator URL to sitemap.xml.
  8. Ask ChatGPT to look for bugs.

Improved JavaScript

function calculateCost() {
  const visits = Number(document.getElementById("visits").value);
  const price = Number(document.getElementById("price").value);
  const result = document.getElementById("result");

  if (visits <= 0 || price <= 0) {
    result.innerHTML = "<p>Please enter numbers above zero.</p>";
    return;
  }

  const total = visits * price;

  result.innerHTML =
    "<h2>Your estimate</h2>" +
    "<p>Estimated cost: <strong>$" + total.toFixed(2) + "</strong></p>" +
    "<p>This is only a practice estimate and not a real quote.</p>";
}

Bug-checking prompt

Prompt:
Please check this HTML and JavaScript calculator for beginner mistakes. Look for broken IDs, bad validation, confusing labels, and maths errors. Explain what to fix simply.

Commercial quality checklist

  • Calculator has clear labels.
  • Calculator handles empty inputs.
  • Calculator handles negative values.
  • Result is easy to understand.
  • Page explains how it works.
  • Page includes FAQs.
  • Page is linked from the website.
  • Page is in the sitemap.
Previous week Next week