The Twelve Topics

# Topic Hotel example
1 Output Front desk welcome board
2 Input Guest check in questions
3 List and traversal Total room charges for a stay
4 Procedure with a return value Guest count to room type
5 Sequence Final bill for one guest
6 Selection Loyalty points to member tier
7 Iteration with a sentinel loop Adding charges to a room folio
8 Algorithm, all three pieces Average guest review score
9 Linear search Key card lookup
10 List operations Housekeeping cleaning queue
11 Parallel lists, find the position Room number to guest name
12 Parallel lists, return the answer Room code to nightly rate

How This Notebook Works in the Repo

This notebook uses the code runner system. When you run make, the build script finds the CODE_RUNNER comment in each code cell, uses that text as the title above the runner box, builds a runner_id from the permalink and cell number, strips the magic line and the comment out of the page code, clears the saved output, and drops a runner block where the code cell was.

What you need for this to work:

  • codemirror: true in the frontmatter at the top of this notebook.
  • %%js on the first line of every JavaScript cell.
  • A comment on the first code line: // CODE_RUNNER: your challenge text for JavaScript, or # CODE_RUNNER: your challenge text for Python.

Test the cells here in VSCode first. For JavaScript output use Help, Toggle Developer Tools to open the console. Then run make, check localhost, and commit.

Two Things to Know Before You Start

On asking the user questions. Real programs use prompt() in JavaScript and input() in Python. Both stop and wait for a person, which freezes a code runner in a web page. The cells below use a small ask() helper that reads from a list of pretend answers instead. The logic is the same. In your own project, swap it back to prompt() or input().

On counting list positions. College Board pseudocode counts positions starting at 1. JavaScript and Python start at 0. Topics 9, 11, and 12 keep a counter that starts at 1, then subtract 1 when reaching into the real array. Look for the - 1.


1. Output

Hotel example: The front desk welcome board.

Output is how a program talks back to you. Pseudocode uses DISPLAY(), JavaScript uses console.log(), and Python uses print().

Why it matters for the exam: Your program has to produce output a user can see, and you will trace DISPLAY lines on the multiple choice section.

JavaScript

Code Runner Challenge

Add a third line that shows the room number, then run it.

View IPYNB Source
%%js
// CODE_RUNNER: Add a third line that shows the room number, then run it.
let guestName = "Ms. Reyes";
let nightsBooked = 3;

console.log("Welcome, " + guestName);
console.log("Your stay: " + nightsBooked + " nights");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add a third line that shows the room number, then run it.

View IPYNB Source
# CODE_RUNNER: Add a third line that shows the room number, then run it.
guest_name = "Ms. Reyes"
nights_booked = 3

print("Welcome, " + guest_name)
print("Your stay: " + str(nights_booked) + " nights")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

2. Input

Hotel example: Check in questions at the front desk.

Input lets a person hand data to your program. Pseudocode uses INPUT(). The ask() helper stands in for prompt() and input() so the cell never freezes.

Why it matters for the exam: Input is required for the Create Performance Task. It shows your program reacts to different data.

JavaScript

Code Runner Challenge

Add a question that asks for the guest name, then print it on the check in slip.

View IPYNB Source
%%js
// CODE_RUNNER: Add a question that asks for the guest name, then print it on the check in slip.
let answers = ["King Suite", "2"];
function ask(question) {
  let reply = answers.shift();
  console.log(question + " " + reply);
  return reply;
}

let roomType = ask("What room type would you like?");
let nights = ask("How many nights?");

console.log("Room booked: " + roomType);
console.log("Nights: " + nights);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add a question that asks for the guest name, then print it on the check in slip.

View IPYNB Source
# CODE_RUNNER: Add a question that asks for the guest name, then print it on the check in slip.
answers = ["King Suite", "2"]
def ask(question):
    reply = answers.pop(0)
    print(question + " " + reply)
    return reply

room_type = ask("What room type would you like?")
nights = ask("How many nights?")

print("Room booked: " + room_type)
print("Nights: " + str(nights))
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

