Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grocer Produce List</title> <style> body { font-family: Arial, sans-serif; } .product { border: 1px solid #ccc; padding: 10px; margin: 10px; } </style> </head> <body> <h1>Grocer Produce List</h1> <input type="text" id="search" placeholder="Search for produce..."> <div id="product-list"></div> <script> async function fetchProducts() { const response = await fetch('/products'); const products = await response.json(); const productList = document.getElementById('product-list'); productList.innerHTML = products.map(product => ` <div class="product"> <h3>${product.name}</h3> <p>${product.description}</p> <p>Price: $${product.price}</p> <p>Grocer: ${product.grocer}</p> <p>Location: ${product.location}</p> </div> `).join(''); } document.getElementById('search').addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const products = document.querySelectorAll('.product'); products.forEach(product => { const text = product.textContent.toLowerCase(); product.style.display = text.includes(searchTerm) ? 'block' : 'none'; }); }); fetchProducts(); </script> </body> </html>
Leave a Comment