OIM3690 - AI-Powered Web Development

2026 Spring

Session 20 (4/7)

contain

Today's Agenda

  • Announcements
  • Review Questions
  • JavaScript Arrays & Loops
    • Loops: for, while, for...of, forEach
    • Common patterns: summing, counting, filtering, searching
  • Your Turn
    • Loop Challenges
    • Quiz Score Analyzer (from S19)
  • API Preview

Announcements/Updates

  • Weekly Learning Logs - wk11.md due this week
  • Mini Project #2 - Interactive Web Tool. Should be working. We will review soon.
  • Mini Project #3 - API-Powered App. Start thinking about what API you want to use.
  • Quiz 3 - Next session (Thursday). 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, querySelector, addEventListener, events
  • JS Fundamentals - variables, types, operators, template literals, functions, conditionals
  • Arrays - creating, modifying, searching with push, pop, includes, indexOf

Review Questions

  • You have const items = ['a', 'b', 'c']. What does items.push('d') return? What does the array look like after?
  • Your friend wrote const colors = ['red', 'blue']; colors = ['green']; and it crashed. Why? How would you add 'green' without crashing?
  • What is the difference between items.indexOf('x') and items.includes('x')? When would you use each?

JavaScript: Loops

Your Turn: Loop Challenges

Create loop-challenges.html (basic HTML + <script>) in your oim3690 repo. Display results on the page. Solve these using loops:

Use const numbers = [4, -8, 15, -16, 23, 42, -3] for all challenges:

  1. Build a list: Use a loop to create <li> elements and add them to a <ul> on the page
  2. Sum it up: Calculate and display the total
  3. Find the max: Find the largest number (don't use Math.max)
  4. Count positives: Count how many numbers are greater than 0
  5. Find evens: Collect all even numbers into a new array and display them

Your Turn: Quiz Score Analyzer (from S19)

Create score-analyzer.html. Hard-code: const scores = [88, 72, 95, 63, 81, 56, 90]

Part 1 - Loop through the array to calculate and display:

  • Total number of scores, average (use toFixed(1)), highest and lowest
  • Number of passing scores (>= 60)

Part 2 - Build on Part 1:

  • Display each score as a horizontal bar (<div> with width = score%) with its letter grade
  • Color-code: green for A/B, orange for C/D, red for F

Quiz Score Analyzer (continued)

Part 3 - Show a grade distribution bar chart (e.g., count of A, B, C, D, F as vertical or horizontal bars)

Part 4 - Add an <input> and <button> so users can add new scores. All stats and charts update automatically.

API Preview

What if your page could get live data from the internet?

const response = await fetch('https://oim.108122.xyz/words/random');
const data = await response.json();
console.log(data);  // a random word from the server!
  • fetch() sends an HTTP request (like your browser does)
  • .json() converts the response to a JavaScript object
  • APIs let your code talk to other servers and get real data

We will dive deep into this on Thursday.

Before You Leave

Wrap Up

  • [ ] Push loop-challenges.html and/or score-analyzer.html to your oim3690 repo
  • [ ] Update your learning log (wk11.md)
    • When would you use a for loop vs for...of?
    • What does break do inside a loop? When is it useful?
  • [ ] Continue working on Mini Project #2
  • [ ] Study for Quiz 3 (Thursday)

Before Next Session

Next: Quiz 3 + Connecting to the web with fetch and APIs