OIM3690 - AI-Powered Web Development

2026 Spring

Session 16 (3/24)

contain

Today's Agenda

Announcements/Updates

  • Welcome Back! Hope you had a great Spring Break
  • Weekly Learning Logs - wk09.md starts this week
  • Projects:
    • Personal Website (username.github.io) - keep improving!
    • Mini Project #1 - Have you gotten feedback from your "client"?
    • Mini Project #2 - Interactive Web Tool. Start your PROPOSAL.md
  • 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 - first look at how JS makes pages interactive (todo app demo)

Review: Your Todo App

What Did You Find?

Before break, you built a todo app with AI. Let's look at the code together.

Open your todo.html in VS Code and find:

  • Where is the <script> tag?
  • How does JavaScript find HTML elements on the page?
  • What makes the "Add" button actually do something?
  • Where does the code change the page (add text, add items, 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.

JavaScript Intro

Try It: Change Any Website

Open any website in Chrome. Open DevTools (F12) > Console. Try:

document.querySelector('h1').textContent = 'I changed this!';
document.querySelector('h1').style.color = 'red';
document.querySelector('body').style.backgroundColor = 'black';

Now go further:

  • Can you hide an element? (hint: .style.display = 'none')
  • Can you change all paragraphs at once? (hint: querySelectorAll)
  • Challenge: Make the page look as ridiculous as possible in 2 minutes

Discuss: What Did You Change?

  • Show each other your creations. Who made the most dramatic change?
  • Pick a website you both use. Take turns: one person names an element, the other writes the querySelector to find it.
  • Question: Did your changes survive a page refresh? Why or why not?

JavaScript Basics

Try It in the Console

Open DevTools (F12) > Console tab. Type each line and observe:

let name = "Your Name";
typeof name

let age = 20;
`Hello, ${name}! You are ${age} years old.`

"5" + 3
"5" - 3

function double(x) { return x * 2; }
double(21)

Why did "5" + 3 and "5" - 3 give different results?

Discuss: Variables & Functions

  • Predict first, then run: What does typeof null return? What about typeof []?
  • What happens if you type let name = "Other" again? Why?
  • Write a function together: function add(a, b) { return a + b; }. What does add("hello", "world") return?
  • Challenge: Can you write a function that takes a name and returns a greeting using a template literal?

Your Turn

Step 1: Try It Yourself First

Create greeting.html in your oim3690 repo. Write the core logic yourself (it doesn't have to be perfect):

  • A <button> and a <p> to display the greeting
  • Use querySelector to find both elements
  • Use addEventListener to listen for the button click
  • Inside the handler, use a let variable and template literal to set the greeting text

Stuck? That's fine. Write as much as you can, then move to Step 2.

Step 2: Collaborate with AI

Now ask AI to improve your code (not start from scratch):

  • "Add a text input so the user can type their name"
  • "Add styling to my greeting page"
  • "Add a dropdown to pick a language and change the greeting"

Read every line AI adds. If you don't understand something, ask it to explain.

Step 3: Compare

Look at your original code vs the AI-improved version:

  • What did AI add that you didn't think of?
  • Did AI use a different approach than yours?
  • Is the AI version always better? Why or why not?

Write your comparison in your learning log.

Before You Leave

Wrap Up

  • [ ] Push greeting.html to your oim3690 repo
  • [ ] Update your learning log (wk09.md)
    • What's the difference between let and const?
    • What does your greeting function do step by step?
  • [ ] Keep iterating on Mini Project #1 and your personal website
  • [ ] Start your Mini Project #2 PROPOSAL.md

Before Next Session

  • Review the JavaScript Basics slides, especially functions and template literals
  • Experiment: modify your greeting.html to add more features
  • Try: open the Console on any website and type typeof document.title

Next: Making decisions in code with if/else and conditionals