Project Vera Advanced

What she should understand

A good calculator does more than produce a number. It guides the user, catches mistakes, explains the result and makes the next step clear. This week she learns to make calculators that are more polished.

Calculator idea

The <strong>Pocket Money Goal Calculator</strong> asks: <ul> <li>How much money do you want to save?</li> <li>How much can you save each week?</li> <li>How much do you already have?</li> </ul> It then calculates how many weeks it will take to reach the goal.

Step-by-step build

1. Create pocket-money-goal-calculator.html.
2. Add three input fields.
3. Add a calculate button.
4. Add validation so empty or impossible values show helpful messages.
5. Calculate the remaining amount.
6. Calculate the number of weeks required.
7. Show a clear result card.
8. Add a FAQ section for SEO.
9. Link it from tools.html and add it to sitemap.xml.

Advanced calculator code

<label for="goal">Savings goal ($)</label>
<input id="goal" type="number" min="0" step="0.01">

<label for="saved">Already saved ($)</label>
<input id="saved" type="number" min="0" step="0.01">

<label for="weekly">Saved per week ($)</label>
<input id="weekly" type="number" min="0" step="0.01">

<button onclick="calculateGoal()">Calculate</button>

<div id="result" class="result-card"></div>

<script>
function money(amount) {
  return "$" + amount.toFixed(2);
}

function calculateGoal() {
  const goal = Number(document.getElementById("goal").value);
  const saved = Number(document.getElementById("saved").value);
  const weekly = Number(document.getElementById("weekly").value);
  const result = document.getElementById("result");

  if (goal <= 0) {
    result.innerHTML = "<p>Please enter a savings goal above $0.</p>";
    return;
  }

  if (saved < 0 || weekly < 0) {
    result.innerHTML = "<p>Please do not enter negative numbers.</p>";
    return;
  }

  if (saved >= goal) {
    result.innerHTML = "<h2>Goal reached!</h2><p>You already have enough saved.</p>";
    return;
  }

  if (weekly <= 0) {
    result.innerHTML = "<p>Enter how much you can save each week.</p>";
    return;
  }

  const remaining = goal - saved;
  const weeks = Math.ceil(remaining / weekly);

  result.innerHTML =
    "<h2>Your savings plan</h2>" +
    "<p>You still need " + money(remaining) + ".</p>" +
    "<p>If you save " + money(weekly) + " per week, it will take about <strong>" +
    weeks + " weeks</strong>.</p>";
}
</script>

Result card CSS

.result-card {
  background: #e7fff5;
  border: 1px solid #b8ead2;
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
}

UX improvement checklist

Extension task