add js demos for chapter 3: manipulate, classlist, create, events, preventdefault, todo, fetch, localstorage

2026-04-20 13:14:56 +02:00
parent 754ff9436c
commit 7626852ac1
25 changed files with 664 additions and 0 deletions
--- a/slides/223015c/assets/demos/js-todo.html
+++ b/slides/223015c/assets/demos/js-todo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Todo-Liste</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    h2 { margin: 0 0 1rem; }
+    form { display: flex; gap: 8px; margin-bottom: 1rem; }
+    input {
+      flex: 1;
+      font: inherit;
+      padding: 8px 12px;
+      border: 1px solid #9ca3af;
+      border-radius: 4px;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border-radius: 4px;
+      border: 1px solid #1e40af;
+      background: #1e40af;
+      color: #fff;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    ul { list-style: none; padding: 0; margin: 0; }
+    li {
+      padding: 10px 14px;
+      background: #f3f4f6;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+      margin-bottom: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    li::before {
+      content: "○";
+      color: #9ca3af;
+      font-size: 1.2rem;
+    }
+    .hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.8rem; font-style: italic; }
+  </style>
+</head>
+<body>
+  <h2>Meine Todos</h2>
+  <form id="todoForm">
+    <input id="todoInput" placeholder="Neue Aufgabe...">
+    <button type="submit">+ Hinzufügen</button>
+  </form>
+  <ul id="todoList">
+    <li>Folien vorbereiten</li>
+    <li>Demo testen</li>
+    <li>Kaffee holen</li>
+  </ul>
+  <div class="hint">Klick auf ein Todo = entfernt es</div>
+</body>
+</html>