OIM3690 - AI-Powered Web Development

2026 Spring

Session 21 (4/9)

contain

Today's Agenda

  • Announcements
  • Review Questions
  • Intro to APIs
    • What is an API, JSON
    • fetch(), async/await
    • Live demo with OIM Teaching API
  • Your Turn
    • Random Word Generator
    • MA Town Explorer
  • JS Review for Quiz 3

Announcements/Updates

  • Weekly Learning Logs - wk11.md due this week
  • Mini Project #2 - Interactive Web Tool. We will review next week.
  • Mini Project #3 - API-Powered App. Start exploring APIs you want to use.
  • Quiz 3 - Next Tuesday (S22). Covers JS fundamentals: DOM, events, variables, conditionals, arrays, loops.
  • Communication
    • Office Hours: Walk-in or by appointment
    • Email: Specify course # in subject, e.g., "OIM3690: GitHub settings"
    • You are required to meet with me at least once this semester
  • Questions?

What We've Learned So Far

  • How the Web Works - DNS, HTTP, client-server model
  • Tools - Git & GitHub, GitHub Pages, Copilot, DevTools
  • HTML - document structure, common tags, semantic HTML, accessibility, forms
  • CSS - selectors, box model, layout (Flexbox/Grid), responsive design, frameworks
  • JavaScript - DOM, events, variables, types, functions, conditionals
  • Arrays & Loops - creating/modifying arrays, for, while, for...of, forEach

Review Questions

  • You have a loop: for (let i = 0; i < 10; i++). How many times does it run? What's the last value of i inside the loop?
  • Your friend wrote a loop to sum an array but the result is always 0. What's probably wrong?
    const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) { let sum = 0; sum += nums[i]; }
  • What does for (const item of items) do differently than for (let i = 0; ...)?

Intro to APIs

Your Turn: Random Word Generator

Create random-word.html in your oim3690 repo.

  • A <button> that says "Get Random Word"
  • On click, fetch a word from https://oim.108122.xyz/words/random
  • Display the word on the page
  • Add a "loading..." message while waiting
  • Handle errors with try/catch

Bonus: fetch 5 words in a row and display them as a list.

Your Turn: MA Town Explorer

Create town-explorer.html. Build a mini app using the MA towns API:

  • Fetch data from https://oim.108122.xyz/mass
  • Display the first 10 towns as a list (name, county, population)
  • Add a <input> to search/filter towns by name
  • Show how many towns matched

Bonus: find and display the town with the largest population.

Your Turn: Class Message Board (if time)

Create message-board.html:

  • Fetch and display all messages from https://oim.108122.xyz/messages
  • Add an <input> and <button> to post a new message
  • Use your first name x2 as the X-Token header (e.g., "alicealice")
  • After posting, refresh the message list

JS Review for Quiz 3

What's on Quiz 3?

Everything we've covered in JavaScript (no API/fetch):

  • DOM - querySelector, getElementById, textContent, innerHTML
  • Events - addEventListener, onclick, event types (click, input, submit)
  • Variables & Types - let, const, strings, numbers, booleans, template literals
  • Functions - declaring, calling, parameters, return values
  • Conditionals - if/else, comparison operators, logical operators
  • Arrays - creating, push, pop, includes, indexOf, length
  • Loops - for, while, for...of, forEach, break

Quick-Fire Review

  • AI generated a button that doesn't work when clicked. What's the first thing you'd check?
  • You ask AI to "show the user's name on the page." It gives you innerHTML instead of textContent. Does it matter? When?
  • AI wrote let x = "5" + 3 and got "53". Your friend expected 8. Who's right and why?
  • You see const on every variable in AI-generated code. Can you still change an array declared with const? Why or why not?
  • AI built a loop but it runs forever. What's the most likely mistake?

Before You Leave

Wrap Up

  • [ ] Push random-word.html and/or town-explorer.html to your oim3690 repo
  • [ ] Update your learning log (wk11.md)
    • What does await do and why is it needed?
    • What is JSON and how does it relate to JavaScript objects?
  • [ ] Start thinking about Mini Project #3 (API-Powered App)

Before Next Session

Next: Quiz 3 + JavaScript Image Processing