Make an AI result usable in a web interface
===========================================
JavaScript developers comparing AI courses

Original practice exercise by AI Course Rank. No purchase required.

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.

YOUR TASK
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.

MY ATTEMPT / OUTPUT
[Write your result here]

TIME SPENT / WHAT WAS DIFFICULT
[Your notes]

ANSWER CHECKS
[ ] A valid answer shows its source next to the text.
[ ] An absent answer is distinguished from a loading state.
[ ] Malformed data produces an understandable error.
[ ] A string containing HTML renders as text, never executable markup.
[ ] The retry control is reachable with Tab and works with Enter.

NEXT LEARNING DECISION
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.

Scrimba AI Engineer Path
Its application projects cover a JavaScript-oriented route. Review prerequisites and check current pricing.
https://aicourserank.com/courses/scrimba-ai-engineering/
Hugging Face Agents Course
A free alternative if you are willing to use Python and meet its LLM prerequisites.
https://aicourserank.com/courses/hugging-face-agents-course/

Some course links may earn a commission. Check current pricing and access terms.
Exercise: https://aicourserank.com/practice/javascript-ai-interface/