AI Course Rank
Sign in

JavaScript developers comparing AI courses · About 45 minutes

Make an AI result usable in a web interface

Build a small result card with success, missing-answer and invalid-data states before paying for a model API.

Use the sample below. No paid model, signup or course purchase is needed for this exercise.

Download the worksheet

Your starting material

Use these local fixtures; they are invented exercise data:
{"status":"ok","answer":"The mug costs 18 USD.","source":"B2"}
{"status":"unknown","answer":null,"source":null}
{"status":"ok","answer":null,"source":42}
Do not use credentials or make external API calls.

Make your first attempt

  1. Render the first fixture as a readable answer with its source. Use textContent or your framework's escaped text rendering.
  2. Render the unknown fixture with a useful explanation. Reject the malformed fixture instead of showing a confident blank answer.
  3. Add a loading state and a retry button that reloads the local fixture. Inspect the result on a narrow screen and with keyboard navigation.
Check your result

Try the task before opening these checks. Tick each one after comparing it with your own output.

Checks stay on this page only. Your answers and work are not uploaded.

Choose what to learn next

If UI state or data validation blocks you, strengthen JavaScript first. If those work, compare a JavaScript AI application course with a Python route based on the language you intend to ship.

Some course links may earn us a commission. Check current pricing and access terms before enrolling. Funding disclosure

Course sources

This worksheet is an original practice exercise. The following pages describe the learning options.

Try another exercise →