hdm/2025
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: hdm/2025:0367f071662bac8c9d8e2c9df48f21de2c13780a
hdm/2025:main hdm/2025:test-merge hdm/2025:klausur-erklaerungen hdm/2025:narrative-academic-merge
..
compare: hdm/2025:b6334035fc07c23f78f30e9c6f5916761ea87940
hdm/2025:main hdm/2025:test-merge hdm/2025:klausur-erklaerungen hdm/2025:narrative-academic-merge
3 Commits
0367f07166 .. b6334035fc
Author SHA1 Message Date
libretech b6334035fc add js basics demos: console, arrays, objects, loops 2026-04-20 13:25:09 +02:00
libretech 7626852ac1 add js demos for chapter 3: manipulate, classlist, create, events, preventdefault, todo, fetch, localstorage 2026-04-20 13:14:56 +02:00
libretech 754ff9436c add dark mode js demo on chapter 3 slide 2026-04-20 12:54:52 +02:00
40 changed files with 1026 additions and 0 deletions
Expand all files Collapse all files

No files matched your search

slides/223015c/03-interaktivitaet-javascript.md
+26
View File
@@ -208,6 +208,8 @@ Fehler werden hier auch angezeigt
# Variablen: Daten speichern # Variablen: Daten speichern
![bg right:35%](./assets/demos/js-console.png)
```javascript ```javascript
// Modern (empfohlen) // Modern (empfohlen)
let age = 25; // Kann geändert werden let age = 25; // Kann geändert werden
@@ -260,6 +262,8 @@ Template Literals mit Backticks!
# Arrays: Listen # Arrays: Listen
![bg right:35%](./assets/demos/js-arrays.png)
```javascript ```javascript
const colors = ["red", "green", "blue"]; const colors = ["red", "green", "blue"];
@@ -284,6 +288,8 @@ Arrays sind veränderbar auch bei const
# Objects: Strukturierte Daten # Objects: Strukturierte Daten
![bg right:35%](./assets/demos/js-objects.png)
```javascript ```javascript
const person = { const person = {
firstName: "Max", firstName: "Max",
@@ -413,6 +419,8 @@ Code-Block in geschweiften Klammern
# Schleifen: Wiederholen # Schleifen: Wiederholen
![bg right:35%](./assets/demos/js-loops.png)
```javascript ```javascript
// for-Schleife // for-Schleife
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
@@ -528,6 +536,8 @@ querySelectorAll = alle Treffer
# Elemente manipulieren # Elemente manipulieren
![bg right:35%](./assets/demos/js-manipulate.png)
```javascript ```javascript
const element = document.querySelector("#meinElement"); const element = document.querySelector("#meinElement");
@@ -556,6 +566,8 @@ style = Inline-Styles (camelCase!)
# Klassen manipulieren # Klassen manipulieren
![bg right:35%](./assets/demos/js-classlist.png)
```javascript ```javascript
const element = document.querySelector(".box"); const element = document.querySelector(".box");
@@ -584,6 +596,8 @@ toggle schaltet hin und her
# Elemente erstellen # Elemente erstellen
![bg right:35%](./assets/demos/js-create.png)
```javascript ```javascript
// Neues Element erstellen // Neues Element erstellen
const neuerAbsatz = document.createElement("p"); const neuerAbsatz = document.createElement("p");
@@ -652,6 +666,8 @@ Interaktive Webseiten durch Events
# Event Listener # Event Listener
![bg right:35%](./assets/demos/js-event-listener.png)
```javascript ```javascript
const button = document.querySelector("#meinButton"); const button = document.querySelector("#meinButton");
@@ -729,6 +745,8 @@ target = auslösendes Element
# Event.preventDefault() # Event.preventDefault()
![bg right:35%](./assets/demos/js-preventdefault.png)
```javascript ```javascript
// Link ohne Navigation // Link ohne Navigation
const link = document.querySelector("a"); const link = document.querySelector("a");
@@ -755,6 +773,8 @@ Formular-Validierung ohne Reload
# Beispiel: Toggle Dark Mode # Beispiel: Toggle Dark Mode
![bg right:35%](./assets/demos/js-darkmode.png)
```javascript ```javascript
const toggleButton = document.querySelector("#darkModeToggle"); const toggleButton = document.querySelector("#darkModeToggle");
const body = document.body; const body = document.body;
@@ -843,6 +863,8 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
# Beispiel: Todo-Liste # Beispiel: Todo-Liste
![bg right:35%](./assets/demos/js-todo.png)
```javascript ```javascript
const form = document.querySelector("#todoForm"); const form = document.querySelector("#todoForm");
const input = document.querySelector("#todoInput"); const input = document.querySelector("#todoInput");
@@ -885,6 +907,8 @@ Node.js für Backend
# Fetch: Daten laden # Fetch: Daten laden
![bg right:35%](./assets/demos/js-fetch.png)
```javascript ```javascript
// Mit async/await (modern) // Mit async/await (modern)
async function loadData() { async function loadData() {
@@ -906,6 +930,8 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
# LocalStorage: Daten speichern # LocalStorage: Daten speichern
![bg right:35%](./assets/demos/js-localstorage.png)
```javascript ```javascript
// Speichern // Speichern
localStorage.setItem("name", "Max"); localStorage.setItem("name", "Max");
slides/223015c/assets/demos/js-arrays-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-arrays</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/arrays.html</span>
</div>
<iframe src="./js-arrays.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-arrays.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Arrays</title>
<style>
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.95rem; }
.row { padding: 4px 0; border-bottom: 1px solid #f3f4f6; display: flex; gap: 8px; }
.prompt { color: #9ca3af; }
.num { color: #1e40af; }
.str { color: #15803d; }
.out { color: #6b7280; font-style: italic; }
.arr { display: inline-flex; gap: 2px; }
.cell {
border: 1px solid #d1d5db;
padding: 2px 8px;
border-radius: 3px;
background: #f9fafb;
}
.idx { font-size: 0.65rem; color: #9ca3af; text-align: center; }
</style>
</head>
<body>
<div class="row"><span class="prompt">&gt;</span><span>const f = [<span class="str">"🍎"</span>, <span class="str">"🍌"</span>, <span class="str">"🍒"</span>];</span></div>
<div style="margin: 8px 0 10px;">
<div class="arr">
<div><div class="cell">🍎</div><div class="idx">0</div></div>
<div><div class="cell">🍌</div><div class="idx">1</div></div>
<div><div class="cell">🍒</div><div class="idx">2</div></div>
</div>
</div>
<div class="row"><span class="prompt">&gt;</span><span>f[<span class="num">0</span>];</span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"🍎"</span></span></div>
<div class="row"><span class="prompt">&gt;</span><span>f.length;</span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="num">3</span></span></div>
<div class="row"><span class="prompt">&gt;</span><span>f.push(<span class="str">"🍇"</span>);</span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="num">4</span></span></div>
</body>
</html>
slides/223015c/assets/demos/js-arrays.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

slides/223015c/assets/demos/js-classlist-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-classlist</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/classlist.html</span>
</div>
<iframe src="./js-classlist.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-classlist.html
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>classList</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; }
.box {
padding: 16px 20px;
border: 2px solid #9ca3af;
border-radius: 6px;
background: #f3f4f6;
margin-bottom: 14px;
}
.box.aktiv {
border-color: #16a34a;
background: #dcfce7;
color: #14532d;
font-weight: 600;
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}
button {
font: inherit;
padding: 8px 14px;
border-radius: 6px;
border: 1px solid #9ca3af;
background: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h3>.box ohne Klasse</h3>
<div class="box">inaktiv</div>
<h3>.box mit classList.add("aktiv")</h3>
<div class="box aktiv">aktiv ✓</div>
<button>classList.toggle("aktiv")</button>
</body>
</html>
slides/223015c/assets/demos/js-classlist.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

slides/223015c/assets/demos/js-console-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-console</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/console.html</span>
</div>
<iframe src="./js-console.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-console.html
+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DevTools Console</title>
<style>
body { margin: 0; padding: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #fff; }
.console { padding: 14px 16px; font-size: 0.95rem; }
.row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; }
.prompt { color: #9ca3af; user-select: none; }
.input { color: #1a1a2e; flex: 1; }
.output { color: #6b7280; font-style: italic; flex: 1; }
.num { color: #1e40af; }
.str { color: #15803d; }
.key { color: #7c2d12; }
</style>
</head>
<body>
<div class="console">
<div class="row"><span class="prompt">&gt;</span><span class="input">let alter = <span class="num">25</span>;</span></div>
<div class="row"><span class="prompt">&gt;</span><span class="input">const name = <span class="str">"Max"</span>;</span></div>
<div class="row"><span class="prompt">&gt;</span><span class="input">console.log(name, alter);</span></div>
<div class="row"><span class="prompt">←</span><span class="output"><span class="str">"Max"</span> <span class="num">25</span></span></div>
<div class="row"><span class="prompt">&gt;</span><span class="input">typeof alter;</span></div>
<div class="row"><span class="prompt">←</span><span class="output"><span class="str">"number"</span></span></div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-console.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

slides/223015c/assets/demos/js-create-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-create</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/create.html</span>
</div>
<iframe src="./js-create.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-create.html
+40
View File
@@ -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>
slides/223015c/assets/demos/js-create.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

slides/223015c/assets/demos/js-darkmode-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Dark Mode</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/darkmode.html</span>
</div>
<iframe src="./js-darkmode.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-darkmode.html
+49
View File
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dark Mode Toggle</title>
<style>
body {
font-family: system-ui, sans-serif;
padding: 1.5rem;
transition: background .2s, color .2s;
}
button {
font: inherit;
padding: 8px 16px;
border: 1px solid #9ca3af;
border-radius: 6px;
background: #f3f4f6;
cursor: pointer;
}
.dark-mode {
background: #1a1a1a;
color: #eee;
}
.dark-mode button {
background: #2a2a2a;
color: #eee;
border-color: #555;
}
h2 { margin-top: 0; }
</style>
</head>
<body class="dark-mode">
<h2>Hallo Welt!</h2>
<p>Diese Seite wechselt zwischen hellem und dunklem Modus.</p>
<button id="darkModeToggle">☀️ Light Mode</button>
<script>
const toggleButton = document.querySelector("#darkModeToggle");
const body = document.body;
toggleButton.addEventListener("click", () => {
body.classList.toggle("dark-mode");
if (body.classList.contains("dark-mode")) {
toggleButton.textContent = "☀️ Light Mode";
} else {
toggleButton.textContent = "🌙 Dark Mode";
}
});
</script>
</body>
</html>
slides/223015c/assets/demos/js-darkmode.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

slides/223015c/assets/demos/js-event-listener-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-event-listener</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/event-listener.html</span>
</div>
<iframe src="./js-event-listener.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-event-listener.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Event Listener</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.5rem; text-align: center; }
button {
font: inherit;
font-size: 1.2rem;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid #1e40af;
background: #dbeafe;
color: #1e3a8a;
cursor: pointer;
font-weight: 600;
}
.count {
margin-top: 1.2rem;
font-size: 2.2rem;
font-weight: 700;
color: #d63384;
}
.console {
margin-top: 1.2rem;
background: #0f0f23;
color: #d63384;
padding: 10px 14px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-size: 0.85rem;
text-align: left;
}
.console .prompt { color: #6b7280; }
</style>
</head>
<body>
<button id="meinButton">Klick mich!</button>
<div class="count">Klicks: 3</div>
<div class="console">
<div><span class="prompt">&gt;</span> Button wurde geklickt!</div>
<div><span class="prompt">&gt;</span> Button wurde geklickt!</div>
<div><span class="prompt">&gt;</span> Button wurde geklickt!</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-event-listener.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

slides/223015c/assets/demos/js-fetch-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-fetch</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/fetch.html</span>
</div>
<iframe src="./js-fetch.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-fetch.html
+60
View File
@@ -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>
slides/223015c/assets/demos/js-fetch.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

slides/223015c/assets/demos/js-localstorage-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-localstorage</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/localstorage.html</span>
</div>
<iframe src="./js-localstorage.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-localstorage.html
+46
View File
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
.card {
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 14px;
margin-bottom: 1rem;
background: #f9fafb;
}
h3 { margin: 0 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.kv {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
font-family: ui-monospace, monospace;
font-size: 0.9rem;
}
.k { color: #7c2d12; font-weight: 700; }
.v { color: #14532d; }
.reload {
background: #dcfce7;
border: 2px solid #16a34a;
padding: 10px 14px;
border-radius: 6px;
color: #14532d;
font-weight: 600;
}
.icon { font-size: 1.2em; margin-right: 6px; }
</style>
</head>
<body>
<div class="card">
<h3>localStorage</h3>
<div class="kv">
<div class="k">"name"</div><div class="v">"Max"</div>
<div class="k">"settings"</div><div class="v">{"darkMode":true}</div>
</div>
</div>
<div class="reload"><span class="icon">💾</span>Bleibt nach Reload / Browser-Neustart erhalten</div>
</body>
</html>
slides/223015c/assets/demos/js-localstorage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

slides/223015c/assets/demos/js-loops-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-loops</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/loops.html</span>
</div>
<iframe src="./js-loops.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-loops.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Schleifen</title>
<style>
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.95rem; }
.row { padding: 4px 0; display: flex; gap: 8px; }
.prompt { color: #9ca3af; }
.out { color: #6b7280; font-style: italic; }
.num { color: #1e40af; }
.str { color: #15803d; }
.code { background: #0f0f23; color: #d63384; padding: 10px; border-radius: 4px; margin: 8px 0; }
.code pre { margin: 0; color: inherit; font-family: inherit; font-size: 0.85rem; }
</style>
</head>
<body>
<div class="code">
<pre>for (let i = 0; i < 3; i++) {
console.log("Runde", i);
}</pre>
</div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">0</span></span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">1</span></span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">2</span></span></div>
</body>
</html>
slides/223015c/assets/demos/js-loops.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

slides/223015c/assets/demos/js-manipulate-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-manipulate</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/manipulate.html</span>
</div>
<iframe src="./js-manipulate.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-manipulate.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Element manipulieren</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; }
.demo { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 14px; background: #f9fafb; }
#meinElement { color: red; background: #fee2e2; padding: 8px 12px; border-radius: 4px; }
</style>
</head>
<body>
<h3>Vorher</h3>
<div class="demo"><p>Alter Text</p></div>
<h3>Nach JavaScript</h3>
<div class="demo">
<p id="meinElement">Neuer Text</p>
</div>
<script>
// element.textContent = "Neuer Text";
// element.style.color = "red";
</script>
</body>
</html>
slides/223015c/assets/demos/js-manipulate.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

slides/223015c/assets/demos/js-objects-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-objects</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/objects.html</span>
</div>
<iframe src="./js-objects.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-objects.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Objects</title>
<style>
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.9rem; }
.card {
border: 2px solid #4f46e5;
border-radius: 6px;
padding: 12px 14px;
background: #eef2ff;
margin: 10px 0;
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.k { color: #7c2d12; font-weight: 700; }
.v { color: #14532d; }
.row { padding: 4px 0; display: flex; gap: 8px; }
.prompt { color: #9ca3af; }
.out { color: #6b7280; font-style: italic; }
.str { color: #15803d; }
.num { color: #1e40af; }
</style>
</head>
<body>
<div class="row"><span class="prompt">&gt;</span><span>const user = { name: <span class="str">"Max"</span>, alter: <span class="num">25</span> };</span></div>
<div class="card">
<div class="kv">
<div class="k">name:</div><div class="v str">"Max"</div>
<div class="k">alter:</div><div class="v num">25</div>
<div class="k">studiert:</div><div class="v str">"DMW"</div>
</div>
</div>
<div class="row"><span class="prompt">&gt;</span><span>user.name;</span></div>
<div class="row"><span class="prompt">←</span><span class="out str">"Max"</span></div>
<div class="row"><span class="prompt">&gt;</span><span>user[<span class="str">"alter"</span>];</span></div>
<div class="row"><span class="prompt">←</span><span class="out num">25</span></div>
</body>
</html>
slides/223015c/assets/demos/js-objects.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

slides/223015c/assets/demos/js-preventdefault-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-preventdefault</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/preventdefault.html</span>
</div>
<iframe src="./js-preventdefault.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-preventdefault.html
+54
View File
@@ -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>
slides/223015c/assets/demos/js-preventdefault.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

slides/223015c/assets/demos/js-todo-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-todo</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/todo.html</span>
</div>
<iframe src="./js-todo.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/js-todo.html
+60
View File
@@ -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>
slides/223015c/assets/demos/js-todo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB