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

Compare commits

base: PBT3H24AKA:406ab9c26fc5da0dd69506428172aea8cf03cc1a
Branches Tags
PBT3H24AKA:main
...
compare: PBT3H24AKA:main
Branches Tags
PBT3H24AKA:main

3 Commits
406ab9c26f ... main

Author SHA1 Message Date
Aminekan
02ce68aa30 verion ende 2025-12-03 12:40:07 +01:00
Ben schmidt
6f53e6009d Merge branch 'main' of https://git.bib.de/PBT3H24AKA/Projektwebshop 2025-12-03 12:30:30 +01:00
Ben schmidt
023bc16684 Jan 2025-12-03 12:30:26 +01:00
3 changed files with 153 additions and 1 deletions
Expand all files Collapse all files

4
index.html
View File

@@ -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>

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

90
style.css
View File

@@ -0,0 +1,90 @@
body {
font-family: Arial, sans-serif;
background:lightgreen;
color: #00304d;
padding: 20px;
}
/* Haupttitel */
h1 {
color: #005f73;
text-align: left;
margin-bottom: 20px;
}
/* Filterformular */
form#filters {
background: #e0f4e6;
border: 2px solid #74c69d;
padding: 15px;
border-radius: 10px;
margin-bottom: 25px;
}
form#filters label {
display: inline-block;
margin-right: 18px;
margin-bottom: 10px;
color: #003c2f;
font-weight: bold;
}
form#filters input[type="text"],
form#filters input[type="number"],
form#filters select {
padding: 6px;
border: 1px solid #74c69d;
border-radius: 6px;
background: #ffffff;
color: #00304d;
}
form#filters input[type="submit"] {
padding: 8px 16px;
background: #0084ff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
form#filters input[type="submit"]:hover {
background: #006fd6;
}
/* Tabellenbereich */
section h2 {
color: #005f73;
margin-bottom: 10px;
}
/* Tabelle */
table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
}
table th {
background: #0084ff;
color: white;
padding: 10px;
font-size: 15px;
}
table td {
background: #e8fff1;
padding: 8px;
border: 1px solid #74c69d;
}
table tr:nth-child(even) td {
background: #dff9ff;
}
/* Hover-Effekt */
table tr:hover td {
background: #b8f2da;
transition: 0.2s;
}