Project: API-Powered Learning Dashboard

This project combines fetch, async/await, DOM updates, and error handling. Use a public demo API or your own endpoint; do not place private credentials in browser code.

Required interface#

Create a refresh button, a container for results, and a status element with role="status". Show a loading message while the request runs, render a list when data arrives, and provide a retry action after failure.

Fetch pattern#

async function loadItems() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const data = await response.json();
  if (!Array.isArray(data)) {
    throw new TypeError("Unexpected API response shape");
  }
  return data;
}

Call this function from a UI handler with try...catch and a finally block. Disable or otherwise guard the refresh action during a request if duplicate requests would create a poor experience.

Rendering safely#

Create elements and assign user-visible strings to textContent. Do not assume external API text is safe HTML. Validate the fields you use and provide sensible fallbacks for missing optional fields.

Completion checklist#

• Initial loading state appears.
• Network or HTTP errors produce a clear message.
• An empty result has its own useful message.
• Refreshing works without duplicating content.
• Long content does not break the layout.
• The page remains keyboard-accessible and works at narrow viewport widths.

Extension#

Add a search field that filters the already-loaded results. Consider adding AbortController if a new request should cancel an older one.