OIM3690 - AI-Powered Web Development

2026 Spring

Session 18 (3/31)

Today's Agenda

• Announcements
• Review Questions
• JavaScript Basics: Functions
  • Declaring functions, parameters, return values
  • Arrow functions
• JavaScript Conditionals: Making Decisions
  • if/else, comparison & logical operators
• Your Turn
  • Grade Calculator
  • Form Validator

Announcements/Updates

• Weekly Learning Logs - wk10.md starts this week
• Mini Project #2 - Interactive Web Tool. PROPOSAL.md should be done. Start building your 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 Basics - variables (let/const), data types, operators, template literals

Review Questions

• You wrote const total = price + tax and got "1005" instead of 15. What happened, and how do you fix it?
• Your code has const counter = 0 and later counter = counter + 1. It crashes. Why, and what's the one-word fix?
• Rewrite this using a template literal: "Hello, " + name + "! You have " + count + " items."
• Why does 5 == "5" return true but 5 === "5" returns false?

JavaScript Basics: Functions

JavaScript Conditionals

Your Turn: Grade Calculator

Create grade-calculator.html in your oim3690 repo. Combine functions + conditionals:

• An <input> for the score, a <button>, and a <p> for the result
• Write a function getGrade(score) that uses if/else to return:
  • "A" (90+), "B" (80+), "C" (70+), "D" (60+), "F" (below 60)
• On button click, call your function and display the result
• Remember: input.value is a string. Convert it with Number().

Your Turn: Form Validator

Extend your grade calculator. Add validation using conditionals:

• If the input is empty, show "Please enter a score"
• If the score is not between 0 and 100, show "Score must be 0-100"
• Only calculate the grade if the input passes validation

Bonus: Change the result text color based on the grade (green for A/B, red for D/F).

Before You Leave

Wrap Up

• [ ] Push grade-calculator.html to your oim3690 repo
• [ ] Update your learning log (wk10.md)
  • What's the difference between a function declaration and an arrow function?
  • When would you use if...else if vs a simple if...else?
• [ ] Continue working on Mini Project #2

Before Next Session

• Review the Functions and Conditionals slides
• Experiment: add more features to your grade calculator
• Try: write a function that checks if a number is even or odd

Next: Working with arrays and loops