115 lines
3.0 KiB
HTML
115 lines
3.0 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Interaktive Produktliste</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<h1>Produktliste</h1>
|
||
|
||
<form id="filters" method="get" action="#">
|
||
<label>
|
||
Suche:
|
||
<input type="text" name="search" />
|
||
</label>
|
||
<label>
|
||
Kategorie:
|
||
<select name="category">
|
||
<option value="all">Alle Kategorien</option>
|
||
<option value="Haushalt">Haushalt</option>
|
||
<option value="Outdoor">Outdoor</option>
|
||
<option value="Elektronik">Elektronik</option>
|
||
<option value="Schule & Büro">Schule & Büro</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Minimalpreis (€):
|
||
<input type="number" name="minPrice" step="0.01" min="0" />
|
||
</label>
|
||
<label>
|
||
Maximalpreis (€):
|
||
<input type="number" name="maxPrice" step="0.01" min="0" />
|
||
</label>
|
||
<label>
|
||
Sortierung:
|
||
<select name="sort">
|
||
<option value="default">Standard</option>
|
||
<option value="price-asc">Preis: aufsteigend</option>
|
||
<option value="price-desc">Preis: absteigend</option>
|
||
<option value="name-asc">Name A–Z</option>
|
||
<option value="name-desc">Name Z–A</option>
|
||
</select>
|
||
</label>
|
||
<input type="submit" value="Anwenden" />
|
||
</form>
|
||
|
||
<section>
|
||
<h2>Produkte</h2>
|
||
<table border="1" cellpadding="6" cellspacing="0">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Name</th>
|
||
<th>Beschreibung</th>
|
||
<th>Kategorie</th>
|
||
<th>Preis (€)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Kaffeetasse Classic</td>
|
||
<td>Keramik-Tasse, 300ml, spülmaschinenfest</td>
|
||
<td>Haushalt</td>
|
||
<td>7.50</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Thermo-Flasche 1L</td>
|
||
<td>Edelstahl, hält 24h warm oder kalt</td>
|
||
<td>Outdoor</td>
|
||
<td>24.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Bluetooth Lautsprecher Mini</td>
|
||
<td>Kompakt, 10h Akkulaufzeit, wasserfest</td>
|
||
<td>Elektronik</td>
|
||
<td>39.90</td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td>Notizbuch A5</td>
|
||
<td>80 Blatt, Punktraster, nachhaltiges Papier</td>
|
||
<td>Schule & Büro</td>
|
||
<td>5.20</td>
|
||
</tr>
|
||
<tr>
|
||
<td>5</td>
|
||
<td>Tischlampe LED</td>
|
||
<td>Dimmbar, USB-C Ladeanschluss</td>
|
||
<td>Haushalt</td>
|
||
<td>29.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>6</td>
|
||
<td>Wanderrucksack 20L</td>
|
||
<td>Leicht, atmungsaktiv, mit Regenhülle</td>
|
||
<td>Outdoor</td>
|
||
<td>49.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>7</td>
|
||
<td>Kopfhörer Over-Ear</td>
|
||
<td>Noise-Cancelling, faltbar</td>
|
||
<td>Elektronik</td>
|
||
<td>89.50</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|