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();