3. List and Traversal

Hotel example: Adding up the room charges for one stay.

A list holds many values under one name. A traversal walks through every item once. Here each number is one night on the bill.

Why it matters for the exam: Using a list to manage data earns points for handling complexity, and exam questions love a loop that builds a running total.

JavaScript

Code Runner Challenge

Add two more nights to the list and check that the total goes up.

View IPYNB Source
%%js
// CODE_RUNNER: Add two more nights to the list and check that the total goes up.
let nightlyCharges = [420, 420, 385, 500];
let totalCharges = 0;

for (let charge of nightlyCharges) {
  totalCharges = totalCharges + charge;
}

console.log("Total room charges: " + totalCharges + " dollars");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add two more nights to the list and check that the total goes up.

View IPYNB Source
# CODE_RUNNER: Add two more nights to the list and check that the total goes up.
nightly_charges = [420, 420, 385, 500]
total_charges = 0

for charge in nightly_charges:
    total_charges = total_charges + charge

print("Total room charges: " + str(total_charges) + " dollars")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

4. Procedure with a Parameter and a Return Value

Hotel example: Turning a guest count into a room type.

A procedure is a named block you can call over and over. It takes a parameter and hands back an answer with a return.

Why it matters for the exam: You must write at least one procedure that takes a parameter and gets called at least once. This is the abstraction point on the scoring guide.

JavaScript

Code Runner Challenge

Add a fourth type called Presidential Suite for 7 guests or more.

View IPYNB Source
%%js
// CODE_RUNNER: Add a fourth type called Presidential Suite for 7 guests or more.
function getRoomType(guestCount) {
  if (guestCount >= 5) {
    return "Family Suite";
  } else {
    if (guestCount >= 3) {
      return "Deluxe Double";
    } else {
      return "Standard King";
    }
  }
}

let partySize = 4;
let room = getRoomType(partySize);
console.log("A party of " + partySize + " gets a " + room);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add a fourth type called Presidential Suite for 7 guests or more.

View IPYNB Source
# CODE_RUNNER: Add a fourth type called Presidential Suite for 7 guests or more.
def get_room_type(guest_count):
    if guest_count >= 5:
        return "Family Suite"
    else:
        if guest_count >= 3:
            return "Deluxe Double"
        else:
            return "Standard King"

party_size = 4
room = get_room_type(party_size)
print("A party of " + str(party_size) + " gets a " + room)
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

5. Sequence

Hotel example: Building the final bill for one guest.

Sequence means the computer runs your lines in order, top to bottom. Nothing jumps around or repeats.

Why it matters for the exam: Every program uses sequence. You will trace line by line and predict a variable’s value at a certain point.

JavaScript

Code Runner Challenge

Add a valet parking charge and fold it into the total.

View IPYNB Source
%%js
// CODE_RUNNER: Add a valet parking charge and fold it into the total.
let nights = 3;
let nightlyRate = 420;
let spaCharges = 180;
let diningCharges = 260;

let roomTotal = nights * nightlyRate;
let finalBill = roomTotal + spaCharges + diningCharges;

console.log("Room total: " + roomTotal + " dollars");
console.log("Final bill: " + finalBill + " dollars");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add a valet parking charge and fold it into the total.

View IPYNB Source
# CODE_RUNNER: Add a valet parking charge and fold it into the total.
nights = 3
nightly_rate = 420
spa_charges = 180
dining_charges = 260

room_total = nights * nightly_rate
final_bill = room_total + spa_charges + dining_charges

print("Room total: " + str(room_total) + " dollars")
print("Final bill: " + str(final_bill) + " dollars")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

6. Selection

Hotel example: Turning loyalty points into a member tier.

Selection means the program picks one path based on a true or false test. Only one branch runs.

Why it matters for the exam: Selection is required in your algorithm. Trace the conditions in order and stop at the first one that is true.

JavaScript

Code Runner Challenge

Change the points to 26000 and predict the tier before you press Run.

