OIM3690 - AI-Powered Web Development

2026 Spring

Session 17 (3/26)

contain

Today's Agenda

  • Announcements
  • Review Questions
  • JavaScript Basics: Variables, Types, & Functions
  • Your Turn
    • Greeting Page
    • Tip Calculator

Announcements/Updates

  • Weekly Learning Logs - wk09.md due this week
  • Mini Project #2 - Interactive Web Tool. Have you started 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 - DOM, querySelector, addEventListener, events, external JS/CSS files

🙋 Review Questions

  • You wrote const btn = document.querySelector('button') but clicking the button does nothing. What line of code is missing?
  • document.querySelector('myButton') returns null, but <button id="myButton"> is right there in the HTML. What's wrong?
  • You changed a heading's color in the Console and it worked. After refreshing the page, it's gone. Why?
  • You see onclick="doSomething()" in someone's HTML. What's a better way to set up that event in JavaScript, and why?

JavaScript Basics

Your Turn: Greeting Page

Create greeting.html in your oim3690 repo. Write the core logic yourself first:

  • A text <input>, a <button>, and a <p> for displaying the greeting
  • Use querySelector to find all three elements
  • Use addEventListener to listen for the button click
  • Inside the handler, read the input value, store it in a variable, and use a template literal to set the greeting text

Stuck? Write as much as you can, then move to the next slide.

Your Turn: Improve with AI

Once your greeting page works, ask AI to build on your code (not start over):

  • "Add a dropdown so the user can pick a language (English, Spanish, Chinese)"
  • "Add styling so the greeting appears with a nice animation"
  • "Show a different background color depending on the language selected"

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

Your Turn: Tip Calculator (Challenge)

Create tip-calculator.html. This one exercises type conversion and functions:

  • Inputs for bill amount and tip percentage
  • A function that calculates the tip and total
  • Display the result using a template literal
  • Watch out: what happens if you do "50" + 10? How do you fix it?

Hint: Number() or parseFloat() converts a string to a number.

Before You Leave

Wrap Up

  • [ ] Push greeting.html (and tip-calculator.html if you got there) to your oim3690 repo
  • [ ] Update your learning log (wk09.md)
    • What's the difference between let and const?
    • What happened when you tried "5" + 3 vs "5" - 3?
  • [ ] Work on Mini Project #2 proposal (PROPOSAL.md)

Before Next Session

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

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