Lab: Build a Small JavaScript Application Using GitHub Copilot

🎯 Lab Goal

In this lab, you will learn how to use GitHub Copilot as a step-by-step coding assistant to build a small interactive JavaScript application. You will practice breaking down a large problem into smaller parts, prompting Copilot effectively, reviewing its suggestions, and ensuring you understand the code before using it.

---

🕹️ Choose ONE Project to Build

You may build any one of the following applications:

1. Tic-Tac-Toe Game

A simple 3×3 interactive grid where two players take turns placing X and O.

2. Image Gallery

A grid of images that expands, highlights, or shows captions/details when clicked.

3. Interactive Web Form

A form with validation, dynamic fields, success messages, and helpful UI behavior.

4. Snake Game

A simple version of Snake played inside a canvas, where the snake grows as it eats.

You will follow the same step-by-step process regardless of the project you choose.

---

⚠️ IMPORTANT RULE

You MUST understand every line of code Copilot generates.

If something does not make sense:

• Ask Copilot:

  • "Explain this code to me line by line in simple words."

• If still unclear:

  • "Explain it even more simply, I am a beginner."

Only accept code once you truly understand it.

---

🧩 Step-by-Step AI-Assisted Development Workflow

These steps are demonstrated using Tic-Tac-Toe, but apply equally to a gallery, a form, or a snake game.

Follow each step in order.

---

✅ STEP 1 — Create a Basic HTML Page

Prompt Copilot:

"Create a simple HTML page with a centered title and an empty container where my application will be displayed."

✔ Understand the structure before continuing.

---

✅ STEP 2 — Add Basic Layout/CSS

Prompt Copilot:

"Write CSS to create the basic layout of my application. Make the container centered and clean-looking."

✔ For Tic-Tac-Toe: grid layout ✔ For Gallery: image grid ✔ For Form: spacing, labels, alignment ✔ For Snake: centered canvas

Ask Copilot to simplify any CSS that confuses you.

---

✅ STEP 3 — Add Interactive Elements

Prompt Copilot:

"Write JavaScript that makes the main elements of my app interactive, and log interactions to the console."

Examples:

• Tic-Tac-Toe → Clicking cells
• Gallery → Clicking thumbnails
• Form → Logging input events
• Snake → Logging key presses

✔ Understand how event listeners work.

---

✅ STEP 4 — Add Core Functionality

Prompt Copilot:

"Add the main behavior of the application based on user interactions."

Examples:

• Tic-Tac-Toe → X/O turns
• Gallery → Expand image or show details
• Form → Validate fields
• Snake → Move based on arrow keys

✔ Test frequently.

---

✅ STEP 5 — Prevent Invalid Actions

Prompt Copilot:

"Improve the logic to prevent invalid or repeated actions."

Examples:

• Tic-Tac-Toe → No overwriting cells
• Gallery → No repeating animations
• Form → Prevent submitting empty fields
• Snake → Prevent reversing direction into itself

✔ Ask Copilot to explain any conditions.

---

✅ STEP 6 — Add Completion Logic or Feedback

Prompt Copilot:

"Add feedback or end-game logic to my application."

Examples:

• Tic-Tac-Toe → Win detection
• Gallery → Highlight active image
• Form → Show success message
• Snake → Detect game over

✔ Understand the logic before moving on.

---

✅ STEP 7 — Add Reset/Restart Button

Prompt Copilot:

"Add a Reset button and write JavaScript to restart the application state."

✔ Make sure the app resets cleanly.

---

✅ STEP 8 — Add Polished Styling

Prompt Copilot:

"Make my application look modern and clean with improved colors, spacing, and small animations."

✔ Keep it simple.

---

🎉 Final Project Deliverable

By completing these steps, you will have:

• A working interactive JavaScript application
• Built entirely through step-by-step Copilot prompts
• With code you fully understand

---

🧠 Reflection Questions

Answer these after finishing:

1. What project did you choose and why?
2. Which Copilot suggestions were easiest to understand?
3. Which part of the application logic was hardest, and how did Copilot help?
4. What did you learn about breaking a problem into steps?
5. When should you avoid relying on Copilot?