OIM3690 - AI-Powered Web Development

2026 Spring

Session 19 (4/2)

Today's Agenda

• Announcements
• Review Questions
• JavaScript Arrays & Loops
  • Arrays: creating, modifying, searching
  • Loops: for, while, common patterns
• Your Turn
  • Shopping List Builder
  • Quiz Score Analyzer

Announcements/Updates

• Weekly Learning Logs - wk10.md due this week
• Mini Project #2 - Interactive Web Tool. Checkpoint: be ready to show your working prototype.
• 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

Review Questions

• You wrote function getGrade(score) but calling getGrade(85) returns undefined. What's most likely missing inside the function?
• Your function checks if (score >= 60) first, then else if (score >= 90). What would a student with 95 get? Why?
• What does this arrow function do? const f = x => x ** 2;
• You wrote let username = prompt("Enter your name"); and the user clicked OK without typing anything. Does if (username) run?

JavaScript Arrays & Loops

Your Turn: Shopping List Builder

Create shopping-list.html in your oim3690 repo.

• Start with an array: const items = ['Milk', 'Eggs', 'Bread']
• Use a loop to create <li> elements and add them to a <ul> on the page
• Add an <input> and <button> so users can type a new item and add it to the list
• Each time an item is added, re-render the entire list from the array

Hint: clear the <ul> with ul.innerHTML = '' before re-rendering.

Your Turn: Quiz Score Analyzer

Create score-analyzer.html. Combine arrays, loops, and your S18 skills:

• Hard-code an array of scores: const scores = [88, 72, 95, 63, 81, 56, 90]
• Loop through the array to calculate and display:
  • Total number of scores
  • Average score (use toFixed(1) for one decimal)
  • Highest and lowest scores
  • Number of passing scores (>= 60)
• Bonus: use your getGrade() function from S18 to show the grade next to each score

Before You Leave

Wrap Up

• [ ] Push shopping-list.html and/or score-analyzer.html to your oim3690 repo
• [ ] Update your learning log (wk10.md)
  • What's the difference between push() and unshift()?
  • When would you use a for loop vs a while loop?
• [ ] Keep working on Mini Project #2

Before Next Session

• Review the Arrays & Loops slides
• Experiment: add a "remove item" button to your shopping list
• Think: what kind of app could you build that fetches data from the internet?

Next: Connecting to the web with fetch and APIs