Lab 10: Building a Responsive Interface

Introduction

In this lab, you'll build a small responsive web interface that fetches and displays API data in response to user input. You’ll implement event-driven logic, async/await data fetching, and dynamic rendering. Then, you’ll use an AI assistant to evaluate the clarity, performance, and maintainability of your implementation—learning how to use AI as a coding partner for iterative improvement.

This lab focuses on HTML/CSS/JavaScript fundamentals and real-world async workflows while demonstrating how AI tools can help identify patterns, anti-patterns, and refactoring opportunities.

---

Learning Objectives

• Build a simple responsive layout using semantic HTML and Flexbox or CSS Grid.
• Trigger API calls based on user events (button clicks, input changes, or keypress).
• Use async/await, try/catch, and loading states to manage async logic.
• Dynamically update the DOM using data from a public REST API.
• Use an AI assistant to review event-handling and async code for clarity and maintainability.
• Refactor code based on AI-suggested improvements.

---

Getting Started

Prerequisites

Before you begin, you should have:

• Basic understanding of HTML, CSS, and JavaScript
• Familiarity with Promises and async/await
• A browser with Developer Tools (Chrome, Firefox, Safari, Edge)
• A code editor (VS Code recommended)

---

Setup Instructions

This lab can be completed locally—no installation required.

1. Create a new project folder:

   mkdir lab_responsive_interface
   cd lab_responsive_interface

2. Create the following files:

   • index.html
   • styles.css
   • app.js

3. Open the folder in VS Code or your preferred editor.

4. Open index.html in your browser once you begin.

---

Lab Structure

This lab contains three exercises:

1. Build the responsive UI structure
2. Implement event-driven API fetching
3. Use AI to analyze and refine your code

---

Exercise Overview

You will build a small application with:

• A responsive search interface
• An input field for user queries
• A button or input event that triggers an API fetch
• A results panel that displays formatted data
• A loading indicator and error handling
• An AI-assisted review of your event and async logic

The API you'll use is: https://api.github.com/users/{username}

---

Exercise 1 - Build the Responsive Layout

Create a simple responsive UI with:

• A header
• A search bar section
• A results container

TODOs:

1. In index.html, add semantic structure using <header>, <main>, and <section>.

2. Add:

   • an <input id="usernameInput">
   • a <button id="searchBtn">Search</button>
   • a <div id="results"></div>

3. In styles.css, create a responsive layout:

   • Use Flexbox to center content
   • Add max-width constraints
   • Add media queries for mobile and desktop

4. Test responsiveness with DevTools device modes.

Reflection Questions

• How did your layout change between mobile and desktop views?
• What approach did you use to align the input and button?

---

Exercise 2 - Add Event Logic and Async API Fetching

Now you'll wire up the behavior.

Tasks

1. In app.js, select your DOM elements:

   const input = document.getElementById('usernameInput');
   const button = document.getElementById('searchBtn');
   const results = document.getElementById('results');

2. Create an async function fetchUser(username) that:

   • Calls https://api.github.com/users/${username}
   • Uses await fetch(...)
   • Handles errors with try/catch
   • Returns JSON data

3. Add an event listener to your button:

   button.addEventListener('click', () => { ... });

   Requirements:

   • Validate input
   • Show a “Loading…” state
   • Call your fetch function
   • Render the results (avatar, name, bio, followers, etc.)

4. Style results in a responsive card layout.

5. Optional Enhancements (if time allows):

   • Trigger fetch on Enter key
   • Add a fade-in animation to results
   • Add loading spinner instead of plain text

Reflection Questions

• How does async/await improve readability compared to .then()?
• Did you consider debounce or throttle techniques?

---

Exercise 3 - AI-Assisted Review & Refactor

The final step of the lab is to use AI to evaluate your event handlers and async logic.

Tasks

1. Copy/paste your JavaScript code into an AI assistant (such as ChatGPT).

2. Ask the AI:

   • “Review my event logic and async handling. Identify improvements for clarity, performance, and maintainability.”

3. Review the suggestions.

4. Apply at least two improvements to your code: Examples:

   • Extracting reusable helpers
   • Improving error messages
   • Adding early returns
   • Adding input validation
   • Improving DOM updates (e.g., avoiding multiple reflows)
   • Adding defensive coding patterns

Reflection Questions

• What improvements did AI identify that you didn’t consider?
• How did the AI’s suggestions change your code structure?
• Would your code be easier for a teammate to read after refactoring?

---

Tips for Success

• Keep functions small and focused (one clear responsibility).
• Separate rendering logic from data-fetching logic.
• Use consistent naming for DOM IDs and variables.
• Test edge cases: empty input, invalid username, request failure.
• Print errors to the console to help debugging.
• Use browser DevTools network tab to verify API calls.

Common Issues & Troubleshooting

Issue: TypeError: Cannot read property ... of null Solution: Confirm your script loads after DOM, or use defer.

Issue: API returns 403 or 404 Solution: Check rate limits or incorrect username input.

Issue: UI jumps around when loading Solution: Reserve vertical space using min-height or a skeleton loader.

Issue: Nothing displays after fetch Solution: Log the response to verify the API shape.