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-fetch.html
+++ b/slides/223015c/assets/demos/js-fetch.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fetch</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    .url {
+      font-family: ui-monospace, monospace;
+      background: #f3f4f6;
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: 0.85rem;
+      color: #4a4a6a;
+      margin-bottom: 1rem;
+      display: inline-block;
+    }
+    .arrow {
+      margin: 0.6rem 0;
+      color: #d63384;
+      font-style: italic;
+      font-size: 0.85rem;
+    }
+    .json {
+      background: #0f0f23;
+      color: #d63384;
+      padding: 14px;
+      border-radius: 6px;
+      font-family: ui-monospace, monospace;
+      font-size: 0.82rem;
+      line-height: 1.5;
+      margin-bottom: 1rem;
+    }
+    .json .k { color: #86efac; }
+    .json .s { color: #fde68a; }
+    .json .n { color: #93c5fd; }
+    .rendered {
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      padding: 14px;
+      background: #f9fafb;
+    }
+    .rendered h3 { margin: 0 0 6px; }
+    .rendered p { margin: 3px 0; color: #4a4a6a; }
+  </style>
+</head>
+<body>
+  <div class="url">GET https://api.example.com/user/1</div>
+  <div class="json">{<br>
+  &nbsp;&nbsp;<span class="k">"id"</span>: <span class="n">1</span>,<br>
+  &nbsp;&nbsp;<span class="k">"name"</span>: <span class="s">"Max"</span>,<br>
+  &nbsp;&nbsp;<span class="k">"email"</span>: <span class="s">"max@hdm.de"</span><br>
+}</div>
+  <div class="arrow">↓ await response.json() → ins DOM rendern</div>
+  <div class="rendered">
+    <h3>Max</h3>
+    <p>max@hdm.de</p>
+  </div>
+</body>
+</html>