Product listing project
Catalog request
Birch Parcel and Moss Studio need an internal product picker. The supplied fixture contains original fictional product ids, names, categories, and unit values. Build a responsive semantic catalog with text and category filters, a live count, an empty state, numeric sorting, and a complete reset. Done means the controls work together on both fixture batches without merging records that share a name.
A catalog is several small behaviors sharing one set of records. Search, category, sorting, the result count, and the empty state must agree about which products are visible. Build them in that order so each new requirement extends a working page. The fictional teams supply products with zero values, repeated names, and different categories; stable ids keep those records separate. Each step begins with your previous working files. Keep that work and add the next behavior. The finished catalog should fit the phone preview and recover cleanly after a filter matches nothing. Reset is part of the deliverable, not an escape from a broken state.
<main><h1 id="title"></h1><div class="cards"></div></main>
body{font:16px/1.5 system-ui,sans-serif;color:#17243b;background:#fff;margin:20px}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}main{max-width:100%}[hidden]{display:none!important}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{border:1px solid #94a3b8;padding:12px;min-width:0;overflow-wrap:anywhere}label{display:block}input,select{box-sizing:border-box;max-width:100%}ul{padding-left:24px}@media(max-width:600px){.cards{grid-template-columns:1fr}}
document.querySelector('#title').textContent=fixture.org+' catalog';
Read the markup and styles together, then trace the resulting control or layout.