a

2025-02-04 20:42:51 +01:00
parent 20c1401458
commit 9844efeaad
895 changed files with 113154 additions and 0 deletions
--- a/WS24_25/WebTech/web-pruefung-projekt/aufgabe5/todo-list.html
+++ b/WS24_25/WebTech/web-pruefung-projekt/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-projekt/aufgabe5/todo-script.js
+++ b/WS24_25/WebTech/web-pruefung-projekt/aufgabe5/todo-script.js
@@ -0,0 +1,42 @@
+// Hier den Code ergaenzen 
+// (Event-Handling fuer Hinzufuegen-Button, DOM-Manipulation fuer Tabelle)
+var button = document.getElementsByTagName("button")[0];
+button.onclick = function(){
+  createCheckbox();
+}
+var tbody = document.getElementsByTagName("tbody")[0];
+var i = 0;
+function createCheckbox(tr) {
+  // Hier den Code fuer die Erzeugung der Checkbox ergaenzen
+  // Empfohlene Strategie:
+  // 1. Erstelle eine Checkbox per DOM-API
+  // 2. Fuege einen Event-Handler fuer Klick auf die Checkbox hinzu
+  // 3. Falls Checkbox angehakt (checked): Text in Zeile (tr) durchstreichen
+  // 4. Sonst: Text in Zeile (tr) normal darstellen
+  var inputs = document.getElementsByTagName("input");
+  var content =inputs[inputs.length - 1].value;
+  var tr = document.createElement("tr");
+
+  var doneTd = document.createElement("td");
+  var checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+
+  checkbox.setAttribute("onclick", "toggleBox(" + i++ + ")");
+  doneTd.append(checkbox);
+  tr.append(doneTd);
+
+  var todoTd = document.createElement("td");
+  todoTd.append(document.createTextNode(content));
+  todoTd.style.textDecoration = "none";
+  tr.append(todoTd);
+  tbody.append(tr);
+}
+function toggleBox(num){
+  var text = document.getElementsByTagName("td")[num * 2 + 1];
+  if(text.style.textDecoration == "none"){
+    text.style.textDecoration = "line-through";
+  }else{
+    text.style.textDecoration = "none";
+  }
+
+}