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
- Create dog-years-calculator.html.
- Build the dog years calculator manually using the starter code.
- Create lemonade-calculator.html.
- Use AI to help generate the lemonade calculator.
- Test both calculators with easy numbers.
- Add links to both calculators from tools.html.
- 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.
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
| Test | Input | Expected answer |
|---|---|---|
| Dog years | Age 10 | 70 dog years |
| Lemonade sales | 20 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.