OIM3690 - AI-Powered Web Development

2026 Spring

Session 15 (3/12)

contain

Today's Agenda

  • Announcements
  • Quiz 2 Review
  • CSS Frameworks: Reading AI-Generated Code
  • Your JS Questions
  • JavaScript Intro: DOM & Events
  • Your Turn: DOM & Events practice

Announcements/Updates

  • Weekly Learning Logs - wk08.md due this week
  • Mini Project #1 - keep iterating!
  • 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

Quiz 2 Review

Quiz 2: Let's Go Over It

Take out your first two pages (the ones you kept).

We'll walk through the questions together.

  • What tripped you up?
  • What would you do differently?

CSS Frameworks

Your JS Questions

What Did You Notice?

From your learning logs, what questions did you write about the JS demo?

  • What did you notice in the code?
  • What looked most confusing?

Let's discuss a few before diving in.

Intro to JavaScript

Your Turn: One Prompt, One App

Let AI Build You a Todo App

Use Copilot or any AI tool to create todo.html in your oim3690 repo.

Your prompt: "Create a simple todo app in a single HTML file using vanilla JavaScript. No frameworks."

That's it. One prompt. Open it in your browser. Does it work?

Explore the Code

Now read the code AI wrote for you. Find:

  1. Where is the <script> tag?
  2. Find every document.querySelector() or getElementById(). What does each one select?
  3. Find every addEventListener(). What event does each one listen for?
  4. Where does the code change the DOM? (textContent, innerHTML, classList, appendChild, etc.)

Write your findings in your learning log.

Compare with a Neighbor

Show your todo app to someone sitting near you.

  • Does it look the same or different?
  • Did AI use the same approach?
  • Whose looks better? Why?

Make It Yours

AI gave you a working app. Now customize it:

  • Change the colors and styling to match your taste
  • Change the title or theme (grocery list? bucket list? homework tracker?)
  • Modify the layout (side-by-side? cards instead of a list?)

Read every line before keeping it. If you don't understand something, ask AI to explain it and write the explanation in your learning log.

Before You Leave

Wrap Up

  • [ ] Push todo.html to your oim3690 repo
  • [ ] Update your learning log (wk08.md)
    • What patterns did you find in the todo code?
  • [ ] Continue working on Mini Project #1

Before Next Session

  • Read your todo.html code line by line. Can you explain every line?
  • Annotate: add comments to the JS code explaining what each section does
  • Try: open the Console on any website and use querySelector to change something

Next session: JavaScript variables, functions, and conditionals