Week 5: JavaScript Calculator Foundations

This week in plain English

ObjectiveLearn how JavaScript calculators work and create the first useful calculator tool.

Why this mattersInteractive tools can make a website more useful and commercially valuable.

What she will makeA simple savings, profit or quote calculator.

What “done” looks likeThe calculator accepts inputs, calculates a correct answer and displays a result.

At the end, she should be able to say:
“A calculator reads input values, runs a function, does maths and displays the result.”

Fortnight project: Commercial Project 3 starts: Business Calculator Tool.

Skills: JavaScript, inputs, buttons, functions, Number(), innerText, testing

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

Commercial objective for Weeks 5–6

Two-week commercial outcome: Build a calculator page that could attract visitors or help customers make decisions.

Step-by-step

Create calculator.html.
Choose a calculator idea: savings, profit, pet sitting cost or safety kit price.
Add input fields.
Add a calculate button.
Add a result area.
Write a JavaScript function.
Test with simple numbers.
Write down the expected answer before clicking calculate.

ChatGPT calculator prompt

Prompt:
I want to build a beginner-friendly JavaScript calculator for a website. The calculator should estimate pet sitting cost. Inputs: number of visits and price per visit. Output: total cost. Please show the HTML and JavaScript in one file and explain every part simply.

Simple calculator code

<h1>Pet Sitting Cost Calculator</h1>

<label for="visits">Number of visits:</label>
<input id="visits" type="number">

<label for="price">Price per visit ($):</label>
<input id="price" type="number">

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

<p id="result"></p>

<script>
function calculateCost() {
  const visits = Number(document.getElementById("visits").value);
  const price = Number(document.getElementById("price").value);
  const total = visits * price;

  document.getElementById("result").innerText =
    "Estimated cost: $" + total.toFixed(2);
}
</script>

Testing

Visits	Price	Expected total
2	15	$30.00
5	20	$100.00
10	12.50	$125.00