OIM3690 - AI-Powered Web Development

2026 Spring

Session 22 (4/14)

contain

Today's Agenda

Announcements/Updates

  • Weekly Learning Logs - wk12.md due this week
  • Mini Project #3 - API-Powered App. Start building!
  • Quiz 3 - Next session (Thursday). Covers JS fundamentals: DOM, events, variables, conditionals, arrays, loops. No API/fetch.
    • Prepare your own cheat sheet, and I will also provide one
  • Final Project - Proposal due Sunday 4/19
  • 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
  • APIs - fetch(), async/await, JSON, GET vs POST

Final Project

Final Project Overview

Build a complete web application that solves a real problem. Worth 25% of your final grade.

Milestone Date Details
Project Intro Today (4/14) Requirements, topic brainstorming
Proposal 4/19 (Sun) Submit proposal.md to your project repo
Demo Day 4/28 (S26) Gallery walk + peer voting
Final Submission 5/1 (Thu) Code, README, all finalized

Full requirements are on Canvas.

Requirements

Your project must include:

  • Multiple pages or views (at least 3 sections)
  • Responsive design (works on mobile and desktop)
  • Meaningful interactivity (at least 3 of: DOM manipulation, event handling, form validation, API integration, local storage, filtering/sorting, theme toggle)
  • Navigation between sections/pages
  • Deployment with a working public URL (GitHub Pages or alternatives)

Proposal (due 4/19)

Create proposal.md in your project repo:

  • What are you building? Who is it for?
  • Why? What problem does it solve?
  • MVP vs. Stretch Goals: minimum working version vs. nice-to-haves
  • Technologies: APIs, libraries, frameworks you plan to use

Keep it short and focused.

Finding Your Idea

The best projects come from real needs:

  • Your own frustrations - what tool do you wish existed?
  • Help someone - interview a friend, family member, or student org
  • Improve something - what app or website annoys you?
  • Your interests - music, sports, cooking, gaming?

API Protection & OpenAI

Your Turn: Try the OpenAI API

  • Set up config.js with the API key from Canvas
  • Add config.js to .gitignore
  • Build a simple "Ask AI" page:
    • A <textarea> for the prompt
    • A <button> to submit
    • A <p> to display the response
  • Add a loading message while waiting

Bonus: Build something creative. A joke generator? A study buddy? A recipe suggester?

JavaScript Image Processing

(if time)

Before You Leave

Wrap Up

  • [ ] Set up config.js + .gitignore for your API key
  • [ ] Try calling the OpenAI API from a simple HTML page
  • [ ] Update your learning log (wk12.md)
    • How does .gitignore protect your API key?
    • What Final Project idea are you considering?
  • [ ] Start your Final Project proposal (due Sunday 4/19)

Before Next Session

Next: Quiz 3 + Project Work Time