Build with AI: From Zero to Your First App · Module 5: Turn a page into an app
Read Inputs, Handle Empty
Every app starts by listening: read what the visitor typed, survive nothing typed, and show it back. This lesson makes input reading boring and reliable.
10 min reading
Objectives
- Read text and number inputs with explicit conversion
- Handle empty and whitespace-only values before computing
- Show the entered values back as a confirmation echo
- Explain why every input arrives as text first
Why this matters
Most beginner app bugs are input bugs: a calculation on an empty field yields NaN, a name with trailing spaces fails a comparison, a form that never echoes leaves the visitor unsure anything happened. Input handling is unglamorous and load-bearing: five lines that decide whether the app feels solid or haunted.
Concepts
Everything arrives as text. Form fields hand you strings, even for numbers. Convert explicitly (a number function, not hope), and decide what empty means before computing: empty quantity is not zero, it is missing. Trim whitespace first; " Aylin " and "Aylin" are the same customer with different spacing.
The echo habit. Before any calculation, show the entered values back: "You ordered 2 loaves for Friday 10:00, name Aylin." The echo proves reading worked, gives the visitor something to verify, and turns silent misreads into visible ones. Lesson M04L14's structure-first order put labeled fields in place; the echo proves they are wired.
Empty-first thinking. Write the empty case before the happy case: what shows when nothing is typed, what shows for spaces only, what shows for a number field holding letters. An app that answers emptiness gracefully ("tell us how many loaves") never shows NaN, undefined or a blank stare.
Worked example
Bakery quantity field. Bad: read value, multiply by price, show total; empty shows "Total: NaN USD". Good: trim, check empty ("how many loaves?"), convert, check finite ("that does not look like a number"), then echo ("2 loaves for Friday 10:00") and total ("4 USD"). Same field, same tool; the difference is three guard lines before the math.
Expected result: any form on your page reading, guarding and echoing before it computes anything.
The common wrong move
Computing first, guarding later ("I will add validation when it breaks"). It breaks on the first empty submit, which is also the first thing every visitor tries by accident.
Lab and next step
Lab A13 wires a price calculator with empty guards plus echo. Next, lesson 18 turns guards into messages: validation errors that say what to fix.
Quick check
An optional 4-question self-check. Answers never leave your device, are not stored, and never count toward any assessment.
Lesson feedback
No published feedback yet.
Log in and complete the lesson to leave feedback.
Exercise
Add empty-guards plus echo to one form on your page: trim, empty check, conversion check, echo line. Submit it empty, with spaces, and with real values; record all three results.
Pass criteria
Guards present (trim, empty, conversion) before any computation; echo shows entered values; three submit cases recorded with correct messages each.