Product Listings

body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } .navbar { background-color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .navbar-brand { font-size: 1.5em; font-weight: bold; } .navbar-search input[type="text"] { padding: 8px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; width: 200px; } .navbar-search button { padding: 8px 12px; border: 1px solid #ddd; border-radius: 0 4px 4px 0; background-color: #eee; cursor: pointer; } .main-content { display: flex; padding: 20px; gap: 20px; } .filters { width: 200px; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .filter-section { margin-bottom: 15px; } .filter-section h3 { margin-top: 0; margin-bottom: 10px; } .filter-options label { display: block; margin-bottom: 5px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .product-card { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .product-card img { width: 100%; height: 200px; object-fit: cover; display: block; } .product-info { padding: 15px; } .product-name { font-weight: bold; margin-bottom: 5px; } .product-price { color: green; font-weight: bold; } .footer { text-align: center; padding: 20px; background-color: #fff; box-shadow: 0 -2px 4px rgba(0,0,0,0.1); } const allProducts = [ { id: 1, name: "Monstera Deliciosa", scientificName: "Monstera deliciosa", price: 1200, image: "https://images.unsplash.com/photo-1637967886160-fd78dc3ce0e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1970&q=80", category: "Indoor", lightRequirement: "medium", waterRequirement: "medium", inStock: true, }, { id: 2, name: "Snake Plant", scientificName: "Sansevieria trifasciata", price: 850, image: "https://images.unsplash.com/photo-1599464214807-88d5e443e612?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80", category: "Indoor", lightRequirement: "low", waterRequirement: "low", inStock: true, }, { id: 3, name: "Fiddle Leaf Fig", scientificName: "Ficus lyrata", price: 1500, image: "https://images.unsplash.com/photo-1682914141639-a92bce6bed49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1975&q=80", category: "Indoor", lightRequirement: "high", waterRequirement: "medium", inStock: false, }, { id: 4, name: "Peace Lily", scientificName: "Spathiphyllum wallisii", price: 950, image: "https://images.unsplash.com/photo-1616066318397-fb1b15d0f88c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80", category: "Indoor", lightRequirement: "low", waterRequirement: "medium", inStock: true, }, { id: 5, name: "ZZ Plant", scientificName: "Zamioculcas zamiifolia", price: 780, image: "https://images.unsplash.com/photo-1632321941810-56b3aef1e1a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80", category: "Indoor", lightRequirement: "low", waterRequirement: "low", inStock: true, }, { id: 6, name: "Pothos", scientificName: "Epipremnum aureum", price: 650, image: "https://images.unsplash.com/photo-1639520775657-34b432c18cbc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Indoor", lightRequirement: "low", waterRequirement: "medium", inStock: true, }, { id: 7, name: "Calathea", scientificName: "Calathea spp", price: 1100, image: "https://images.unsplash.com/photo-1614850753383-e19285323346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Indoor", lightRequirement: "medium", waterRequirement: "high", inStock: true, }, { id: 8, name: "Spider Plant", scientificName: "Chlorophytum comosum", price: 700, image: "https://images.unsplash.com/photo-1603532874845-a2c8084f776a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Indoor", lightRequirement: "medium", waterRequirement: "medium", inStock: true, }, { id: 9, name: "Aloe Vera", scientificName: "Aloe barbadensis miller", price: 550, image: "https://images.unsplash.com/photo-1584480537629-4bbff13c4364?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Indoor", lightRequirement: "low", waterRequirement: "low", inStock: true, }, { id: 10, name: "Lavender", scientificName: "Lavandula angustifolia", price: 900, image: "https://images.unsplash.com/photo-1613545430358-c4152d748ad4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Outdoor", lightRequirement: "high", waterRequirement: "medium", inStock: true, }, { id: 11, name: "Rose Bush", scientificName: "Rosa spp", price: 1300, image: "https://images.unsplash.com/photo-1625951345184-d0435c408ff8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Outdoor", lightRequirement: "high", waterRequirement: "medium", inStock: true, }, { id: 12, name: "Succulent Mix", scientificName: "Various Succulents", price: 600, image: "https://images.unsplash.com/photo-1557338589-48965e3b9a34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", category: "Outdoor", lightRequirement: "high", waterRequirement: "low", inStock: true, } ]; const productGrid = document.querySelector('.product-grid'); function renderProducts(products) { productGrid.innerHTML = ''; products.forEach(product => { const productCard = document.createElement('div'); productCard.classList.add('product-card'); const img = document.createElement('img'); img.src = product.image; img.alt = product.name; const productInfo = document.createElement('div'); productInfo.classList.add('product-info'); const productName = document.createElement('h3'); productName.classList.add('product-name'); productName.textContent = product.name; const productPrice = document.createElement('p'); productPrice.classList.add('product-price'); productPrice.textContent = `$${(product.price / 100).toFixed(2)}`; productInfo.appendChild(productName); productInfo.appendChild(productPrice); productCard.appendChild(img); productCard.appendChild(productInfo); productGrid.appendChild(productCard); }); } renderProducts(allProducts);