OIM3690 - Web Technologies

2025 Spring

Session 19 (4/03)

Today's Agenda

• Welcome/News/Announcements
• Revisit Quiz3
• JavaScript: Validating Form
  • pair programming
  • ex17-1.html
  • ex17-converter.html

Welcome/News/Announcements

• Quiz 3 on JavaScript
  • Grades posted
  • Paper (60%) + Q1&Q2 (20%) + Q3 (20%)
• Project
  • Product Requirements Document (PRD): Due 4/12
• Communications:
  • Meet with me in person during office hours at least once this semester.
  • Email - specify course # in subject title, e.g., "OIM3690: GitHub settings"
  • Use Slack/GitHub when asking code-related questions
• Questions?

Project

• Two Roles
  • PM: Write Product Requirements Document (PRD) + wireframe
  • Dev: Build someone else's website
• Key Deadlines
  • 4/12: PRD
  • 4/22: First version (tag v1.0)
  • 4/25: PM–Dev Communications (via GitHub Issues)
  • 5/03: Final version (tag final) + reflections
• Collaboration
  • Use GitHub repo (PM creates, Dev joins)
  • At least 2 GitHub Issues to show real discussion

What we have learned so far...

• HTML: basic tags, image, link, list, id, class, div, span, table, form, multimedia, ...
• CSS: syntax, internal vs. external vs. inline, selectors, flexbox, grids, ...
• Website: design, ...
• JavaScript
  • Event, element
  • Variables
  • Functions
  • Conditional statements
  • Access form elements

Debugging Tips - Rubber Duck Debugging

Revisit Quiz 3 - Pair Programming/Debugging

• Work in pairs. Take turns sharing screen and explaining your JavaScript code.
• Open in Chrome with Console on. Look for error message if code is not working.
• Show the code in VSCode and discuss the following with your partner:
  1. What is the entry point of your JavaScript code? Which HTML elements and events is it targeting?
  2. Have you verified that your functions are triggered correctly? If not, add a test line (e.g. console.log("clicked")) to confirm.
  3. Go through each function line by line. What does each part do? Explain it to your partner.
• Only after you’ve finished the steps above:
  • Try asking ChatGPT if there are other ways to solve the same problem. Compare and reflect.

Tips for Effective Pair Programming & Debugging

• Listen actively to your partner. Ask clarifying questions when something’s unclear.
• Communicate clearly and respectfully: explain your thinking, not just your code.
• Be patient and supportive, especially when facing errors or bugs.
• Take turns leading and following: switch roles to keep both minds engaged.
• Stay focused and minimize distractions during your session.
• Use AI (e.g., ChatGPT) as a helper, not a crutch: try to reason through the problem first, then compare with AI suggestions.
• Celebrate every win together!

Revisit Quiz 3 - Be a Teacher

• quiz3-1.html
• quiz3-2.html
• quiz3-3.html

Q & A

• Any Question from past exercises, assignments, etc.
• Issues on GitHub

Lexture

• JavaScript: Validating Form
  • Pair programming
  • ex17-1.html
  • ex17-converter.html