57 lines
2.6 KiB
HTML
57 lines
2.6 KiB
HTML
<!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>
|