General Assembly logo

Lab 9 Adding Interactivity to a Web Page

Introduction

In previous labs, you built static web pages using HTML and CSS. In this lab, you'll bring those pages to life by adding JavaScript-driven interactivity. You’ll write code to toggle menus, show/hide elements, and respond to user actions—fundamental skills for modern front-end development.

You’ll also use AI as a coding assistant: explaining confusing JavaScript behavior, helping identify bugs, and correcting errors you encounter along the way. By the end, you'll have a working interactive mini-page and experience using AI as a debugging partner.

Learning Objectives

By the end of this lab, you will be able to:

  • Use JavaScript to select and manipulate DOM elements
  • Respond to user interactions using event listeners
  • Implement common UI patterns such as toggling menus and showing alerts
  • Use AI to explain errors, debug issues, and refine your code
  • Understand how JavaScript interacts with HTML structure and CSS classes

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

  • Basic understanding of HTML and CSS
  • A code editor (VS Code recommended)
  • A modern web browser

Setup Instructions

You can complete this lab in any environment—no special tooling needed.

  1. Create a folder named lab3_1_interactivity.
  2. Inside it, create three files:
index.html
styles.css
script.js
  1. Open the folder in VS Code (or your preferred editor).
  2. Open index.html in your browser.
  3. Keep the browser open and refresh frequently as you test.

Lab Structure

This lab contains the following files:

  • README.md – The text of this lab
  • index.html – Starting HTML page
  • styles.css – Minimal styling
  • script.js – Your JavaScript work (most exercises happen here)

Exercise Overview

In this lab, you will:

  1. Build a simple page with a navigation menu and a button
  2. Use JavaScript to toggle the nav menu open/closed
  3. Add a button that triggers an alert when clicked
  4. Use AI to ask targeted debugging questions when you get errors

Your main goal is to confidently attach JavaScript to the DOM and control UI behavior.

How to Work Through the Lab

  1. Start with the HTML – Ensure your structure is clear and contains elements to manipulate.
  2. Add event listeners – Learn how to detect when users click buttons or menu icons.
  3. Manipulate classes – Show/hide UI elements by adding or removing CSS classes.
  4. Use AI when stuck – Paste your code or error message and ask for help.
  5. Test continuously – Refresh the page after each small change.

Starter Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Interactivity Lab</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <header>
    <button id="menu-toggle">☰ Menu</button>
    <nav id="nav-menu" class="hidden">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <h1>JavaScript Interactivity Lab</h1>
    <button id="alert-btn">Show Alert</button>
  </main>

  <script src="script.js"></script>
</body>
</html>

styles.css

.hidden {
  display: none;
}

nav {
  background: #f2f2f2;
  padding: 10px;
  margin-top: 10px;
}

button {
  margin: 10px 0;
  padding: 8px 12px;
  font-size: 16px;
}

script.js

// TODO: 1. Select #menu-toggle and #nav-menu using document.querySelector

// TODO: 2. Add a click event listener to #menu-toggle
// Inside the listener, toggle the "hidden" class on #nav-menu
// Hint: element.classList.toggle("hidden")

// TODO: 3. Select #alert-btn

// TODO: 4. Add a click event listener that shows an alert("Hello from JavaScript!")

// TODO: 5. Introduce an intentional bug (optional) and ask AI to help debug

// TODO: 6. Stretch goal: Add any extra interaction
// Example ideas:
// - Change button text when menu is open
// - Animate menu with CSS classes
// - Console-log every click on the page

Exercises

Exercise 1 - Toggle the Menu

Your first task is to make the menu appear/disappear when the user clicks the menu button.

Steps:

  1. Select the menu button (#menu-toggle)
  2. Select the nav menu (#nav-menu)
  3. Add a click event listener
  4. Inside the handler, toggle the .hidden class

Verify: Clicking the button now shows and hides the menu.

Exercise 2 - Add an Alert Button

Select the alert button and add a click event listener that fires:

alert("Hello from JavaScript!");

Verify: Clicking the button shows an alert popup.

Exercise 3 - Use AI to Debug

Break something on purpose:

  • Misspell querySelector
  • Forget to close a bracket
  • Use the wrong variable name

Then:

  1. Copy the error from the browser console
  2. Paste it into your AI assistant
  3. Ask: “What does this error mean and how do I fix it?”
  4. Apply the fix and verify your code now works

Exercise 4 - Add Your Own Interaction

Pick one small enhancement to implement:

Examples:

  • Change button text to “Close Menu” when the menu is visible
  • Add a fade-in animation (CSS + JS class toggle)
  • Log console.log("Menu toggled") each time the user clicks
  • Disable the alert button after it’s clicked once

This optional challenge helps you practice independent problem-solving.

Reflection Questions

Answer the following in a short paragraph each:

  1. What is one thing you learned about how JavaScript interacts with the DOM?
  2. What debugging help did AI provide that you wouldn’t have found as quickly on your own?
  3. How might these techniques scale to more complex web applications?

Tips for Success

  • Refresh the browser often—JavaScript does not auto-reload

  • Use console.log() generously when debugging

  • If something is not working, check:

    • element IDs
    • spelling of methods
    • console errors

  • Ask AI for explanations, but try to fix errors yourself first

  • Remember: small, incremental changes > writing everything at once