From d0d62478ac0fbbaf28e0ca03c410b1a762f318d9 Mon Sep 17 00:00:00 2001 From: PBT3H24ASC Date: Wed, 3 Dec 2025 12:05:37 +0100 Subject: [PATCH] js --- script.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/script.js b/script.js index e69de29..80f5aa8 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,58 @@ +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 } +]; + + +const productList = document.getElementById("productList"); +const textFilter = document.getElementById("textFilter"); +const priceFilter = document.getElementById("priceFilter"); + + +function formatPrice(p) { +return p.toLocaleString('de-DE') + ' €'; +} + + +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