Read control values as the right types
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.
HTML controls expose values; your program must interpret them.
Read control values as the right types — guided practice
Convert number text deliberately and read a checkbox’s checked state.
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. Inspect raw input
Find the value read in readInputs. In the console inspect typeof document.querySelector("#seats").value.
typeof document.querySelector("#seats").valueYou should see: It returns string.
A number-looking control still exposes text through value.
2. Inspect the checkbox
Check the pack and inspect its checked property.
document.querySelector("#pack").checkedYou should see: The property is true.
checked describes selection; value is not the Boolean state.
3. Try blank
Clear the seats control and calculate.
You should see: An error appears and no total remains.
The code handles blank before Number can turn it into zero.
4. Restore a valid case
Enter 1 and uncheck the pack; calculate.
You should see: The total is 8 and the error clears.
Recovery confirms invalid state does not stick.
What to finish
A type-conversion note with blank and recovery results.
Watch for this
Using a checkbox’s value string to decide whether it is selected.
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: 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.
Source & access notes · checked 2026-09-12
Opened and inspected on 2026-09-12: Input constraints and useful errors.
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.