View IPYNB Source
%%js
// CODE_RUNNER: Change the points to 26000 and predict the tier before you press Run.
let answers = ["12000"];
function ask(q) { let r = answers.shift(); console.log(q + " " + r); return r; }

let points = Number(ask("Loyalty points on this account:"));
let tier = "Unknown";

if (points >= 50000) {
  tier = "Diamond, suite upgrades included";
} else {
  if (points >= 25000) {
    tier = "Platinum, late checkout included";
  } else {
    if (points >= 10000) {
      tier = "Gold, free breakfast";
    } else {
      tier = "Silver, welcome drink";
    }
  }
}

console.log("Member tier: " + tier);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Change the points to 26000 and predict the tier before you press Run.

View IPYNB Source
# CODE_RUNNER: Change the points to 26000 and predict the tier before you press Run.
answers = ["12000"]
def ask(question):
    reply = answers.pop(0)
    print(question + " " + reply)
    return reply

points = int(ask("Loyalty points on this account:"))
tier = "Unknown"

if points >= 50000:
    tier = "Diamond, suite upgrades included"
else:
    if points >= 25000:
        tier = "Platinum, late checkout included"
    else:
        if points >= 10000:
            tier = "Gold, free breakfast"
        else:
            tier = "Silver, welcome drink"

print("Member tier: " + tier)
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

7. Iteration with a Sentinel Loop

Hotel example: Adding charges to a room folio at checkout.

Iteration means repeating a block of code. A sentinel loop keeps going until it sees a stop word, which here is done. Pseudocode writes this as REPEAT UNTIL. Nobody knows ahead of time how many charges a guest will have.

Why it matters for the exam: Iteration is required in your algorithm. Exam questions ask how many times the loop body runs, so count the passes and watch the sentinel.

JavaScript

Code Runner Challenge

Add one more charge to the answers list and run it again.

View IPYNB Source
%%js
// CODE_RUNNER: Add one more charge to the answers list and run it again.
let answers = ["Room service", "62", "add", "Spa", "180", "add", "Minibar", "24", "done"];
function ask(q) { let r = answers.shift(); console.log(q + " " + r); return r; }

console.log("Room Folio");
let folio = [];
let chargeCount = 0;
let folioTotal = 0;
let nextAction = "add";

while (nextAction !== "done") {
  let item = ask("Charge description:");
  let amount = Number(ask("Amount:"));
  folio.push(item);
  chargeCount = chargeCount + 1;
  folioTotal = folioTotal + amount;
  nextAction = ask("Add another or type done:");
}

console.log("Folio: " + folio);
console.log("Charges added: " + chargeCount);
console.log("Total due: " + folioTotal + " dollars");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add one more charge to the answers list and run it again.

View IPYNB Source
# CODE_RUNNER: Add one more charge to the answers list and run it again.
answers = ["Room service", "62", "add", "Spa", "180", "add", "Minibar", "24", "done"]
def ask(question):
    reply = answers.pop(0)
    print(question + " " + reply)
    return reply

print("Room Folio")
folio = []
charge_count = 0
folio_total = 0
next_action = "add"

while next_action != "done":
    item = ask("Charge description:")
    amount = float(ask("Amount:"))
    folio.append(item)
    charge_count = charge_count + 1
    folio_total = folio_total + amount
    next_action = ask("Add another or type done:")

print("Folio: " + str(folio))
print("Charges added: " + str(charge_count))
print("Total due: " + str(folio_total) + " dollars")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

8. Algorithm, All Three Pieces Together

Hotel example: Averaging this week’s guest review scores.

An algorithm puts sequence, selection, and iteration together. This one loops through the scores, guards against an empty list so it never divides by zero, then judges the result.

Why it matters for the exam: This is the algorithm implementation point. One loop alone is not enough and one if statement alone is not enough.

JavaScript

Code Runner Challenge

Empty the scores list and run it. The guard should return 0 instead of crashing.

View IPYNB Source
%%js
// CODE_RUNNER: Empty the scores list and run it. The guard should return 0 instead of crashing.
function averageScore(scores) {
  let total = 0;
  let count = 0;
  for (let score of scores) {
    total = total + score;
    count = count + 1;
  }
  if (count > 0) {
    let average = total / count;
    return average;
  } else {
    return 0;
  }
}

