From 2dc63aa8ecd997dea06f53f55922c1072b56342e Mon Sep 17 00:00:00 2001
From: Max <mbrand7@wbsedu.de>
Date: Sun, 12 Jul 2026 18:27:56 +0200
Subject: [PATCH] =?UTF-8?q?Funktionalit=C3=A4t=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TodoListe/script.js | 63 +++++++++++++++++++++++++++++++++++++++------
 TodoListe/style.css | 19 ++++++++++++++
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/TodoListe/script.js b/TodoListe/script.js
index 4aa5453..73e5a44 100644
--- a/TodoListe/script.js
+++ b/TodoListe/script.js
@@ -7,16 +7,63 @@ function neueAufgabe(){
         return;
     }
 
-    let newListItem = document.createElement('li');
-    newListItem.textContent = inputBox.value;
-    todoListContainer.appendChild(newListItem);
-    saveData();
+    saveData({'data' : inputBox.value, 'checked': false, 'index' : todoListContainer.childNodes.length});
+    loadData();
+
     inputBox.value = '';
 }
 
-function saveData()
-{
-    localStorage.setItem('data', todoListContainer.innerHTML);
+function buildListItem(data, checked, index){
+    let listElement = document.createElement('li');
+    let checkBox = document.createElement('input');
+    checkBox.setAttribute('type', 'checkbox');
+    checkBox.setAttribute('id', `list-entry-${index}`);
+    checkBox.addEventListener('click', () => {saveData(); loadData();});
+    let listLable = document.createElement('label');
+    listLable.textContent = data;
+    listLable.setAttribute('for', `list-entry-${index}`);
+    listElement.appendChild(checkBox);
+    listElement.appendChild(listLable);
+    if (checked) {
+        checkBox.checked = true;
+        listLable.classList.add('checked-list-item');
+    } else {
+        let removeButton = document.createElement('button');
+        removeButton.innerHTML = '<i class="material-icons">delete</i>';
+        removeButton.addEventListener('click', () => {listElement.remove();saveData();loadData();});
+        listElement.appendChild(removeButton);
+    }
+    return listElement;
 }
 
-todoListContainer.innerHTML = localStorage.getItem('data') || '';
\ No newline at end of file
+function loadData(){
+
+    todoListContainer.innerHTML = '';
+
+    let data = JSON.parse(localStorage.getItem('data')) || [];
+
+    data.forEach((listItem, index) => {
+        todoListContainer.appendChild(buildListItem(listItem.data, listItem.checked, index));
+    });
+}
+
+function saveData(newItem = null)
+{
+
+    let todoItems = [];
+
+    if (todoListContainer.childNodes.length !== 0) {
+        todoListContainer.childNodes.forEach((todoItem, index) => {
+            let data = todoItem.querySelector('label').textContent;
+            let checked = todoItem.querySelector('input').checked;
+            todoItems.push({data, checked, index});
+        });
+    }
+    if (newItem) {
+        todoItems.push(newItem);
+    }
+
+    localStorage.setItem('data', JSON.stringify(todoItems));
+}
+
+loadData();
\ No newline at end of file
diff --git a/TodoListe/style.css b/TodoListe/style.css
index c81e3c0..d525506 100644
--- a/TodoListe/style.css
+++ b/TodoListe/style.css
@@ -57,4 +57,23 @@ html {
 .schatten-farbverlauf {
     background: linear-gradient(45deg, red, orange, yellow, green, blue, violet, pink);
     padding: 3px;
+}
+
+.checked-list-item
+{
+    text-decoration: line-through;
+    color: lightslategrey;
+}
+
+ul {
+    list-style: none;
+}
+
+li {
+    display: flex;
+    gap: .7em;
+}
+
+label {
+    flex-grow: 1;
 }
\ No newline at end of file