added code for todo list task

2024-09-19 13:32:36 +02:00 · 2024-09-19 13:32:36 +02:00 · 0c5432d9ba
parent 8a966ffb57
commit 0c5432d9ba
1 changed files with 133 additions and 0 deletions
--- a/oppgaver/uke7/todo/index.html
+++ b/oppgaver/uke7/todo/index.html
@ -0,0 +1,133 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <style>
+        table, tr, td, th {
+            border: 1px solid lightgray;
+            border-collapse: collapse;
+        }
+
+        td, th {
+            padding: 4px;
+        }
+
+        th {
+            background-color: darkblue;
+            border: 1px solid darkblue;
+            color: white;
+        }
+
+        tr:nth-child(even) {
+            background: antiquewhite;
+        }
+    </style>
+</head>
+<body>
+<input type="date"/>
+Oppgaver
+<ol>
+    <li>
+        Legg til person. Må kunne angis når man lager ny oppgave og må
+        kunne redigeres
+    </li>
+    <li>Legg til kolonne for frist. Bruk input-tag med type="date".
+        Konvertering til visningsformat: <tt>new Date("2019-02-13").toLocaleDateString()</tt>
+    </li>
+    <li>Lag kolonne for "gjort dato" som fylles ut automatisk når man 
+        trykker på checkboxen for at det er gjort.</li>
+
+
+</ol>
+<table id="tasksTable"></table>
+<p>
+    <input id="taskDescription" type="text"/><button onclick="addTask()">Legg til oppgave</button>
+</p>
+<script>
+    // Model
+    var tasks = [
+        { description: 'Handle til middag', isDone: true },
+        { description: 'Lage middag', isDone: false },
+        { description: 'Spise middag', isDone: false },
+    ];
+
+    // Controller
+    var taskDescriptionInput = document.getElementById('taskDescription');
+
+    function addTask() {
+        tasks.push({
+            description: taskDescriptionInput.value,
+            isDone: false
+        });
+        taskDescriptionInput.value = '';
+        show();
+    }
+
+    // View
+    var tasksTable = document.getElementById('tasksTable');
+    show();
+
+    function show() {
+        let html = `
+                        <tr>
+                            <th>Oppgave</th>
+                            <th>Gjort</th>
+                            <th></th>
+                        </tr>`;
+        for (let i = 0; i < tasks.length; i++) {
+            html += createHtmlRow(i);
+        }
+        tasksTable.innerHTML = html;
+    }
+
+    function createHtmlRow(i) {
+        const task = tasks[i];
+        const checkedHtml = task.isDone ? 'checked="checked"' : '';
+        if (!task.editMode)
+            return `<tr>
+                            <td>${task.description}</td>
+                            <td><input onchange="changeIsDone(this, ${i})" type="checkbox" ${checkedHtml} /></td>
+                            <td>
+                                <button onclick="deleteTask(${i})">Slett</button>
+                                <button onclick="editTask(${i})">Rediger</button>
+                            </td>
+                        </tr>
+                        `;
+        return `<tr>
+                            <td><input id="editDescription${i}" type="text" value="${task.description}"/></td>
+                            <td><input onchange="changeIsDone(this, ${i})" type="checkbox" ${checkedHtml} /></td>
+                            <td>
+                                <button onclick="updateTask(${i})">Lagre</button>
+                            </td>
+                        </tr>
+                        `;
+    }
+
+    function changeIsDone(checkbox, index) {
+        tasks[index].isDone = checkbox.checked;
+        show();
+    }
+
+    function deleteTask(index) {
+        tasks.splice(index, 1);
+        show();
+    }
+
+    function editTask(index) {
+        tasks[index].editMode = true;
+        show();
+    }
+
+    function updateTask(index) {
+        const id = `editDescription${index}`;
+        const inputTag = document.getElementById(id);
+        const task = tasks[index];
+        task.description = inputTag.value;
+        task.editMode = false;
+        show();
+    }
+</script>
+</body>
+</html>