Beispiel:ToDo-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo-Liste - 3</title>
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
ol {list-style-type:none;}
li {
width: 20em;
display: grid;
grid-template-columns: 1.5em 1fr 2.5em;
margin: 0;
background: LightYellow;
border: thin solid grey;
&.done:before {
font-size:1.5em; line-height: 1.15rem;
content: " ✓ ";
line-height: 150%;
padding-left: 0.25em;
color:green;
grid-column: 1/2;
grid-row: 1/2;
}
span {
grid-column: 2/-2;
grid-row: 1/2;
padding: 0.5em;
}
button {
background: transparent;
background-repeat: no-repeat;
background-size: contain;
border: none;
padding: 0;
margin: 0;
width: 2rem;
aspect-ratio: 1/1;
font-size: 0;
color:transparent;
grid-column: -2/-1;
grid-row: 1/2;
}
[commandfor=editSettings]{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-98 -98 196 196'%3E%3Cpath id='cog' d='m-17,-55 l5-17 h20 l5,17z' style='fill:steelblue;stroke:steelBlue; stroke-width:15;stroke-linejoin:round;'/%3E%3Cuse href='%23cog' transform='rotate(60)' /%3E%3Cuse href='%23cog' transform='rotate(120)' /%3E%3Cuse href='%23cog' transform='rotate(180)' /%3E%3Cuse href='%23cog' transform='rotate(240)' /%3E%3Cuse href='%23cog' transform='rotate(300)' /%3E%3Ccircle r='45' style='fill:none;stroke:steelblue; stroke-width:30'/%3E%3C/svg%3E");
}
}
dialog {
position: relative;
padding: 2em 2em 1em 1em;
button {
font-size: 0;
color: transparent;
background-color: lightyellow;
width: 2rem;
aspect-ratio: 1 / 1;
}
.save-button {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 499' style='fill:none; stroke:steelBlue;stroke-width:25' %3E%3Crect x='150' y='60' rx='10' width='180' height='100' /%3E%3Crect x='130' y='280' rx='10' width='220' height='175' /%3E%3Cpath id='outer' d='m40,80 a20,20 1,0,1 20-20 h280 a20,20 1,0,1 15,10 l90,90 v275 a 20,20 1,0,1 -20,20 h-365 a 20,20 1,0,1 -20-20 z'/%3E%3C/svg%3E");
}
.delete-button {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 499 499' style='fill:none; stroke:red;stroke-width:25' %3E%3Crect width='100%25' height='100%25' style='fill:none;stroke:red; stroke-width:1' /%3E%3Cpath id='handle' d='m169,70 v-40 h150 v40'/%3E%3Crect x='64' y='100' rx='10' width='365' height='80'/%3E%3Cpath d='m99,180 l40,280 h220 l40,-280 m-235,75 l15,160 m70,0 v-160 m80,0 l-15,160'/%3E%3C/svg%3E");
}
p {text-align: right;}
}
.planned {
background: LightYellow;
}
.pending {
background: salmon;
}
.done {
background: #d4e3b5;;
}
li:first-of-type {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
li:last-of-type {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
:root {
--border-radius: 0.5em;
--base: blue;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', () => {
const taskList = document.querySelector('#taskList');
const newTaskInput = document.querySelector('#newtask');
const addButton = document.querySelector('#add');
const checkbox = document.querySelector('.completion-status');
const editDialog = document.querySelector('#editSettings');
const editTextInput = document.querySelector('#editText');
const saveButton = editDialog.querySelector('.save-button');
const deleteButton = editDialog.querySelector('.delete-button');
let taskIdCounter = 0;
let selectedTask = null;
addButton.addEventListener('click', () => {
const task = newTaskInput.value.trim();
if (!task) return alert('Bitte gib eine Aufgabe ein.');
const taskId = `todo-${taskIdCounter++}`;
taskList.insertAdjacentHTML('beforeend', `
<li id="${taskId}">
<span class="text">${task}</span>
<button command="show-modal" commandfor="editSettings">
Bearbeiten
</button>
</li>
`);
newTaskInput.value = '';
});
// === Open dialog (edit) ======================================
taskList.addEventListener('click', (event) => {
const editButton = event.target.closest('[commandfor="editSettings"]');
if (!editButton) return;
selectedTask = editButton.closest('li');
editTextInput.value =
selectedTask.querySelector('.text').textContent;
});
// === Save =====================================================
saveButton.addEventListener('click', () => {
if (!selectedTask) return;
selectedTask.querySelector('.text').textContent =
editTextInput.value.trim();
editDialog.close();
selectedTask = null;
});
// === Delete ===================================================
deleteButton.addEventListener('click', () => {
if (!selectedTask) return;
selectedTask.remove();
selectedTask = null;
editDialog.close();
});
checkbox.addEventListener('change', () => {
selectedTask.classList.toggle('done', checkbox.checked);
});
});
</script>
</head>
<body>
<h1>ToDo-Liste - 3</h1>
<form id="controls">
<label for="newtask">Neues Vorhaben:</label>
<input id="newtask">
<button type="button" id="add">Hinzufügen!</button>
</form>
<ol id="taskList">
<li class="planned">
<span class="text">Im Wiki aktiv werden!</span>
<button aria-label="Edit ${taskId}" command="show-modal" commandfor="editSettings">Bearbeiten</button>
</li>
<li>
<span class="text">Für <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Spenden">SELFHTML spenden</a>!</span>
<button aria-label="Edit ${taskId}" command="show-modal" commandfor="editSettings">Bearbeiten</button>
</li>
</ol>
<dialog id="editSettings" closedby="any">
<form method="dialog">
<label for="editText">Ändere den Text:</label><br>
<input type="text" id="editText">
<button type="button" class="save-button">Speichern</button>
<p><button aria-label="Delete task: ${task}" class="delete-button">Löschen</button></p>
<label>
<input type="checkbox" class="completion-status">
Done
</label>
</form>
</dialog>
</body>
</html>
