133 lines
3.7 KiB
HTML
133 lines
3.7 KiB
HTML
<!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> |