js

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 = `<strong>${p.name}</strong><br>Preis: ${formatPrice(p.price)}`;
+productList.appendChild(div);
+});
+}
+
+
+textFilter.addEventListener("input", renderProducts);
+priceFilter.addEventListener("input", renderProducts);
+
+
+
+renderProducts();