verion ende

2025-12-03 12:40:07 +01:00
parent 6f53e6009d
commit 02ce68aa30
3 changed files with 64 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,8 @@
 <html lang="de">
 <head>
  <meta charset="utf-8">
-  <title>Interaktive Produktliste (nur HTML)</title>
+  <title>Interaktive Produktliste</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Produktliste</h1>
@@ -108,5 +109,6 @@
      </tbody>
    </table>
  </section>
+  <script src="script.js"></script>
 </body>
 </html>
--- 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 = `<td colspan="5" style="text-align:center;">Keine Produkte gefunden.</td>`;
+            table.appendChild(tr);
+        } else {
+            filteredRows.forEach(row => table.appendChild(row));
+        }
+    });
+});
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 body {
  font-family: Arial, sans-serif;
-  background: #f0f9ff;              
+  background:lightgreen;              
  color: #00304d;                   
  padding: 20px;
 }