Check the Reply Before You Show It

The route /api/order answers with text that should be JSON like {"orderId":"ORD-1042","status":"shipped"}. Three buttons ask for a good reply (#good), a reply with a status that is not allowed (#bad) and a reply that is plain words (#prose).

Read the reply, parse it, and check it with the zod schema Order. When it is valid, show ORD-1042: shipped in #card and clear #error. When it is not (invalid JSON or the wrong shape), leave #card empty and show Mitra could not read the order. in #error. Never let an exception escape.

What Check tests

Before any click, #card and #error are empty
The good reply shows ORD-1042: shipped and no error
A status that is not allowed leaves #card empty and shows the message
Plain words do not throw: same message, empty card
The code uses safeParse

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.

Command Palette

Check the Reply Before You Show It