diff --git a/index.html b/index.html
index 8824627..5cd4588 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,8 @@
- Interaktive Produktliste (nur HTML)
+ Interaktive Produktliste
+
Produktliste
@@ -108,5 +109,6 @@
+
diff --git a/script.js b/script.js
index e69de29..dc7455f 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const form = document.getElementById("filters");
+ const table = document.querySelector("table tbody");
+ const rows = Array.from(table.querySelectorAll("tr"));
+
+ form.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+
+ const search = form.search.value.toLowerCase();
+ const category = form.category.value;
+ const minPrice = parseFloat(form.minPrice.value);
+ const maxPrice = parseFloat(form.maxPrice.value);
+ const sort = form.sort.value;
+
+
+ let filteredRows = rows.filter(row => {
+ const cells = row.querySelectorAll("td");
+ const name = cells[1].textContent.toLowerCase();
+ const cat = cells[3].textContent;
+ const price = parseFloat(cells[4].textContent);
+
+ let matchesSearch = !search || name.includes(search);
+ let matchesCategory = category === "all" || cat === category;
+ let matchesMinPrice = isNaN(minPrice) || price >= minPrice;
+ let matchesMaxPrice = isNaN(maxPrice) || price <= maxPrice;
+
+ return matchesSearch && matchesCategory && matchesMinPrice && matchesMaxPrice;
+ });
+
+
+ filteredRows.sort((a, b) => {
+ const aCells = a.querySelectorAll("td");
+ const bCells = b.querySelectorAll("td");
+
+ switch(sort) {
+ case "price-asc":
+ return parseFloat(aCells[4].textContent) - parseFloat(bCells[4].textContent);
+ case "price-desc":
+ return parseFloat(bCells[4].textContent) - parseFloat(aCells[4].textContent);
+ case "name-asc":
+ return aCells[1].textContent.localeCompare(bCells[1].textContent);
+ case "name-desc":
+ return bCells[1].textContent.localeCompare(aCells[1].textContent);
+ default:
+ return 0;
+ }
+ });
+
+
+ table.innerHTML = "";
+ if(filteredRows.length === 0) {
+ const tr = document.createElement("tr");
+ tr.innerHTML = `Keine Produkte gefunden. | `;
+ table.appendChild(tr);
+ } else {
+ filteredRows.forEach(row => table.appendChild(row));
+ }
+ });
+});
diff --git a/style.css b/style.css
index fcbedd2..f922d0a 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
body {
font-family: Arial, sans-serif;
- background: #f0f9ff;
+ background:lightgreen;
color: #00304d;
padding: 20px;
}