From 451e0de4ff72d3d2d4fcc10b69318ad0014aa859 Mon Sep 17 00:00:00 2001
From: Max <mbrand7@wbsedu.de>
Date: Wed, 15 Jul 2026 08:50:49 +0200
Subject: [PATCH] Daten der Todo Apps persistiert

---
 package.json                          | 17 +++++++++++++++++
 react-todolist/src/App.jsx            | 24 ++++++++++++++++++------
 react-todolist/vite.config.js         |  3 +++
 react-unterricht-todolist/src/App.jsx | 10 +++++++++-
 4 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 package.json

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..9169755
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "react-basics-2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gt.mbrnd.de/Max/react-basics.git"
+  },
+  "private": true,
+  "dependencies": {
+    "vite": "^8.1.4"
+  }
+}
diff --git a/react-todolist/src/App.jsx b/react-todolist/src/App.jsx
index 45c4a00..8d213cc 100644
--- a/react-todolist/src/App.jsx
+++ b/react-todolist/src/App.jsx
@@ -1,8 +1,16 @@
-import {useState} from "react";
+import {useState, useEffect} from "react";
+
+const STORAGE_STRING = 'todo-up-todos';
 
 export default function App() {
     const [input, setInput] = useState("");
-    const [todos, setTodos] = useState([]);
+    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem(STORAGE_STRING))||[]);
+
+    useEffect(() => persistTodos(),[todos]);
+
+    function persistTodos() {
+        localStorage.setItem(STORAGE_STRING, JSON.stringify(todos));
+    }
 
     function addTodo() {
         if (input.trim() === "") return;
@@ -30,10 +38,14 @@ export default function App() {
                 </div>
                 <ul id="todo-list-container">
                     {todos.map((todo) => (
-                        <li>
-                            <span onClick={() => toggleTodo(todo.id)}>
-                                {todo.text}: {todo.erledigt ? "bereits " : "noch nicht "} erledigt
-                            </span>
+                        <li key={todo.id}>
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={todo.erledigt}
+                                    onChange={() => toggleTodo(todo.id)}
+                                />{todo.text}
+                            </label>
                             <button onClick={() => deleteTodo(todo.id)}>Entfernen</button>
                         </li>))}
                 </ul>
diff --git a/react-todolist/vite.config.js b/react-todolist/vite.config.js
index 8b0f57b..010b11c 100644
--- a/react-todolist/vite.config.js
+++ b/react-todolist/vite.config.js
@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+    server: {
+        port: 3006
+    }
 })
diff --git a/react-unterricht-todolist/src/App.jsx b/react-unterricht-todolist/src/App.jsx
index b09220c..442fe00 100644
--- a/react-unterricht-todolist/src/App.jsx
+++ b/react-unterricht-todolist/src/App.jsx
@@ -3,8 +3,16 @@ import TodoForm from "./components/TodoForm";
 import TodoList from "./components/TodoList";
 import "./App.css";
 
+const STORAGE_STRING = 'todo-app2-todos';
+
 function App() {
-    const [todos, setTodos] = useState([]);
+    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem(STORAGE_STRING)) || []);
+
+    useEffect(() => persistTodos(), [todos]);
+
+    function persistTodos() {
+        localStorage.setItem(STORAGE_STRING, JSON.stringify(todos));
+    }
 
     function addTodo(text, priority) {
         const newTodo = {