PBT3H24AEH/CSWProj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: PBT3H24AEH:f1464e7c1d5c0aaeb03650b8dcf14114c3d8ee73
Branches Tags
PBT3H24AEH:main
...
compare: PBT3H24AEH:main
Branches Tags
PBT3H24AEH:main

4 Commits
f1464e7c1d ... main

Author SHA1 Message Date
PBT3H24ASC
49c61887cd js 2025-12-03 12:21:29 +01:00
Younes El Haddoury
57bbaf35d0 ReadMe.md hinzugefügt 2025-12-03 12:19:10 +01:00
younes elhaddoury
7c8be109be last commit 2025-12-03 12:12:51 +01:00
PBT3H24AFA
5c0548d972 Css 2025-12-03 12:10:47 +01:00
4 changed files with 83 additions and 50 deletions
Expand all files Collapse all files

33
ReadMe.md Normal file
View File

@@ -0,0 +1,33 @@
# 📦 Interaktive Produktliste
*Ein Webprojekt entwickelt von **Daniel** und **Nik***
## 📌 Überblick
Dieses Projekt ist eine einfache interaktive Produktliste, bei der Nutzer Produkte
über eine **Textsuche** und einen **Preisfilter** in Echtzeit filtern können.
---
## 🚀 Funktionen
### 🔍 Textsuche
- Live-Suche nach Produktnamen
- Groß-/Kleinschreibung wird ignoriert
### 💶 Preisfilter
- Filterung nach maximalem Preis
- Produkte, die teurer sind, werden ausgeblendet
### 🖥️ Dynamische Darstellung
- Produkte werden komplett per JavaScript gerendert
- Meldung „Keine Produkte gefunden“, wenn kein Ergebnis passt
---
## 🧩 Technologien
- **HTML5**
- **CSS3**
- **JavaScript (Vanilla JS)**
---
## 📁 Projektstruktur

23
Style.css
View File

@@ -0,0 +1,23 @@
body {
font-family: Arial, sans-serif;
margin: 20px;
background: #f7f7f7;
}
.filter-box {
margin-bottom: 20px;
background: #fff;
padding: 12px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.product {
border: 1px solid #e1e1e1;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background: #fff;
}

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interaktive Produktliste</title> <title>Interaktive Produktliste</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="Style.css">
</head> </head>
<body> <body>
<h1>Interaktive Produktliste</h1> <h1>Interaktive Produktliste</h1>

75
script.js
View File

@@ -1,58 +1,35 @@
const products = [ const products = [
{ id: 1, name: "Laptop Pro 15", price: 1499 }, { name: "Laptop Pro 15", price: 1499 },
{ id: 2, name: "Kabellose Maus X2", price: 49 }, { name: "Kabellose Maus X2", price: 49 },
{ id: 3, name: "Gaming Tastatur RGB", price: 89 }, { name: "Gaming Tastatur RGB", price: 89 },
{ id: 4, name: "4K Monitor UltraSharp", price: 399 }, { name: "4K Monitor UltraSharp", price: 399 },
{ id: 5, name: "USB-C Dockingstation", price: 129 } { name: "USB-C Dockingstation", price: 129 }
]; ];
const list = document.getElementById("productList");
const text = document.getElementById("textFilter");
const price = document.getElementById("priceFilter");
const productList = document.getElementById("productList"); function showProducts() {
const textFilter = document.getElementById("textFilter"); const t = text.value.toLowerCase();
const priceFilter = document.getElementById("priceFilter"); const p = Number(price.value);
list.innerHTML = "";
function formatPrice(p) { products
return p.toLocaleString('de-DE') + ' €'; .filter(item =>
item.name.toLowerCase().includes(t) &&
(!p || item.price <= p)
)
.forEach(item => {
list.innerHTML += `<div class="product">
<strong>${item.name}</strong><br>
Preis: ${item.price} €
</div>`;
});
} }
text.addEventListener("input", showProducts);
price.addEventListener("input", showProducts);
function renderProducts() { showProducts();
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();