a

2025-02-13 18:50:22 +01:00
parent 5c211013b5
commit 4cae4e9e28
803 changed files with 107055 additions and 14 deletions
--- a/WS24_25/WebTech/web-pruefung-projekt2/aufgabe5/todo-list.html
+++ b/WS24_25/WebTech/web-pruefung-projekt2/aufgabe5/todo-list.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <title>ToDo-Liste</title>
+    <style>
+        table {
+            border-collapse: collapse;
+        }
+
+        table,
+        tr,
+        td,
+        th {
+            border: 1px solid black;
+            padding: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Meine ToDos</h1>
+    <table>
+        <thead>
+            <tr>
+                <th>Erledigt?</th>
+                <th>ToDo</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+    <p><input><button>Hinzufügen...</button></p>
+    <script src="todo-script.js"></script>
+</body>
+
+</html>
--- a/WS24_25/WebTech/web-pruefung-projekt2/aufgabe5/todo-script.js
+++ b/WS24_25/WebTech/web-pruefung-projekt2/aufgabe5/todo-script.js
@@ -0,0 +1,27 @@
+// Hier den Code ergaenzen 
+// (Event-Handling fuer Hinzufuegen-Button, DOM-Manipulation fuer Tabelle)
+const input = document.querySelector("p > input");
+const tbody = document.getElementsByTagName("tbody")[0];
+const button = document.getElementsByTagName("button")[0];
+button.onclick = createCheckbox;
+function createCheckbox() {
+  let value = input.value;
+  let tr = document.createElement("tr");
+  let td = document.createElement("td");
+  let text = document.createTextNode(value);
+  let tdCheck = document.createElement("td");
+  let checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.setAttribute("onclick","toggleTextDecoration(this)");
+
+  td.append(text);
+  tdCheck.append(checkbox);
+  tr.append(tdCheck);
+  tr.append(td)
+  
+  tbody.append(tr);
+}
+function toggleTextDecoration(checkbox){
+  const td = checkbox.parentElement.nextElementSibling;
+  td.style.textDecoration = checkbox.checked ? "line-through" : "none";
+}