57 lines
1.9 KiB
HTML
57 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="container py-5">
|
|
<h1></h1>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
'use strict';
|
|
const products = [
|
|
'Game of Thrones Wax Seal Coasters',
|
|
'Electronic Butterfly in a Jar',
|
|
'Aquafarm: Aquaponics Fish Garden',
|
|
'Cassette Adapter Bluetooth',
|
|
'Marvel Comics Lightweight Infinity Scarf',
|
|
'Ollie - The App Controlled Robot',
|
|
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
|
'PowerCube',
|
|
'Backpack of Holding',
|
|
'Retro Duo Portable NES/SNES Game System',
|
|
'Universal Gadget Wrist Charger',
|
|
'USB Squirming Tentacle',
|
|
'USB Fishquarium',
|
|
'Space Bar Keyboard Organizer & USB Hub Pop',
|
|
'USB Pet Rock',
|
|
'Powerstation 5- E. Maximus Chargus',
|
|
'Dual Heated Travel Mug',
|
|
'Crosley Collegiate Portable USB Turntable',
|
|
'Meh Hoodie',
|
|
'Magnetic Accelerator Cannon',
|
|
];
|
|
|
|
outputEl.innerHTML = ''; // output Element leeren
|
|
|
|
letters.forEach((letter) => {
|
|
// Guard
|
|
if (getItemsByLetter(letter, products).length === 0) return;
|
|
|
|
console.log(`======= ${letter} ========`);
|
|
console.log(getItemsByLetter(letter, products).join('\n'));
|
|
console.log('==========================');
|
|
|
|
outputEl.innerHTML += `<h3 class="text-center">${letter}</h3>`;
|
|
outputEl.innerHTML += `<ul class="list-group"><li class="list-group-item">${getItemsByLetter(letter, products).join('</li><li class="list-group-item">')}</li></ul>`;
|
|
outputEl.innerHTML += '<hr />';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|