let weekScores = [4.6, 4.9, 3.8, 5.0, 4.2];
let result = averageScore(weekScores);

console.log("Scores: " + weekScores);
console.log("Average review score: " + result);

if (result >= 4.5) {
  console.log("Status: Five star standard held");
} else {
  console.log("Status: Service review needed");
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Empty the scores list and run it. The guard should return 0 instead of crashing.

View IPYNB Source
# CODE_RUNNER: Empty the scores list and run it. The guard should return 0 instead of crashing.
def average_score(scores):
    total = 0
    count = 0
    for score in scores:
        total = total + score
        count = count + 1
    if count > 0:
        average = total / count
        return average
    else:
        return 0

week_scores = [4.6, 4.9, 3.8, 5.0, 4.2]
result = average_score(week_scores)

print("Scores: " + str(week_scores))
print("Average review score: " + str(result))

if result >= 4.5:
    print("Status: Five star standard held")
else:
    print("Status: Service review needed")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Hotel example: Looking up a key card code at the front desk.

A linear search checks each item in order until it finds a match. If it runs off the end it returns -1, the normal way for code to say not found. The counter starts at 1 so the position matches pseudocode.

Why it matters for the exam: Know what a linear search returns when the item is missing, and know that the worst case checks every item.

JavaScript

Code Runner Challenge

Search for a key card that was never issued and check that you get -1 back.

View IPYNB Source
%%js
// CODE_RUNNER: Search for a key card that was never issued and check that you get -1 back.
function findKeyCard(cards, target) {
  let index = 1;
  for (let code of cards) {
    if (code === target) {
      return index;
    }
    index = index + 1;
  }
  return -1;
}

let issuedCards = ["KC-1042", "KC-1108", "KC-1211", "KC-1355"];
let lookingFor = "KC-1211";
let position = findKeyCard(issuedCards, lookingFor);

if (position > 0) {
  console.log("Key card " + lookingFor + " is issue number " + position);
} else {
  console.log("That key card was never issued");
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Search for a key card that was never issued and check that you get -1 back.

View IPYNB Source
# CODE_RUNNER: Search for a key card that was never issued and check that you get -1 back.
def find_key_card(cards, target):
    index = 1
    for code in cards:
        if code == target:
            return index
        index = index + 1
    return -1

issued_cards = ["KC-1042", "KC-1108", "KC-1211", "KC-1355"]
looking_for = "KC-1211"
position = find_key_card(issued_cards, looking_for)

if position > 0:
    print("Key card " + looking_for + " is issue number " + str(position))
else:
    print("That key card was never issued")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

10. List Operations

Hotel example: The housekeeping cleaning queue.

These are the four list operations the exam expects: add to the end, insert at a position, remove at a position, and get the length. Remember that pseudocode position 2 is real index 1.

Why it matters for the exam: Removing an item slides every later item down by one, and that shift is a favorite trap.

JavaScript

Code Runner Challenge

Insert a room at position 1 and watch every other position slide over.

View IPYNB Source
%%js
// CODE_RUNNER: Insert a room at position 1 and watch every other position slide over.
let cleaningQueue = ["Room 201", "Room 202"];
console.log("Initial: " + cleaningQueue);

cleaningQueue.push("Room 203");
console.log("After APPEND: " + cleaningQueue);

cleaningQueue.splice(1, 0, "Penthouse");   // pseudocode INSERT at position 2
console.log("After INSERT at 2: " + cleaningQueue);

cleaningQueue.splice(2, 1);                // pseudocode REMOVE at position 3
console.log("After REMOVE at 3: " + cleaningQueue);

let remaining = cleaningQueue.length;
console.log("Rooms still to clean: " + remaining);

for (let room of cleaningQueue) {
  console.log("Now cleaning: " + room);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Insert a room at position 1 and watch every other position slide over.

View IPYNB Source
# CODE_RUNNER: Insert a room at position 1 and watch every other position slide over.
cleaning_queue = ["Room 201", "Room 202"]
print("Initial: " + str(cleaning_queue))

cleaning_queue.append("Room 203")
print("After APPEND: " + str(cleaning_queue))

cleaning_queue.insert(1, "Penthouse")     # pseudocode INSERT at position 2
print("After INSERT at 2: " + str(cleaning_queue))

cleaning_queue.pop(2)                     # pseudocode REMOVE at position 3
print("After REMOVE at 3: " + str(cleaning_queue))

remaining = len(cleaning_queue)
print("Rooms still to clean: " + str(remaining))

for room in cleaning_queue:
    print("Now cleaning: " + room)
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

11. Parallel Lists, Find the Position First

Hotel example: Looking up which guest is in a room.

Two lists are parallel when position 1 of the first belongs with position 1 of the second. The procedure searches the room numbers, hands back a position, and the calling code uses that position to reach into the names list.

Why it matters for the exam: One search answering a question about a different list is real data handling, and it counts toward managing complexity.

JavaScript

Code Runner Challenge

Look up room 402 instead and confirm the guest name that comes back.

View IPYNB Source
%%js
// CODE_RUNNER: Look up room 402 instead and confirm the guest name that comes back.
function findRoom(roomList, target) {
  let index = 1;
  for (let room of roomList) {
    if (room === target) {
      return index;
    }
    index = index + 1;
  }
  return -1;
}

let rooms  = ["401", "402", "403", "404"];
let guests = ["Ms. Reyes", "Mr. Osei", "Dr. Lin", "Mr. Alvarez"];

let lookingFor = "403";
let position = findRoom(rooms, lookingFor);

if (position > 0) {
  let guestName = guests[position - 1];   // pseudocode starts at 1, JavaScript starts at 0
  console.log("Room found at position: " + position);
  console.log("Guest: " + guestName);
} else {
  console.log("That room is not on this floor");
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Look up room 402 instead and confirm the guest name that comes back.

View IPYNB Source
# CODE_RUNNER: Look up room 402 instead and confirm the guest name that comes back.
def find_room(room_list, target):
    index = 1
    for room in room_list:
        if room == target:
            return index
        index = index + 1
    return -1

rooms  = ["401", "402", "403", "404"]
guests = ["Ms. Reyes", "Mr. Osei", "Dr. Lin", "Mr. Alvarez"]

looking_for = "403"
position = find_room(rooms, looking_for)

if position > 0:
    guest_name = guests[position - 1]      # pseudocode starts at 1, Python starts at 0
    print("Room found at position: " + str(position))
    print("Guest: " + guest_name)
else:
    print("That room is not on this floor")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

12. Parallel Lists, Return the Answer Directly

Hotel example: Turning a room code into a nightly rate.

Same kind of search as topic 11, with one improvement. The procedure does the position math on the inside and hands back the rate itself, so the code that calls it never has to know positions exist.

Why it matters for the exam: Hiding the messy part inside a procedure is what abstraction means, and this comparison gives you something concrete to write about.

JavaScript

Code Runner Challenge

Add a third parallel list for the room name and return that instead of the rate.

View IPYNB Source
%%js
// CODE_RUNNER: Add a third parallel list for the room name and return that instead of the rate.
function findRate(codes, rates, targetCode) {
  let index = 1;
  for (let code of codes) {
    if (code === targetCode) {
      let rate = rates[index - 1];       // pseudocode starts at 1, JavaScript starts at 0
      return rate;
    }
    index = index + 1;
  }
  return -1;
}

let codes = ["STD", "DLX", "SUI", "PEN"];
let rates = [280, 420, 650, 1200];       // dollars per night

let requested = "SUI";
let result = findRate(codes, rates, requested);

if (result > 0) {
  console.log("Room code " + requested + " is " + result + " dollars a night");
} else {
  console.log("That room code is not offered");
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python

Code Runner Challenge

Add a third parallel list for the room name and return that instead of the rate.

View IPYNB Source
# CODE_RUNNER: Add a third parallel list for the room name and return that instead of the rate.
def find_rate(codes, rates, target_code):
    index = 1
    for code in codes:
        if code == target_code:
            rate = rates[index - 1]        # pseudocode starts at 1, Python starts at 0
            return rate
        index = index + 1
    return -1

codes = ["STD", "DLX", "SUI", "PEN"]
rates = [280, 420, 650, 1200]              # dollars per night

requested = "SUI"
result = find_rate(codes, rates, requested)

if result > 0:
    print("Room code " + requested + " is " + str(result) + " dollars a night")
else:
    print("That room code is not offered")
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Side by Side Cheat Sheet

Idea Pseudocode JavaScript Python
Assignment x <- 5 let x = 5; x = 5
Output DISPLAY(x) console.log(x) print(x)
Input INPUT("msg") prompt("msg") input("msg")
First list position 1 0 0
Procedure PROCEDURE f(a) function f(a) {} def f(a):
Block markers { } { } indentation
Equality test = === ==
Not equal NOT (a = b) a !== b a != b
Add to the end APPEND(l, v) l.push(v) l.append(v)
Insert at position i INSERT(l, i, v) l.splice(i-1, 0, v) l.insert(i-1, v)
Remove at position i REMOVE(l, i) l.splice(i-1, 1) l.pop(i-1)
Length LENGTH(l) l.length len(l)
Loop over a list FOR EACH x IN l for (let x of l) for x in l:
Loop until REPEAT UNTIL (c) while (!c) {} while not c:
Text from a number automatic automatic needs str(x)
Printing a whole list DISPLAY(l) Room 201,Room 202 ['Room 201', 'Room 202']

The three things that trip people up most:

  1. Python will not glue a number onto a string with +. Wrap it in str() first. JavaScript converts it for you without asking.
  2. Python has no curly braces. The indentation is the block. Line up your spaces or the code breaks.
  3. The two languages print a list differently. Run topic 10 in both and compare. JavaScript flattens the list into a plain comma separated line. Python shows the brackets and the quote marks. The list itself is the same either way, only the printing is different.

Hack 1: Find the Flaws

The original lesson has real mistakes in it. Here are three to start with, then go find two more yourself.

  1. The heading List Operations sits above a linear search example, and the heading Search Algorithm sits above a list manipulation example. Those two got swapped.
  2. The Algorithm block contains DISPLAY{"Scores: " + scores} with curly braces instead of parentheses. That is a syntax error, not a style choice.
  3. The Boolean Logic heading promises AND, OR, and NOT, but the example under it never uses a single one of them. It is just another parallel list search wearing the wrong label.

For each flaw, write the fixed version in pseudocode and explain in one sentence why fixing it would help your Create Performance Task score.


Hack 2: Pick Your Own Single Theme

This notebook proves that a topic and a subject are two different things. The topic is what the exam tests. The subject is just the story you wrap around it.

Pick one theme of your own and rebuild all twelve topics inside it. A pizza shop, an airline, a gym, a video game store, anything, as long as it is not a hotel and not a grade book. Keeping one theme the whole way through is the point.

Write each one three ways: pseudocode, JavaScript, and Python. Turn every code cell into a code runner by putting the CODE_RUNNER comment on the first line.

In your reflection, answer these:

  • Which language felt more natural to write, and why?
  • Which topic was hardest to fit into your theme, and what made it hard?
  • Where did the gap between position 1 and index 0 actually bite you?

Hack 3: Think Full Stack

Take your Hack 2 project and sketch it as a real web app.

Frontend, which is JavaScript, HTML, and CSS:

  • Collect input from forms
  • Show results on the page
  • Check the data looks reasonable before sending it anywhere

Backend, which is Python and SQL:

  • Store the data so it survives a page refresh
  • Run the search and average procedures
  • Decide who is allowed to change what

Draw the arrow between the two layers. Label which of the twelve topics belongs on each side, and write a short paragraph on why splitting the work into two layers is worth the extra effort.