PBT3H24AKA/Projektwebshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

verion ende

Browse Source
This commit is contained in:
Aminekan
2025-12-03 12:40:07 +01:00
parent 6f53e6009d
commit 02ce68aa30
3 changed files with 64 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -2,7 +2,8 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Interaktive Produktliste (nur HTML)</title> <title>Interaktive Produktliste</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<h1>Produktliste</h1> <h1>Produktliste</h1>
@@ -108,5 +109,6 @@
</tbody> </tbody>
</table> </table>
</section> </section>
<script src="script.js"></script>
</body> </body>
</html> </html>

60
script.js
View File

@@ -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));
}
});
});

2
style.css
View File

@@ -1,6 +1,6 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background: #f0f9ff; background:lightgreen;
color: #00304d; color: #00304d;
padding: 20px; padding: 20px;
} }