07_js-debug/uebungen/u15_product-sales-table/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
+    <title>Product Sales Table</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <div class="container py-5">
+      <div class="alert alert-primary" role="alert">
+        <h2>Übung 15: Produkt-Verkaufstabelle</h2>
+
+        <p>
+          Es handelt sich um eine einfache React-App, die eine Liste der Produktverkäufe in einer Tabelle anzeigt, die
+          von einer API aufgerufen wird. Um die Übung zu vereinfachen, verwenden wir im Projekt lokale Daten, die aber
+          eine externe API anregen.
+        </p>
+
+        <p>
+          Du wirst jedoch feststellen, dass beim Starten der App sofort eine leere Seite mit Fehlern in der Konsole
+          angezeigt wird. Du kannst die Fehler überprüfen, indem du die Konsole öffnest. Die Aufgabe lautet wie folgt:
+        </p>
+
+        <ol class="list">
+          <li>
+            Untersuche die Fehler und debugge die Anwendung nur mit dem VSCode-Debugger. Das heißt, du darfst vorher
+            keine Dateien bearbeiten. Verwende das Variablenfeld im Debugger, um die Variablen zu bearbeiten.
+          </li>
+
+          <li>
+            Nachdem du die Anwendung erfolgreich debuggt hast, behebe den Fehler, indem du die Funktion fetchSalesData
+            änderst. Ändere nicht die Datendatei selbst. Das ist eine gute Übung, wenn du eine API aufrufst, die
+            manchmal fehlerhafte Daten zurückgibt.
+          </li>
+        </ol>
+      </div>
+    </div>
+
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>