js

script.js

@@ -1,58 +1,35 @@
 const products = [
-{ id: 1, name: "Laptop Pro 15", price: 1499 },
+  { name: "Laptop Pro 15", price: 1499 },
-{ id: 2, name: "Kabellose Maus X2", price: 49 },
+  { name: "Kabellose Maus X2", price: 49 },
-{ id: 3, name: "Gaming Tastatur RGB", price: 89 },
+  { name: "Gaming Tastatur RGB", price: 89 },
-{ id: 4, name: "4K Monitor UltraSharp", price: 399 },
+  { name: "4K Monitor UltraSharp", price: 399 },
-{ id: 5, name: "USB-C Dockingstation", price: 129 }
+  { 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");
+function showProducts() {
-const textFilter = document.getElementById("textFilter");
+  const t = text.value.toLowerCase();
-const priceFilter = document.getElementById("priceFilter");
+  const p = Number(price.value);
 
+  list.innerHTML = "";
 
-function formatPrice(p) {
+  products
-return p.toLocaleString('de-DE') + ' €';
+    .filter(item =>
+      item.name.toLowerCase().includes(t) &&
+      (!p || item.price <= p)
+    )
+    .forEach(item => {
+      list.innerHTML += `<div class="product">
+        <strong>${item.name}</strong><br>
+        Preis: ${item.price} €
+      </div>`;
+    });
 }
 
+text.addEventListener("input", showProducts);
+price.addEventListener("input", showProducts);
 
-function renderProducts() {
+showProducts();
-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 = `<strong>${p.name}</strong><br>Preis: ${formatPrice(p.price)}`;
-productList.appendChild(div);
-});
-}
-
-
-textFilter.addEventListener("input", renderProducts);
-priceFilter.addEventListener("input", renderProducts);
-
-
-
-renderProducts();