58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
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(); |