Review this generated product panel before it is reused on a production page.
Load product cards on demand into a reusable, responsive panel and expose a clear failure state.
HTML
<section aria-labelledby="products-title">
<h2 id="products-title">Products</h2>
<button id="load-products">Load products</button>
<div id="results"></div>
</section>
<script>
const results = document.querySelector('#results');
async function loadProducts() {
const response = await fetch('/api/products');
const products = await response.json();
results.innerHTML = '';
for (const product of products) {
results.innerHTML += `<article class="card"><h3>${product.name}</h3></article>`;
}
window.addEventListener('resize', () => {
const width = innerWidth > 700 ? '300px' : '100%';
results.querySelectorAll('.card').forEach((card) => {
card.style.width = width;
});
});
}
document.querySelector('#load-products').addEventListener('click', loadProducts);
</script>
<style>
#results { display: flex; gap: 16px; } .card { width: 300px; }
</style>
generated code is illustrative, not from any one model