Separate and test the calculation
See this course’s project requirements
A keyboard-usable local workshop calculator with clear validation, correct totals, and an eight-case test record.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Two-input state trace.
- Deliberate type conversion and blank handling.
- Isolated tested calculation.
- Shared submit handler for pointer and keyboard.
- Clear feedback and eight-case test record.
Review and revise
Use these criteria to check your work and choose what to improve.
- Totals match the stated rule.
- Invalid input never shows a current total.
- Keyboard and pointer paths work consistently.
- Tests and limitations are accurately reported.
Want more background?
The idea in everyday life
Make a small fictional workshop calculator respond reliably to user input.
A function with explicit inputs can be tested independently of a page.
Separate and test the calculation — guided practice
Change one pricing rule without altering event or display code.
Save workshop-calculator.html and open it locally in a browser; open the same file in a text editor. It is a complete original worked program. The rule is 8 units per seat, 1–6 whole seats, plus one optional 5-unit group pack. Nothing is sent or bought. Restore the supplied file before each lesson’s code variation.
1. Call the function
Run calculate(2,false) in the browser console.
calculate(2,false)You should see: The result is 16.
You can test the rule without clicking the form.
2. Test the add-on
Run calculate(2,true).
calculate(2,true)You should see: The result is 21.
The optional pack is a single group charge.
3. Change one rule
In a copy, replace seats*8 with seats*9 inside calculate only. Save/reload and run calculate(2,true).
You should see: The new result is 23.
A focused rule change has a predictable effect.
4. Restore and document
Restore 8 and write the two baseline outputs plus the changed output.
You should see: Baseline is 16/21; variation is 23.
Recording expected behavior supports future review.
What to finish
A small calculation test record and isolated rule edit.
Watch for this
Updating explanatory text but forgetting the actual formula, or changing the formula without its visible explanation.
How can I tell I understand it?
Complete the changed case, explain your result, and pass the three application checks.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkOptional course overview video · same video as Lesson 1
JavaScript DOM Crash Course - Part 1
From Traversy Media. Watch here or open it on YouTube .
Optional course overview. Follow the written steps below at your own pace.Tools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-09-12
Opened and inspected on 2026-09-12: Listeners and event objects.
Access: Free public web page; no paid enrollment required.
Reuse: Public reference; link only. LifeStarter prose, exercises and files are independently authored.
Source & access notes · checked 2026-09-12
Opened and inspected on 2026-09-12: Element selection and text updates.
Access: Free public web page; no paid enrollment required.
Reuse: Public reference; link only. LifeStarter prose, exercises and files are independently authored.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.