Next Chapter / Week 1 / Day 2
Learning to write better prompts โ and understand the code AI writes back.
Learning to write better prompts โ and understand the code AI writes back.
๐ Lab Exercise 1 โ Prompt Makeover
25 min
A Calculator
Bad Prompt
Write code for a calculator
Bad Output
# Bare Python terminal script โ wrong platform entirely
def calculator():
a = float(input("Enter first number: "))
op = input("Enter operator (+, -, *, /): ")
b = float(input("Enter second number: "))
if op == "+": print(a + b)
elif op == "-": print(a - b)
calculator()
Improved Prompt
Write a browser-based calculator using HTML, CSS, and vanilla JavaScript. It should have a display screen and buttons for digits 0โ9, addition, subtraction, multiplication, division, a decimal point, equals, and clear. Style it with a dark theme. No frameworks.
What changed & why it improved
Added platform (browser), tech stack (HTML/CSS/JS), UI requirements (buttons + display), and visual style โ the AI knew exactly what to build instead of guessing language and interface.
B Resume
Bad Prompt
Help me with my resume
Bad Output
Sure! Here are some general resume tips: use a clean format, include your contact info, list work experience in reverse chronological order, use action verbs, tailor it to the job...
Improved Prompt
I'm a recent CS grad with 2 internships (React and Node.js) applying for a junior front-end developer role at a startup. Write a one-page resume in a clean, modern format. Emphasize projects and technical skills. Use bullet points with action verbs and quantify impact where possible.
What changed & why it improved
Provided background, target role, format preference, and tone โ the AI generated an actual resume document instead of generic bullet-point advice.
C Quiz
Bad Prompt
Make a quiz
Bad Output
Quiz Time!
1. What is the capital of France? a) London b) Paris c) Berlin d) Rome
2. What is 2+2? a) 3 b) 4 c) 5 d) 6
1. What is the capital of France? a) London b) Paris c) Berlin d) Rome
2. What is 2+2? a) 3 b) 4 c) 5 d) 6
Improved Prompt
Create a 5-question multiple choice JavaScript quiz for beginner web dev students (ages 18โ25). Topics: variables, functions, and DOM basics. Each question has 4 options with one correct answer. Include a score at the end and a "Try Again" button. Build it as a single HTML file with embedded CSS and JS.
What changed & why it improved
Defined subject, audience, question count, format, and deliverable โ output went from a plain text list to a functional interactive app.
โญ Stretch Goal โ Three Iterations on Prompt A
| Round | Prompt | What was missing |
|---|---|---|
| 1 | Write code for a calculator | Platform, language, UI โ got a bare Python terminal script |
| 2 | Write a browser calculator in HTML/CSS/JS | Styling, layout, which operations โ got an unstyled 2-button form |
| 3 | Browser calculator, dark theme, grid layout, digits + operators + clear + equals | Polish โ got a working but rough grid |
| 4 | Final improved prompt (above) | Nothing major โ got the full styled app |
Takeaway: Each iteration filled a gap the previous output revealed. Prompting is a dialogue, not a one-shot command.
๐ป Lab Exercise 2 โ Reading Code That AI Wrote
35 min
Step 1 โ Prompt sent to AI
Write a simple JavaScript program that asks the user for their name, asks for their favorite color, displays a greeting using both. Use prompt() for input and document.write() for output. Add comments explaining each line.
Step 2 โ Line-by-line reading
// Ask the user for their name
const name = prompt("What is your name?");
// Opens a browser dialog. Whatever the user types โ stored in `name`.
// Ask the user for their favorite color
const color = prompt("What is your favorite color?");
// Same pattern. Result stored in `color`.
// Create a greeting message using the inputs
const message = "Hello, " + name + "! Your favorite color is " + color + ".";
// + glues four string pieces into one sentence.
// Display the message on the page
document.write(message);
// Writes the string directly into the HTML page body.
Step 3 โ Questions & Answers
What does
prompt() do?Pauses the script and shows a browser dialog with a text input. Returns the typed string when the user clicks OK, or
null if they click Cancel.What does
const mean?Declares a variable that cannot be reassigned. Once
name is set, you can't do name = "something else" later.What does
+ do with text?Concatenation โ joins strings end-to-end.
"Hello, " + "Marcus" โ "Hello, Marcus".If I type "Marcus" and "green", what's the output?
Hello, Marcus! Your favorite color is green.What happens if I click Cancel on the prompt?
prompt() returns null, printing: Hello, null! Your favorite color is null.Fix it:
const name = prompt("Your name?") || "stranger";
Step 4 โ Modified code with third question
const name = prompt("What is your name?");
const color = prompt("What is your favorite color?");
const food = prompt("What is your favorite food?"); // โ NEW
const message =
"Hello, " + name +
"! Your favorite color is " + color +
" and your favorite food is " + food + "."; // โ UPDATED
document.write(message);
Output (Marcus / green / pizza)
Hello, Marcus! Your favorite color is green and your favorite food is pizza.
Summary
| Line | Concept | Key takeaway |
|---|---|---|
const name = prompt(...) | const, prompt() | Stores user input as a string |
const color = prompt(...) | Same pattern | Each prompt() is its own dialog |
const message = ... + ... | Concatenation | + joins strings; order matters |
document.write(message) | DOM output | Dumps text straight onto the page |
| Cancel button | null | Always guard real apps against null input |
๐ค Peer Activity โ Prompt Partners
Pair up. Each person writes a prompt for the same task without talking to each other. Swap prompts. Each person sends their partner's prompt to ChatGPT. Compare outputs.
Task Cards โ Pick One
- Task 1: Get AI to write a short bio for someone who is changing careers into tech.
- Task 2: Get AI to explain what a loop is in programming, for someone who has never coded.
- Task 3: Get AI to create a simple HTML page for a dog walking business.
Debrief Questions
Whose prompt worked better? What made the difference?
Diana's first prompt worked best โ it was fully fleshed out with context and clear constraints.
What's one thing you learned from seeing your partner's approach?
To focus more on context and specificity โ vague prompts get vague outputs.
๐ง Code Reading + Modification Lab
1 Tip Calculator 30 min
Prompt to ChatGPT
Write a JavaScript tip calculator that asks for the bill amount and tip percentage, then shows the tip and total.
Expected code
// Get the bill amount from the user
const bill = parseFloat(prompt("Enter the bill amount:"));
// Get the tip percentage
const tipPercent = parseFloat(prompt("Enter tip percentage (e.g., 20 for 20%):"));
// Calculate the tip
const tip = bill * (tipPercent / 100);
// Calculate the total
const total = bill + tip;
// Display the results
document.write("<h2>Tip Calculator</h2>");
document.write("<p>Bill: $" + bill.toFixed(2) + "</p>");
document.write("<p>Tip (" + tipPercent + "%): $" + tip.toFixed(2) + "</p>");
document.write("<p>Total: $" + total.toFixed(2) + "</p>");
Code tracing โ bill: $50, tip: 20%
| Line | Variable | Value |
|---|---|---|
const bill = ... | bill | 50 |
const tipPercent = ... | tipPercent | 20 |
const tip = ... | tip | 10.00 (50 ร 0.20) |
const total = ... | total | 60.00 (50 + 10) |
Modification challenges
- Level 1: Add a line that shows the tip per person if split between 2 people
- Level 2: Change it to split between any number of people (add a third prompt asking how many people)
- Level 3: Add a message: if the tip is more than $20, display "Generous tipper!"
2 Temperature Converter 30 min
Prompt to ChatGPT
Write a JavaScript program that converts Fahrenheit to Celsius. Use the formula: C = (F - 32) ร 5/9. Ask the user for the Fahrenheit temperature and display the Celsius result.
Code tracing โ input: 212ยฐF
| Step | Calculation | Result |
|---|---|---|
| Input (F) | 212 | 212 |
| F โ 32 | 212 โ 32 | 180 |
| ร 5/9 | 180 ร 5/9 | 100ยฐC |
Modification challenges
- Level 1: Make it convert Celsius to Fahrenheit instead (formula: F = C ร 9/5 + 32)
- Level 2: Ask the user which direction they want to convert, then do the right calculation
- Level 3: Round the result to 1 decimal place (hint: ask AI "how do I round to 1 decimal in JavaScript?")
3 Compliment Generator 30 min
Prompt to ChatGPT
Write a JavaScript program that asks for someone's name and then displays a random compliment using their name. Have at least 5 different compliments.
Code tracing questions
What is the list of compliments stored in?
An array โ a numbered list of values.
What does
Math.random() do?Generates a random decimal number between 0 and 1 (e.g. 0.7342).
What does
Math.floor() do?Rounds down to the nearest whole number.
Math.floor(3.9) โ 3.Why do we need
compliments.length?To know how many compliments are in the array so we pick a valid index.
If
Math.random() returns 0.7 and there are 5 compliments, which one gets picked?Index 3 โ because
Math.floor(0.7 ร 5) = Math.floor(3.5) = 3.Modification challenges
- Level 1: Add 3 more compliments to the array
- Level 2: Change it to display TWO random compliments instead of one (they might be the same โ that's OK)
- Level 3: Add a "Get another compliment" feature (hint: wrap it in a
whileloop that asks "Want another? yes/no")