Rendering Lists from Data

Real interface work often means turning arrays into visible lists. This lesson focuses on mapping data to HTML strings or DOM nodes, then updating the page when the source data changes.

Practice filtering a small collection and re-rendering the visible items as the search term changes.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<label for="query">Search</label>
<input id="query" type="search" placeholder="Type to filter">
<ul id="items"></ul>

body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}
#items {
  margin-top: 1rem;
  padding: 0;  
  list-style: none;
}
#items li {
  padding: 0.75rem 1rem;  
  border-bottom: 1px solid #e4e4e4;
}

const items = [  "Forms",  "Events",  "State",  "Rendering",  "Async"];
const query = document.getElementById("query");\nconst list = document.getElementById("items");
function render(filter = "") { 
const visible = items.filter((item) => item.toLowerCase().includes(filter.toLowerCase()));
list.innerHTML = visible.map((item) => `<li>${item}</li>`).join("");
}
query.addEventListener("input", (event) => {  
render(event.target.value);
}); 
render();