From 49c61887cda64a59d0fc1c12f4cb3287060e9d96 Mon Sep 17 00:00:00 2001 From: PBT3H24ASC Date: Wed, 3 Dec 2025 12:21:29 +0100 Subject: [PATCH] js --- script.js | 75 +++++++++++++++++++------------------------------------ 1 file changed, 26 insertions(+), 49 deletions(-) diff --git a/script.js b/script.js index 80f5aa8..4ef2cf5 100644 --- a/script.js +++ b/script.js @@ -1,58 +1,35 @@ const products = [ -{ id: 1, name: "Laptop Pro 15", price: 1499 }, -{ id: 2, name: "Kabellose Maus X2", price: 49 }, -{ id: 3, name: "Gaming Tastatur RGB", price: 89 }, -{ id: 4, name: "4K Monitor UltraSharp", price: 399 }, -{ id: 5, name: "USB-C Dockingstation", price: 129 } + { name: "Laptop Pro 15", price: 1499 }, + { name: "Kabellose Maus X2", price: 49 }, + { name: "Gaming Tastatur RGB", price: 89 }, + { name: "4K Monitor UltraSharp", price: 399 }, + { name: "USB-C Dockingstation", price: 129 } ]; +const list = document.getElementById("productList"); +const text = document.getElementById("textFilter"); +const price = document.getElementById("priceFilter"); -const productList = document.getElementById("productList"); -const textFilter = document.getElementById("textFilter"); -const priceFilter = document.getElementById("priceFilter"); +function showProducts() { + const t = text.value.toLowerCase(); + const p = Number(price.value); + list.innerHTML = ""; -function formatPrice(p) { -return p.toLocaleString('de-DE') + ' €'; + products + .filter(item => + item.name.toLowerCase().includes(t) && + (!p || item.price <= p) + ) + .forEach(item => { + list.innerHTML += `
+ ${item.name}
+ Preis: ${item.price} € +
`; + }); } +text.addEventListener("input", showProducts); +price.addEventListener("input", showProducts); -function renderProducts() { -const searchText = textFilter.value.toLowerCase(); -const maxPrice = Number(priceFilter.value); - - -productList.innerHTML = ""; - - -const filtered = products.filter(p => { -const matchesText = p.name.toLowerCase().includes(searchText); -const matchesPrice = !priceFilter.value || p.price <= maxPrice; -return matchesText && matchesPrice; -}); - - -if (filtered.length === 0) { -const no = document.createElement('div'); -no.className = 'product'; -no.textContent = 'Keine Produkte gefunden.'; -productList.appendChild(no); -return; -} - - -filtered.forEach(p => { -const div = document.createElement("div"); -div.className = "product"; -div.innerHTML = `${p.name}
Preis: ${formatPrice(p.price)}`; -productList.appendChild(div); -}); -} - - -textFilter.addEventListener("input", renderProducts); -priceFilter.addEventListener("input", renderProducts); - - - -renderProducts(); \ No newline at end of file +showProducts();