01_grundlagen/index.html

@@ -0,0 +1,56 @@
+<!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>