14 min · Advanced
Project: A Small Useful App
Build a one-file quote builder in slices, then test the math so a blank field cannot show a broken number.
Learning objectives
- Request a quote builder in slices: layout, math, a polite sentence, then an empty-field check.
- Explain an event as the page reacting to a click, with the script kept inside the same file.
- Run a test plan: 2 hours at 50 shows 100, and blank hours does not show NaN.
01
Why this matters
A tiny app teaches more than a large one because you can test every result by hand. The quote builder needs a name, hours, and a rate, then a sentence a freelancer could send. You will ask for those pieces separately so a failure has an address. No account and no server are part of the design, not omissions.
02
Concept
Project two is a one-file quote builder for a freelancer. Inputs: client name, hours, and rate. A button shows the total and a polite paragraph. JavaScript stays inside the file. There are no accounts and no server. Request the app in slices: layout, then math, then the sentence, then an empty-field check. If you ask for all four at once, you will not know which slice broke.
An event — the page reacts when someone clicks or types — is how the button becomes useful. The layout slice can show the inputs and a button before any math exists. The math slice multiplies hours by rate when the button is clicked. Do not skip ahead to wording. A sentence that sounds kind can still sit on a wrong total. Check the current screen for the model name if a reply mentions a tool you do not see.
The sentence slice writes a polite paragraph using the client name and the total you already tested. The empty-field slice runs when hours or rate is blank. NaN — not a number, a sign the math broke — appears when the page multiplies an empty input as if it were a number. Blank hours must not show NaN. Show a short request to fill the field instead. The page should not invent a zero and call it a quote.
Use this test plan every time the math changes. Enter 2 hours at a rate of 50. The page should show 100. Clear the hours and click again. The page should ask for hours and should not show NaN. Write the results down. If either test fails, paste the relevant lines and the first error, if any, and ask for the smallest fix inside that slice only.
03
Real-world example
Four slices and two checks
You tell Gemini you want a quote builder and that you will accept it only in slices. Slice one is layout: labels for client name, hours, and rate, plus a button that says Build quote. You open the file and see those fields. No math yet, and that is correct. Slice two is the click event and the multiplication. You type 2 and 50 and expect 100. Slice three adds a polite paragraph that includes the client name and that total. Slice four refuses to calculate when hours or rate is empty. You clear hours, click, and expect a plain message instead of NaN. You do not add accounts, saving, or a server between slices. Each slice is saved and double-clicked before the next prompt goes out.
04
Gemini demonstration
A realistic exchange. Open Gemini beside this page and try a version with your own facts.
You
The quote builder layout is done in one HTML file: client name, hours, rate, and a button labeled Build quote. Add only the math slice. When the button is clicked, multiply hours by rate and show the total. Do not write the polite sentence yet. Do not add accounts or a server. Tell me how to test it with 2 hours at 50.
Gemini
This slice adds one event: a click on Build quote. The script reads the hours field and the rate field, multiplies them, and writes the total on the page. It does not yet build the polite paragraph, and it does not check empty fields. That is deliberate, because you asked for math only. Test: type 2 in hours and 50 in rate, then click Build quote. You should see 100. If you see nothing, confirm the script is in the same file and that you double-clicked the saved file. If you see NaN, an input was blank or not a number. Do not patch that in this slice unless the test with 2 and 50 already fails. No account and no server are involved.
You
2 hours at 50 shows 100. That test passed. Add only the empty-field check. If hours is blank, do not show NaN. Ask for the missing field instead. Leave the sentence slice for later.
Gemini
The click handler should look at hours before it multiplies. If hours is blank, or is not a number, stop and show a short line such as Enter hours before building the quote. Do the same for a blank rate. Do not display NaN, and do not treat a blank as zero. A zero quote would look real and would be wrong. The polite sentence is still out of scope. Tests to run: 2 hours at 50 still shows 100. Then clear hours and click again. You should see the request to enter hours, and you should not see NaN. If both tests fail, say which one failed and paste the click function only.
05
Prompt breakdown
The prompt
The quote builder layout is done in one HTML file: client name, hours, rate, and a button labeled Build quote. Add only the math slice. When the button is clicked, multiply hours by rate and show the total. Do not write the polite sentence yet. Do not add accounts or a server. Tell me how to test it with 2 hours at 50.
- It names the slice, so layout and wording cannot creep into a math change.
- The click behavior is specific: multiply hours by rate and show the total.
- The test numbers are in the prompt, which gives you an expected result of 100.
- Accounts and a server are banned again so the file stays something you can open locally.
06
Common mistakes
Usually
Build the full quoting platform with logins, email, and a dashboard in one reply.
Better
One file. Slice one is layout only. I will test it before I ask for math.
Usually
Blank hours can show NaN. People will understand what that means.
Better
If hours is blank, show a request to fill the field. Do not show NaN and do not assume zero.
Usually
2 times 50 looked close enough, so I skipped the blank test.
Better
Run both tests: 2 hours at 50 shows 100, and blank hours does not show NaN. Write down both results.
07
Practice exercise
Ship the quote builder in four slices
Done when: The one-file page shows 100 for 2 hours at 50, shows a polite sentence for a filled form, and does not show NaN when hours is blank.
08
Challenge
Add a 10 percent discount and test it
Add one checkbox labeled Apply 10 percent discount. Ask for that control and its math as a single slice, after the earlier tests already pass. When the box is unchecked, 2 hours at 50 must still show 100. When the box is checked, the same inputs must show 90, because 10 percent of 100 is 10. Blank hours must still avoid NaN, whether the box is checked or not. The polite sentence should mention the discount only when the box is checked, and it must use the discounted total. Reject any version that changes the base math when the box is off.
Hint: Unchecked stays 100. Checked is 90, not 110. A blank field still must not produce NaN.
09
Key takeaways
- Build the quote tool in slices: layout, math, sentence, then the empty-field check.
- An event is the page reacting to a click. Keep the script in the same file.
- Test 2 hours at 50 and expect 100. Test blank hours and refuse NaN.
- No accounts and no server. Add a discount only after the base tests pass.
10