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

Compare commits

base: PBT3H24AEH:678bf8d3669658f55897ccd0a2f4b7136555c8d8
Branches Tags
PBT3H24AEH:main
...
compare: PBT3H24AEH:main
Branches Tags
PBT3H24AEH:main

6 Commits
678bf8d366 ... 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
PBT3H24ASC
f1464e7c1d Merge branch 'main' of https://git.bib.de/PBT3H24AEH/CSWProj 2025-12-03 12:06:18 +01:00
PBT3H24ASC
d0d62478ac js 2025-12-03 12:05:37 +01:00
4 changed files with 92 additions and 1 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>

35
script.js
View File

@@ -0,0 +1,35 @@
const products = [
{ 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");
function showProducts() {
const t = text.value.toLowerCase();
const p = Number(price.value);
list.innerHTML = "";
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);
showProducts();