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-preventdefault.html
+++ b/slides/223015c/assets/demos/js-preventdefault.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>preventDefault</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
+    label { font-weight: 600; }
+    input {
+      font: inherit;
+      padding: 8px 12px;
+      border: 2px solid #d63384;
+      border-radius: 4px;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border-radius: 6px;
+      border: 1px solid #1e40af;
+      background: #dbeafe;
+      color: #1e3a8a;
+      cursor: pointer;
+      font-weight: 600;
+      align-self: flex-start;
+    }
+    .status {
+      margin-top: 1rem;
+      padding: 10px 14px;
+      border-radius: 6px;
+      background: #dcfce7;
+      border: 2px solid #16a34a;
+      color: #14532d;
+      font-weight: 600;
+      max-width: 320px;
+    }
+    .no-reload {
+      font-size: 0.8rem;
+      color: #6b7280;
+      font-style: italic;
+      margin-top: 4px;
+    }
+  </style>
+</head>
+<body>
+  <form>
+    <label for="email">E-Mail</label>
+    <input id="email" type="email" value="test@hdm.de">
+    <button type="submit">Absenden</button>
+  </form>
+  <div class="status">✓ Formular verarbeitet (ohne Reload!)</div>
+  <div class="no-reload">event.preventDefault() verhindert Seiten-Neuladen</div>
+</body>
+</html>