2026-11-03 14:52:15 +01:00
parent ed2c0b9906
commit f475f40350
104 changed files with 12459 additions and 4509 deletions
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/LexiFind.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LexiFind - Your Personal Dictionary</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <div class="container py-5">
+      <div class="alert alert-primary" role="alert">
+        <h2>Übung 16: LexiFind Favorite Words</h2>
+
+        <p>
+          In dieser Übung musst du ein brandneues LexiFind mit einer neuen Funktion reparieren. Du kannst jetzt deine
+          Lieblingswörter direkt auf der Startseite speichern und alle deine Lieblingswörter auf einer separaten Seite
+          finden. Das ist richtig, LexiFind kommt jetzt mit Routing.
+        </p>
+        <p>
+          Wenn du auf das Herzsymbol auf der Startseite klickst, wird es zu deinen Favoriten hinzugefügt. Das leere
+          Herzsymbol wird ebenfalls ausgefüllt. Eine neue Seite namens Favoriten (/favorites) listet jetzt alle unsere
+          Lieblingswörter auf. Wenn du auf das Wort klickst, gelangst du zur Startseite mit dem Wort, das du angeklickt
+          hast.
+        </p>
+        <p>
+          Die App ist außerdem intelligent genug, um zu wissen, welche Lieblingswörter du ausgewählt hast. Alle
+          Lieblingswörter haben ein ausgefülltes Herzsymbol auf der Startseite und auf der Favoritenseite. Wenn du auf
+          ein gefülltes Herz klickst, wird es aus der Favoritenliste entfernt und das Herzsymbol wird leer.
+        </p>
+
+        <p>Aber aus irgendeinem Grund funktioniert der Code nicht so, wie er sollte...</p>
+        <ol class="list">
+          <li>
+            Wenn wir auf das Herzsymbol für ein Wort klicken, ist das Herz gefüllt. Aber wenn wir die Seite
+            aktualisieren, ist das Herz wieder leer. Es sollte ausgefüllt sein.
+          </li>
+
+          <li>
+            Das gleiche Verhalten können wir beobachten, wenn wir ein Wort mit einem Herz versehen und dann zur Seite
+            Favoriten gehen. Manchmal ist das Herz ausgefüllt, manchmal ist es leer. Sie sollten auf jeder Seite
+            ausgefüllt sein.
+          </li>
+          <l>
+            Wenn du auf das Wort in den Favoritenseiten klickst, z.B. "blue", kommst du auf die Startseite und es wird
+            "Course" statt "blue" angezeigt. Es sollte das richtige Wort angezeigt werden.
+          </l>
+        </ol>
+      </div>
+    </div>
+
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>