审查生成的产品面板

<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>