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-create.html
+++ b/slides/223015c/assets/demos/js-create.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>createElement</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
+    #container { border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; background: #f9fafb; }
+    p { margin: 6px 0; padding: 6px 10px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; }
+    p.highlight {
+      background: #fef3c7;
+      border-color: #ca8a04;
+      color: #713f12;
+      font-weight: 600;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    .badge {
+      display: inline-block;
+      background: #16a34a;
+      color: #fff;
+      padding: 2px 8px;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-left: 8px;
+      vertical-align: middle;
+    }
+  </style>
+</head>
+<body>
+  <h3>#container nach appendChild</h3>
+  <div id="container">
+    <p>Erster Absatz</p>
+    <p>Zweiter Absatz</p>
+    <p class="highlight">Ich bin neu!<span class="badge">createElement</span></p>
+  </div>
+</body>
+</html>