Beginner
A shopping list: add, remove and sort
Build a shopping list. It starts with Rice and Bananas. Each item is an <li> inside <ul id="list">, with its name in a <span className="name"> and a Remove button.
A form has an input id="item" and an Add button. Submitting adds the trimmed text to the end of the list and empties the input. Empty text adds nothing. The page must not reload.
A button id="sort" sorts the list A–Z. Never use push, splice or sort on the state array itself.
What Check tests
- The list starts with Rice and Bananas
- Adding
Applesputs it at the end and empties the input - Submitting empty text adds nothing
- Remove deletes only that item
- Sort A–Z orders the list
- No
pushorsplicein the code
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.