Week 3: JavaScript Calculators and AI-Assisted Building

Goal: Cover the original Week 5 and Week 6: build calculators, use AI prompts and learn to test AI code.

Build this week: Create two calculators: dog years and lemonade stand profit.

Skills: JavaScript, Inputs, Functions, Maths, AI prompting, Debugging, Testing

What she should understand

JavaScript lets a page respond to the user. A calculator needs inputs, a button, a function and an output area. AI can help create the code, but a good website builder tests the maths and improves the wording.

Calculator pattern

1. User types numbers into input boxes.
2. User clicks a button.
3. JavaScript reads the numbers.
4. JavaScript calculates an answer.
5. JavaScript writes the answer onto the page.

Step-by-step build

  1. Create dog-years-calculator.html.
  2. Build the dog years calculator manually using the starter code.
  3. Create lemonade-calculator.html.
  4. Use AI to help generate the lemonade calculator.
  5. Test both calculators with easy numbers.
  6. Add links to both calculators from tools.html.
  7. Upload and test online.

Dog years calculator

<label for="age">Your age:</label>
<input id="age" type="number">

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

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

<script>
function calculateDogYears() {
  let age = Number(document.getElementById("age").value);

  if (age <= 0) {
    document.getElementById("result").innerText = "Please enter an age above zero.";
    return;
  }

  let dogYears = age * 7;

  document.getElementById("result").innerText =
    "Your age in dog years is about " + dogYears + ".";
}
</script>

Lemonade calculator AI prompt

Prompt:
Create a beginner-friendly HTML, CSS and JavaScript lemonade stand profit calculator. It should ask for cost of lemons, cost of cups, number of drinks sold and price per drink. It should calculate total sales, total costs and profit. Keep the code simple for an 11-year-old. Include comments explaining the JavaScript.

Manual testing table

TestInputExpected answer
Dog yearsAge 1070 dog years
Lemonade sales20 drinks × $2$40 sales
Lemonade cost$8 lemons + $4 cups$12 costs
Lemonade profit$40 sales - $12 costs$28 profit

Improve the result message

if (profit > 0) {
  message = "Great work! You made a profit.";
} else if (profit < 0) {
  message = "You spent more than you made. Try changing your price or costs.";
} else {
  message = "You broke even. You made exactly enough to cover your costs.";
}

Extension task

Add a third calculator: Pocket Money Savings Calculator. It should ask how much she saves each week and how many weeks she saves for.