Intermediate
Fill the Form, Keep the User's Edits
The route /api/extract reads a customer's message and answers with JSON: { "name": …, "phone": … }. Either value can be null, meaning the message did not say.
When #fill is clicked, fetch the route, check the answer with the schema Extracted, and put each non-null value into #name and #phone. Give every input the AI filled the class ai. When the user types in a field, remove its ai class and never let a later fill overwrite it. If nothing could be filled, show Nothing found in that message. in #note.
What Check tests
- Before the click both inputs are empty
- Clicking
#fillfills both inputs and marks them with the classai - Typing in
#phoneremoves itsaiclass and keeps#namemarked - Filling again does not overwrite what the user typed
- A fill that finds nothing on empty inputs shows the note (checked in a fresh run of the page logic)
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.