Compare commits
4 Commits
f1464e7c1d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 49c61887cd | |||
| 57bbaf35d0 | |||
|
7c8be109be | ||
| 5c0548d972 |
33
ReadMe.md
Normal file
33
ReadMe.md
Normal 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
23
Style.css
@@ -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;
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Interaktive Produktliste</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="Style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Interaktive Produktliste</h1>
|
||||
|
||||
75
script.js
75
script.js
@@ -1,58 +1,35 @@
|
||||
const products = [
|
||||
{ id: 1, name: "Laptop Pro 15", price: 1499 },
|
||||
{ id: 2, name: "Kabellose Maus X2", price: 49 },
|
||||
{ id: 3, name: "Gaming Tastatur RGB", price: 89 },
|
||||
{ id: 4, name: "4K Monitor UltraSharp", price: 399 },
|
||||
{ id: 5, name: "USB-C Dockingstation", price: 129 }
|
||||
{ name: "Laptop Pro 15", price: 1499 },
|
||||
{ name: "Kabellose Maus X2", price: 49 },
|
||||
{ name: "Gaming Tastatur RGB", price: 89 },
|
||||
{ name: "4K Monitor UltraSharp", price: 399 },
|
||||
{ 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");
|
||||
const textFilter = document.getElementById("textFilter");
|
||||
const priceFilter = document.getElementById("priceFilter");
|
||||
function showProducts() {
|
||||
const t = text.value.toLowerCase();
|
||||
const p = Number(price.value);
|
||||
|
||||
list.innerHTML = "";
|
||||
|
||||
function formatPrice(p) {
|
||||
return p.toLocaleString('de-DE') + ' €';
|
||||
products
|
||||
.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() {
|
||||
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();
|
||||
showProducts();
|
||||
|
||||
Reference in New Issue
Block a user