build app

2026-05-14 12:40:09 +02:00 · 2026-05-14 12:40:09 +02:00 · 4fe9cb9be4
commit 4fe9cb9be4
parent 42fcb8f645
8 changed files with 2305 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,97 @@
+# ToDo-App – Vue 3 + Vite
+
+Unterrichtsbeispiel für **Web Development** an der FHGR.  
+Eine einfache ToDo-Anwendung mit Vue 3, Vite und einer REST-API.
+
+## Projektstruktur
+
+```
+WebDev-VueJS-ToDo-Example/
+├── index.html          # HTML-Einstiegspunkt (enthält <div id="app">)
+├── vite.config.js      # Vite-Konfiguration (aktiviert Vue-Plugin)
+├── package.json        # Abhängigkeiten und npm-Skripte
+└── src/
+    ├── main.js         # Vue-App erstellen und mounten
+    ├── api.js          # API-Schicht: alle HTTP-Aufrufe (fetch)
+    └── App.vue         # Haupt-Komponente: State, Logik und Template
+```
+
+## Verwendete Technologien
+
+| Technologie | Zweck |
+|---|---|
+| **Vue 3** | Reaktives UI-Framework |
+| **Vite** | Build-Tool und Dev-Server |
+| **Fetch API** | HTTP-Anfragen (nativ im Browser, kein axios nötig) |
+| **CSS Custom Properties** | Design ohne externe Libraries |
+
+## Starten
+
+```bash
+npm install     # Abhängigkeiten installieren
+npm run dev     # Entwicklungsserver starten (http://localhost:5173)
+npm run build   # Produktionsbuild erstellen (→ dist/)
+npm run preview # Produktionsbuild lokal testen
+```
+
+## Lernziele / Vue-Konzepte
+
+### Reaktivität
+- `ref()` – reaktiver Einzelwert
+- `computed()` – abgeleiteter, gecachter Wert
+- `watch()` – Reaktion auf Änderungen einer Variable
+
+### Template-Syntax
+- `{{ }}` – Textinterpolation
+- `v-if` / `v-else` – bedingtes Rendern
+- `v-for` + `:key` – Listen rendern
+- `v-model` – Zwei-Wege-Datenbindung (Input ↔ Variable)
+- `:class` – dynamische CSS-Klassen
+- `@click`, `@submit.prevent` – Event-Handler
+
+### Lifecycle
+- `onMounted()` – Code nach dem ersten Rendern ausführen
+- `onUnmounted()` – Aufräumen (z.B. `setInterval` stoppen)
+
+### Architektur
+- Trennung von **API-Schicht** (`api.js`) und **UI-Logik** (`App.vue`)
+- Alle HTTP-Methoden: `GET`, `POST`, `PATCH`, `DELETE`
+- Auto-Synchronisation im 5-Sekunden-Takt mit Datenvergleich
+
+## Auto-Synchronisation (5 Sekunden)
+
+Die App lädt alle 5 Sekunden die aktuell sichtbaren ToDos neu und vergleicht sie
+mit der bereits gerenderten Liste.
+
+Verglichen werden pro ToDo:
+- `id` (neu/gelöscht)
+- `title`, `completed`, `userId` (geändert)
+
+Wenn Unterschiede erkannt werden, wird die Liste ersetzt und Vue aktualisiert
+das DOM automatisch.
+
+Wenn keine Unterschiede erkannt werden, bleibt der DOM unverändert.
+
+Im UI zeigt eine Statuszeile den letzten Synchronisationszeitpunkt und das
+Ergebnis des Vergleichs (neu/geändert/gelöscht oder keine Änderung).
+
+## API
+
+Basis-URL: `https://webdev.iten-web.ch/10003/api/`
+
+Die API verwendet REST-Pfad-Routing (Best Practice):
+
+```
+GET  /10003/api/todos           → alle ToDos
+GET  /10003/api/todos/1         → einzelnes ToDo
+POST /10003/api/todos           → neues ToDo erstellen
+PATCH /10003/api/todos/1        → Status aktualisieren
+DELETE /10003/api/todos/1       → ToDo löschen
+```
+
+Verfügbare Filter-Parameter:
+- `page`, `limit` – Pagination
+- `search` – Suche im Titel
+- `completed` – Filter: `true` / `false`
+- `sortBy` – Sortierfeld: `id`, `title`, `completed`
+- `sortDir` – Richtung: `ASC`, `DESC`
--- a/index.html
+++ b/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ToDo-App – VueJS Beispiel</title>
+  </head>
+  <body>
+    <!--
+      Der Einstiegspunkt der Vue-App.
+      Vue ersetzt dieses <div id="app"> mit dem gerenderten Inhalt
+      der Root-Komponente (App.vue).
+    -->
+    <div id="app"></div>
+
+    <!--
+      Das Skript wird als ES-Modul geladen (type="module").
+      Vite verarbeitet src/main.js und alle importierten Dateien.
+    -->
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,17 @@
+{
+  "name": "webdev-vuejs-todo-example",
+  "version": "1.0.0",
+  "description": "ToDo-App mit Vue 3 und Vite – Unterrichtsbeispiel FHGR",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,763 @@
+<script setup>
+/**
+ * App.vue – Haupt- und einzige Komponente der ToDo-App
+ *
+ * Vue 3 Composition API mit <script setup>
+ * ─────────────────────────────────────────
+ * <script setup> ist der moderne, kompakte Weg, Vue-Komponenten zu schreiben.
+ * Alles, was hier deklariert wird (ref, computed, Funktionen), ist direkt
+ * im Template verfügbar – ohne explizites "return {}".
+ *
+ * Verwendete Vue-Konzepte:
+ *   ref()       – reaktiver Einzelwert (Primitive oder Objekt)
+ *   computed()  – abgeleiteter Wert, wird bei Änderungen neu berechnet
+ *   onMounted() – Lifecycle-Hook: wird nach dem ersten Rendern aufgerufen
+ *   watch()     – Beobachtet eine reaktive Variable und reagiert auf Änderungen
+ */
+
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { fetchTodos, createTodo, patchTodo, deleteTodo } from './api.js'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// STATE – reaktive Zustandsvariablen
+// ref() erstellt ein reaktives Objekt mit einer .value-Eigenschaft.
+// Im Template wird .value automatisch ausgepackt (kein .value nötig).
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Liste der aktuell angezeigten ToDos (Array von Todo-Objekten)
+const todos = ref([])
+
+// Ladezustand – true während ein API-Aufruf läuft
+const loading = ref(false)
+
+// Fehlermeldung – null wenn kein Fehler, sonst Fehlertext als String
+const error = ref(null)
+
+// Pagination: aktuelle Seite und Einträge pro Seite
+const page = ref(1)
+const limit = ref(10)
+
+// Filter- und Suchoptionen
+const search = ref('')             // Suche im Titel
+const filterCompleted = ref('')    // '' = alle | 'true' = erledigt | 'false' = offen
+
+// Sortierung
+const sortBy = ref('id')           // Sortierfeld: 'id' | 'title' | 'completed'
+const sortDir = ref('ASC')         // Richtung: 'ASC' | 'DESC'
+
+// Formular für neues ToDo
+const newTitle = ref('')           // Eingabe: Titel des neuen ToDos
+const newUserId = ref(1)           // Eingabe: User-ID (1–10)
+const formError = ref(null)        // Fehlermeldung im Formular
+
+// Auto-Synchronisation (Polling)
+const syncIntervalMs = 5000
+const syncStatus = ref('Noch nicht synchronisiert')
+let pollTimerId = null
+let requestInFlight = false
+
+// ─────────────────────────────────────────────────────────────────────────────
+// COMPUTED – abgeleitete Werte
+// computed() berechnet einen Wert neu, sobald sich eine abhängige ref ändert.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Anzahl der erledigten ToDos auf der aktuellen Seite
+const completedCount = computed(
+  () => todos.value.filter(t => t.completed).length
+)
+
+// ─────────────────────────────────────────────────────────────────────────────
+// API-FUNKTIONEN
+// async/await macht asynchronen Code lesbar wie synchronen.
+// try/catch fängt Fehler ab (Netzwerkprobleme, HTTP-Fehler usw.).
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * loadTodos() – ToDos vom Server laden
+ * Baut die aktuellen Filter/Sortier/Paginierungsparameter zusammen
+ * und ruft die API auf.
+ */
+async function loadTodos() {
+  loading.value = true
+  error.value = null
+  try {
+    const nextTodos = await fetchTodos({
+      page: page.value,
+      limit: limit.value,
+      search: search.value,
+      completed: filterCompleted.value,
+      sortBy: sortBy.value,
+      sortDir: sortDir.value,
+    })
+    todos.value = nextTodos
+  } catch (err) {
+    error.value = err.message
+  } finally {
+    // finally wird immer ausgeführt (egal ob Erfolg oder Fehler)
+    loading.value = false
+  }
+}
+
+/**
+ * compareTodoLists() – zwei ToDo-Listen vergleichen
+ * Liefert die Anzahl neuer, geaenderter und geloeschter Elemente.
+ */
+function compareTodoLists(previous, next) {
+  const prevById = new Map(previous.map(todo => [todo.id, todo]))
+  const nextById = new Map(next.map(todo => [todo.id, todo]))
+
+  let added = 0
+  let changed = 0
+  let removed = 0
+
+  for (const [id, nextTodo] of nextById.entries()) {
+    const prevTodo = prevById.get(id)
+    if (!prevTodo) {
+      added++
+      continue
+    }
+
+    const titleChanged = prevTodo.title !== nextTodo.title
+    const completedChanged = prevTodo.completed !== nextTodo.completed
+    const userChanged = prevTodo.userId !== nextTodo.userId
+    if (titleChanged || completedChanged || userChanged) {
+      changed++
+    }
+  }
+
+  for (const id of prevById.keys()) {
+    if (!nextById.has(id)) {
+      removed++
+    }
+  }
+
+  return { added, changed, removed }
+}
+
+/**
+ * pollTodos() – alle 5 Sekunden laden und mit aktuellem DOM-Stand vergleichen
+ *
+ * Vue rendert die DOM-Aenderungen automatisch, sobald todos.value ersetzt wird.
+ * Der Vergleich hier entscheidet, ob sich im Datenmodell etwas geaendert hat.
+ */
+async function pollTodos() {
+  if (requestInFlight) return
+
+  requestInFlight = true
+  try {
+    const nextTodos = await fetchTodos({
+      page: page.value,
+      limit: limit.value,
+      search: search.value,
+      completed: filterCompleted.value,
+      sortBy: sortBy.value,
+      sortDir: sortDir.value,
+    })
+
+    const { added, changed, removed } = compareTodoLists(todos.value, nextTodos)
+
+    if (added || changed || removed) {
+      todos.value = nextTodos
+      syncStatus.value = `Synchronisiert (${new Date().toLocaleTimeString('de-CH')}) · Neu: ${added}, Geaendert: ${changed}, Geloescht: ${removed}`
+    } else {
+      syncStatus.value = `Synchronisiert (${new Date().toLocaleTimeString('de-CH')}) · Keine Aenderung`
+    }
+  } catch (err) {
+    syncStatus.value = `Synchronisation fehlgeschlagen (${new Date().toLocaleTimeString('de-CH')})`
+    error.value = err.message
+  } finally {
+    requestInFlight = false
+  }
+}
+
+function startPolling() {
+  stopPolling()
+  pollTimerId = window.setInterval(pollTodos, syncIntervalMs)
+}
+
+function stopPolling() {
+  if (pollTimerId) {
+    window.clearInterval(pollTimerId)
+    pollTimerId = null
+  }
+}
+
+/**
+ * addTodo() – Neues ToDo erstellen
+ * Sendet ein POST-Request und lädt danach die Liste neu.
+ */
+async function addTodo() {
+  formError.value = null
+
+  // Einfache Client-seitige Validierung vor dem API-Aufruf
+  if (!newTitle.value.trim()) {
+    formError.value = 'Bitte einen Titel eingeben.'
+    return
+  }
+
+  try {
+    await createTodo({
+      userId: newUserId.value,
+      title: newTitle.value.trim(),
+      completed: false,
+    })
+    // Eingabefelder zurücksetzen
+    newTitle.value = ''
+    // Liste neu laden, damit das neue ToDo erscheint
+    await loadTodos()
+  } catch (err) {
+    formError.value = err.message
+  }
+}
+
+/**
+ * toggleCompleted() – Erledigungsstatus eines ToDos umschalten
+ * Verwendet PATCH, um nur das Feld "completed" zu aktualisieren.
+ * Optimistisches Update: Die lokale Liste wird sofort aktualisiert,
+ * ohne auf die API-Antwort zu warten (bessere UX).
+ */
+async function toggleCompleted(todo) {
+  // Optimistisches Update: Wert lokal sofort ändern
+  todo.completed = !todo.completed
+  try {
+    await patchTodo(todo.id, { completed: todo.completed })
+  } catch (err) {
+    // Bei Fehler: Änderung rückgängig machen
+    todo.completed = !todo.completed
+    error.value = err.message
+  }
+}
+
+/**
+ * removeTodo() – ToDo löschen
+ * Sendet ein DELETE-Request; bei Erfolg wird das Todo aus der
+ * lokalen Liste entfernt (kein erneutes Laden nötig).
+ */
+async function removeTodo(id) {
+  try {
+    await deleteTodo(id)
+    // ToDo lokal aus dem Array entfernen
+    todos.value = todos.value.filter(t => t.id !== id)
+  } catch (err) {
+    error.value = err.message
+  }
+}
+
+/**
+ * applyFilter() – Setzt die Seite auf 1 und lädt neu
+ * Wird aufgerufen, wenn Filter/Suche/Sortierung geändert wird.
+ */
+function applyFilter() {
+  page.value = 1
+  loadTodos()
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LIFECYCLE & WATCHER
+// ─────────────────────────────────────────────────────────────────────────────
+
+// onMounted: Wird einmalig ausgeführt, nachdem die Komponente im DOM ist.
+// Hier starten wir den ersten API-Aufruf.
+onMounted(() => {
+  loadTodos()
+  startPolling()
+})
+
+// Aufraeumen beim Verlassen der Seite/Komponente
+onUnmounted(() => {
+  stopPolling()
+})
+
+// watch: Überwacht "page" und lädt neue Daten, sobald sich die Seite ändert.
+// Das ist nötig, weil die Pagination-Buttons nur page.value ändern.
+watch(page, () => {
+  loadTodos()
+})
+</script>
+
+<template>
+  <!--
+    Das Template definiert die HTML-Struktur der Komponente.
+
+    Vue-Direktiven im Einsatz:
+      v-if / v-else  – Bedingtes Rendern
+      v-for          – Liste rendern (immer :key angeben!)
+      v-model        – Zwei-Wege-Datenbindung (Input ↔ ref)
+      :class         – Dynamische CSS-Klassen (Kurzform von v-bind:class)
+      @click         – Event-Listener (Kurzform von v-on:click)
+      @submit.prevent – submit-Event abfangen und preventDefault() aufrufen
+  -->
+
+  <div class="app">
+
+    <!-- ── Kopfzeile ──────────────────────────────────────────────────────── -->
+    <header class="app-header">
+      <h1>📝 ToDo-App</h1>
+      <p class="subtitle">Vue 3 + Vite · REST-API Beispiel</p>
+    </header>
+
+    <main class="app-main">
+
+      <!-- ── Filterleiste ─────────────────────────────────────────────────── -->
+      <!--
+        v-model bindet das Input direkt an eine ref.
+        @keyup.enter und @change rufen applyFilter() auf,
+        damit bei Eingabe die Liste aktualisiert wird.
+      -->
+      <section class="filter-bar">
+        <input
+          v-model="search"
+          @keyup.enter="applyFilter"
+          type="text"
+          placeholder="Suche im Titel..."
+          class="input"
+        />
+
+        <select v-model="filterCompleted" @change="applyFilter" class="select">
+          <option value="">Alle</option>
+          <option value="false">Offen</option>
+          <option value="true">Erledigt</option>
+        </select>
+
+        <select v-model="sortBy" @change="applyFilter" class="select">
+          <option value="id">Sortierung: ID</option>
+          <option value="title">Sortierung: Titel</option>
+          <option value="completed">Sortierung: Status</option>
+        </select>
+
+        <select v-model="sortDir" @change="applyFilter" class="select">
+          <option value="ASC">↑ Aufsteigend</option>
+          <option value="DESC">↓ Absteigend</option>
+        </select>
+
+        <button @click="applyFilter" class="btn btn-secondary">Suchen</button>
+      </section>
+
+      <!-- ── Statuszeile ──────────────────────────────────────────────────── -->
+      <!--
+        computed-Werte werden wie normale Variablen im Template verwendet.
+        {{ }} ist die Interpolation (Textausgabe).
+      -->
+      <div class="status-bar" v-if="todos.length > 0">
+        {{ todos.length }} ToDos geladen · {{ completedCount }} erledigt
+      </div>
+
+      <div class="status-bar">{{ syncStatus }}</div>
+
+      <!-- ── Fehlermeldung ────────────────────────────────────────────────── -->
+      <!-- v-if rendert das Element nur, wenn error einen Wert hat (truthy) -->
+      <div v-if="error" class="alert alert-error">
+        ⚠️ {{ error }}
+        <button @click="error = null" class="btn-close">✕</button>
+      </div>
+
+      <!-- ── Ladeanzeige ──────────────────────────────────────────────────── -->
+      <div v-if="loading" class="loading">Laden...</div>
+
+      <!-- ── ToDo-Liste ────────────────────────────────────────────────────── -->
+      <!--
+        v-else-if und v-else funktionieren wie if/else, müssen aber
+        direkt nach einem v-if- bzw. v-else-if-Element stehen.
+      -->
+      <div v-else-if="todos.length === 0 && !loading" class="empty">
+        Keine ToDos gefunden.
+      </div>
+
+      <ul v-else class="todo-list">
+        <!--
+          v-for iteriert über das todos-Array.
+          :key ist zwingend erforderlich: Vue nutzt es, um DOM-Elemente
+          effizient zu aktualisieren (kein unnötiges Re-Rendern).
+
+          :class wendet eine CSS-Klasse bedingt an:
+            { 'todo-done': todo.completed }
+            → Klasse 'todo-done' wird gesetzt, wenn todo.completed true ist
+        -->
+        <li
+          v-for="todo in todos"
+          :key="todo.id"
+          :class="{ 'todo-done': todo.completed }"
+          class="todo-item"
+        >
+          <!-- Checkbox zum Umschalten des Erledigungsstatus -->
+          <input
+            type="checkbox"
+            :checked="todo.completed"
+            @change="toggleCompleted(todo)"
+            class="todo-checkbox"
+          />
+
+          <span class="todo-content">
+            <span class="todo-title">{{ todo.title }}</span>
+            <span class="todo-meta">ID: {{ todo.id }} · User: {{ todo.userId }}</span>
+          </span>
+
+          <!-- Löschen-Button: @click ruft removeTodo mit der todo.id auf -->
+          <button @click="removeTodo(todo.id)" class="btn btn-danger" title="Löschen">
+            ✕
+          </button>
+        </li>
+      </ul>
+
+      <!-- ── Pagination ────────────────────────────────────────────────────── -->
+      <!--
+        :disabled deaktiviert den Button (HTML-Attribut disabled setzen),
+        wenn die Bedingung true ist.
+      -->
+      <div class="pagination">
+        <button
+          @click="page--"
+          :disabled="page <= 1"
+          class="btn btn-secondary"
+        >
+          ← Zurück
+        </button>
+
+        <span class="page-info">Seite {{ page }}</span>
+
+        <button
+          @click="page++"
+          :disabled="todos.length < limit"
+          class="btn btn-secondary"
+        >
+          Weiter →
+        </button>
+
+        <!-- Einträge pro Seite ändern -->
+        <select v-model.number="limit" @change="applyFilter" class="select">
+          <option :value="5">5 pro Seite</option>
+          <option :value="10">10 pro Seite</option>
+          <option :value="20">20 pro Seite</option>
+        </select>
+      </div>
+
+      <!-- ── Neues ToDo erstellen ──────────────────────────────────────────── -->
+      <!--
+        @submit.prevent: Verhindert das Standard-Formularverhalten
+        (Seite neu laden) und ruft stattdessen addTodo() auf.
+      -->
+      <section class="add-form">
+        <h2>Neues ToDo hinzufügen</h2>
+        <form @submit.prevent="addTodo" class="form-row">
+          <input
+            v-model.number="newUserId"
+            type="number"
+            min="1"
+            max="10"
+            placeholder="User-ID"
+            class="input input-small"
+          />
+          <input
+            v-model="newTitle"
+            type="text"
+            placeholder="Titel des neuen ToDos..."
+            class="input"
+          />
+          <button type="submit" class="btn btn-primary">Hinzufügen</button>
+        </form>
+
+        <!-- Formular-Fehlermeldung -->
+        <p v-if="formError" class="alert alert-error">{{ formError }}</p>
+      </section>
+
+    </main>
+  </div>
+</template>
+
+<style>
+/**
+ * Globale CSS-Styles (kein "scoped", damit auch body/html erfasst werden)
+ *
+ * Designprinzipien:
+ *  - Kein externes CSS-Framework
+ *  - CSS Custom Properties (Variablen) für einfache Anpassbarkeit
+ *  - Schlichte, übersichtliche Gestaltung
+ */
+
+/* ── CSS-Variablen (Custom Properties) ─────────────────────────────────────
+   Definiert im :root-Selektor, damit sie global verfügbar sind.
+   Vorteil: Farben und Abstände zentral ändern.
+*/
+:root {
+  --color-bg: #f5f5f5;
+  --color-surface: #ffffff;
+  --color-primary: #4a90d9;
+  --color-primary-hover: #357abd;
+  --color-danger: #e05050;
+  --color-danger-hover: #c03030;
+  --color-secondary: #6c757d;
+  --color-border: #ddd;
+  --color-text: #333;
+  --color-text-muted: #888;
+  --color-done: #aaa;
+  --color-error-bg: #fdecea;
+  --color-error-border: #f5c6cb;
+  --radius: 6px;
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Reset & Basis ───────────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+/* ── App-Layout ──────────────────────────────────────────────────────────── */
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.app-header {
+  text-align: center;
+  padding: 2rem 1rem 1rem;
+}
+
+.app-header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+
+.app-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* ── Filterleiste ────────────────────────────────────────────────────────── */
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  background: var(--color-surface);
+  padding: 1rem;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+/* ── Formular-Elemente ───────────────────────────────────────────────────── */
+.input {
+  flex: 1;
+  min-width: 120px;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+}
+
+.input-small {
+  flex: 0 0 90px;
+}
+
+.select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  background: var(--color-surface);
+  cursor: pointer;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.btn-secondary {
+  background: #e9ecef;
+  color: var(--color-text);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #d4d9de;
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--color-danger);
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+}
+
+.btn-danger:hover {
+  background: var(--color-error-bg);
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--color-danger);
+  margin-left: 0.5rem;
+}
+
+/* ── Statuszeile ─────────────────────────────────────────────────────────── */
+.status-bar {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  padding: 0 0.25rem;
+}
+
+/* ── Alerts ──────────────────────────────────────────────────────────────── */
+.alert {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.alert-error {
+  background: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: #721c24;
+}
+
+/* ── Ladeanzeige / Leerstate ─────────────────────────────────────────────── */
+.loading,
+.empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* ── ToDo-Liste ──────────────────────────────────────────────────────────── */
+.todo-list {
+  list-style: none;
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.todo-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  transition: background 0.15s;
+}
+
+.todo-item:last-child {
+  border-bottom: none;
+}
+
+.todo-item:hover {
+  background: #fafafa;
+}
+
+/* Erledigte ToDos werden ausgegraut und durchgestrichen */
+.todo-done .todo-title {
+  text-decoration: line-through;
+  color: var(--color-done);
+}
+
+.todo-checkbox {
+  flex-shrink: 0;
+  width: 1.1rem;
+  height: 1.1rem;
+  cursor: pointer;
+  accent-color: var(--color-primary);
+}
+
+.todo-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.todo-title {
+  font-size: 0.95rem;
+  /* Langer Text wird abgeschnitten statt umzubrechen */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.todo-meta {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* ── Pagination ──────────────────────────────────────────────────────────── */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.page-info {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  min-width: 60px;
+  text-align: center;
+}
+
+/* ── Neues ToDo ──────────────────────────────────────────────────────────── */
+.add-form {
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.25rem;
+}
+
+.add-form h2 {
+  font-size: 1rem;
+  margin-bottom: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+</style>
--- a/src/api.js
+++ b/src/api.js
@ -0,0 +1,134 @@
+// src/api.js
+// API-Schicht: Alle Kommunikation mit dem Backend
+//
+// Diese Datei kapselt sämtliche HTTP-Aufrufe an die REST-API.
+// Durch diese Trennung bleibt der Rest der App unabhängig vom Backend.
+//
+// API-Basis: https://webdev.iten-web.ch/10003/api
+// Best-Practice-Routing mit REST-Pfaden:
+//   GET /10003/api/todos
+//   GET /10003/api/todos/1
+//
+// Datenmodell Todo:
+//   { id: number, userId: number, title: string, completed: boolean }
+
+// Basis-URL der API – an einem zentralen Ort definiert,
+// damit bei Änderungen nur diese eine Zeile angepasst werden muss.
+const API_BASE = 'https://webdev.iten-web.ch/10003/api'
+
+// ---------------------------------------------------------------------------
+// Hilfsfunktion: URL mit Pfad und optionalen Query-Parametern zusammensetzen
+// ---------------------------------------------------------------------------
+// Beispiel: buildUrl('/todos', { page: 1, limit: 10 })
+//   → 'https://webdev.iten-web.ch/10003/api/todos?page=1&limit=10'
+//
+// URLSearchParams wandelt ein Objekt automatisch in einen Query-String um
+// und kümmert sich dabei um das korrekte Encoding der Werte.
+function buildUrl(path, params = {}) {
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+  const url = new URL(`${API_BASE}${normalizedPath}`)
+  url.search = new URLSearchParams(params).toString()
+  return url.toString()
+}
+
+// ---------------------------------------------------------------------------
+// Hilfsfunktion: HTTP-Anfrage ausführen und Fehler einheitlich behandeln
+// ---------------------------------------------------------------------------
+// fetch() gibt ein Promise zurück. Mit async/await warten wir auf die Antwort.
+// response.ok ist true bei HTTP-Statuscodes 200–299.
+async function request(url, options = {}) {
+  const response = await fetch(url, options)
+
+  // Bei HTTP-Fehler (z.B. 404, 400): Fehlermeldung aus dem Response-Body lesen
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(errorData.message || `HTTP-Fehler: ${response.status}`)
+  }
+
+  // Status 204 (No Content) hat keinen Body → direkt null zurückgeben
+  if (response.status === 204) {
+    return null
+  }
+
+  // Antwort als JSON parsen und zurückgeben
+  return response.json()
+}
+
+// ---------------------------------------------------------------------------
+// GET /todos  – Liste von ToDos abrufen (mit Filter, Sortierung, Pagination)
+// ---------------------------------------------------------------------------
+// Parameter (alle optional):
+//   page      – Seitennummer (Standard: 1)
+//   limit     – Einträge pro Seite (Standard: 5, Max: 100)
+//   search    – Suche im Titel
+//   completed – Filter: 'true' | 'false'
+//   sortBy    – Sortierfeld: 'id' | 'userId' | 'title' | 'completed'
+//   sortDir   – Richtung: 'ASC' | 'DESC'
+export async function fetchTodos(params = {}) {
+  // Leere Strings aus den Parametern entfernen, damit sie nicht als
+  // leere Query-Parameter mitgesendet werden (z.B. &search=)
+  const cleanParams = Object.fromEntries(
+    Object.entries(params).filter(([, v]) => v !== '' && v !== null && v !== undefined)
+  )
+  const url = buildUrl('/todos', cleanParams)
+  return request(url)
+}
+
+// ---------------------------------------------------------------------------
+// GET /todos/:id  – Ein einzelnes ToDo per ID abrufen
+// ---------------------------------------------------------------------------
+export async function fetchTodo(id) {
+  const url = buildUrl(`/todos/${id}`)
+  return request(url)
+}
+
+// ---------------------------------------------------------------------------
+// POST /todos  – Neues ToDo erstellen
+// ---------------------------------------------------------------------------
+// body: { userId: number, title: string, completed?: boolean }
+// Gibt das neu erstellte ToDo mit server-seitig vergebener ID zurück.
+export async function createTodo(body) {
+  const url = buildUrl('/todos')
+  return request(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+// ---------------------------------------------------------------------------
+// PATCH /todos/:id  – ToDo teilweise aktualisieren
+// ---------------------------------------------------------------------------
+// Im Unterschied zu PUT werden nur die übergebenen Felder aktualisiert.
+// Hier verwenden wir es, um den completed-Status umzuschalten.
+// body: Teilobjekt, z.B. { completed: true }
+export async function patchTodo(id, body) {
+  const url = buildUrl(`/todos/${id}`)
+  return request(url, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+// ---------------------------------------------------------------------------
+// PUT /todos/:id  – ToDo vollständig ersetzen
+// ---------------------------------------------------------------------------
+// Alle Felder (userId, title, completed) müssen mitgesendet werden.
+export async function updateTodo(id, body) {
+  const url = buildUrl(`/todos/${id}`)
+  return request(url, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+// ---------------------------------------------------------------------------
+// DELETE /todos/:id  – ToDo löschen
+// ---------------------------------------------------------------------------
+// Die API antwortet mit Status 204 (No Content) → kein Rückgabewert
+export async function deleteTodo(id) {
+  const url = buildUrl(`/todos/${id}`)
+  return request(url, { method: 'DELETE' })
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,11 @@
+// src/main.js
+// Einstiegspunkt der Vue-Anwendung
+//
+// Hier wird die Vue-App erstellt und in den DOM eingehängt.
+// createApp() erzeugt eine neue Vue-Anwendungsinstanz.
+// mount('#app') verbindet sie mit dem <div id="app"> in index.html.
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,15 @@
+// vite.config.js
+// Konfiguration des Vite Build-Tools
+//
+// Vite ist ein modernes Build-Tool, das:
+//  - einen schnellen Entwicklungsserver bereitstellt (Hot Module Replacement)
+//  - Vue Single-File-Components (.vue) verarbeitet
+//  - die App für die Produktion bündelt und optimiert
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  // Das Vue-Plugin aktiviert die Verarbeitung von .vue-Dateien
+  plugins: [vue()],
+})