AI-Assisted Public API Learning Lab

A compact developer-education sample for beginner JavaScript learners who can write functions and update the DOM but are new to live external data.

Learners build a browser experience that requests a random quote from the DummyJSON Quotes API, checks the HTTP response, parses JSON, selects the needed fields, and displays the result safely.

Learning goal

Connect familiar JavaScript skills to a reliable API workflow:

Request → Validate → Parse → Select → Display

After completing the lab, a learner should be able to:

• describe what happens between calling fetch() and updating the page;
• use Promise chaining with .then() to work with JSON data;
• check response.ok before trusting a response body;
• identify relevant properties in an API response;
• represent loading, success, and error states in the interface;
• update untrusted text with textContent;
• evaluate AI-generated code against documentation and observed behavior.

Repository map

ai-assisted-public-api-lab/
├── README.md
├── .github/
│   └── copilot-instructions.md
├── demo-starter/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── demo-complete/
│   ├── index.html
│   ├── style.css
│   └── script.js
└── docs/
    ├── student-guide.md
    └── design-rationale.md

Try the lab

No installation or API key is required.

1. Clone or download this repository.
2. Open demo-starter/index.html with a local development server.
3. Follow the student guide.
4. Compare your decisions with demo-complete/ after you have a working attempt.

Opening the HTML file directly may work, but a local server provides a development setup closer to everyday browser work. VS Code's Live Server extension or python3 -m http.server are simple options.

What the completed example demonstrates

The completed version intentionally stays small. Its JavaScript:

1. disables the button and announces a loading state;
2. sends a GET request to https://dummyjson.com/quotes/random;
3. throws an error when response.ok is false;
4. converts the response body to JavaScript data;
5. verifies that the expected text fields exist;
6. writes the quote and author with textContent;
7. shows a useful error message when the workflow fails;
8. restores the button in .finally().

The goal is not abstraction for its own sake. Named functions make each interface responsibility visible while the Promise chain keeps the network sequence readable.

Working with a coding assistant

The repository-level instructions in .github/copilot-instructions.md ask an AI coding assistant to protect the learning level and the security boundaries of the exercise.

A useful request includes:

• the learner's current experience;
• the file and TODO being addressed;
• required syntax, such as .then() rather than async/await;
• constraints, including vanilla JavaScript and no innerHTML;
• a request for explanation and testing guidance;
• permission boundaries for how much code the assistant should produce.

Learners remain responsible for checking the API documentation, running the code, inspecting errors, and explaining the final decisions.

Reliability and accessibility choices

• Semantic headings and a visible keyboard-focus treatment support navigation.
• A status region announces request progress and failures.
• The request button is disabled while work is pending.
• response.ok prevents unsuccessful HTTP responses from being treated as successful data.
• Response fields are checked before display.
• textContent prevents API-provided text from being interpreted as HTML.
• The interface preserves a clear message when the network or response shape fails.

Attribution and clean-room note

This portfolio sample is an independently reconstructed developer-education artifact based on a live learning experience I previously designed and facilitated. All public wording, code, repository structure, and supporting materials were created anew. Employer branding, proprietary curriculum, internal links, learner information, and original contracted materials are not included.

The sample uses the public DummyJSON service for educational prototyping. It is not affiliated with or endorsed by DummyJSON.