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

slides/223015c/03-interaktivitaet-javascript.md

@@ -528,6 +528,8 @@ querySelectorAll = alle Treffer
 
 # Elemente manipulieren
 
+![bg right:35%](./assets/demos/js-manipulate.png)
+
 ```javascript
 const element = document.querySelector("#meinElement");
 
@@ -556,6 +558,8 @@ style = Inline-Styles (camelCase!)
 
 # Klassen manipulieren
 
+![bg right:35%](./assets/demos/js-classlist.png)
+
 ```javascript
 const element = document.querySelector(".box");
 
@@ -584,6 +588,8 @@ toggle schaltet hin und her
 
 # Elemente erstellen
 
+![bg right:35%](./assets/demos/js-create.png)
+
 ```javascript
 // Neues Element erstellen
 const neuerAbsatz = document.createElement("p");
@@ -652,6 +658,8 @@ Interaktive Webseiten durch Events
 
 # Event Listener
 
+![bg right:35%](./assets/demos/js-event-listener.png)
+
 ```javascript
 const button = document.querySelector("#meinButton");
 
@@ -729,6 +737,8 @@ target = auslösendes Element
 
 # Event.preventDefault()
 
+![bg right:35%](./assets/demos/js-preventdefault.png)
+
 ```javascript
 // Link ohne Navigation
 const link = document.querySelector("a");
@@ -845,6 +855,8 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
 
 # Beispiel: Todo-Liste
 
+![bg right:35%](./assets/demos/js-todo.png)
+
 ```javascript
 const form = document.querySelector("#todoForm");
 const input = document.querySelector("#todoInput");
@@ -887,6 +899,8 @@ Node.js für Backend
 
 # Fetch: Daten laden
 
+![bg right:35%](./assets/demos/js-fetch.png)
+
 ```javascript
 // Mit async/await (modern)
 async function loadData() {
@@ -908,6 +922,8 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
 
 # LocalStorage: Daten speichern
 
+![bg right:35%](./assets/demos/js-localstorage.png)
+
 ```javascript
 // Speichern
 localStorage.setItem("name", "Max");