Beginner
A search box with an empty state
The input has id="search". Show only the names that contain the typed text, ignoring upper and lower case, as <li> items inside <ul id="results">.
Show a paragraph id="count" with the text N results (for example 4 results).
When nothing matches, show a paragraph id="empty" with the text No results, and no <li> items. When something matches, #empty must not be on the page.
What Check tests
- At the start all 6 names show and
#countsays6 results - Typing
rashows only Ravi, Meera, Kiran and Rahul #emptyis not shown while there are results- Typing
zzzshowsNo resultsand no items - Clearing the box brings all 6 names back
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.