Beispiel:ToDo-2.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 - 2</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 1.5em;
margin: 0;
background: gainsboro;
border: thin solid grey;
span {
grid-column: 2/-2;
grid-row: 1/2;
padding: 0.5em;
}
button {
background: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 560'%3E%3Cpath id='handle' style='fill:none;stroke:red;stroke-width:25;stroke-linejoin:round;stroke-linecap:round;'%0Ad='m150,160 v-40 h150 v40'/%3E%3Crect x='45' y='200' rx='10' style='fill:none; stroke:red;stroke-width:25' width='365' height='80'/%3E%3Cpath style='fill:none;stroke:red;stroke-width:25;stroke-linejoin:round;stroke-linecap:round;'%0Ad='m80,280 l40,280 h220 l40,-280 m-235,75 l15,160 m70,0 v-160 m80,0 l-15,160'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: contain;
border: none;
padding: 0;
margin: 0;
width: 1.5rem;
aspect-ratio: 1/1;
font-size: 0;
color:transparent;
grid-column: -2/-1;
grid-row: 1/2;
}
}
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);
}
fieldset[disabled] {border:none; background: #ccc; color: #666; font-style:italic; width:22em;}
:root {
--border-radius: 0.5em;
--base: blue;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const taskList = document.querySelector('#taskList');
const newTaskInput = document.querySelector('#newtask');
const addButton = document.querySelector('#add');
let taskIdCounter = 0; // Counter zum Erzeugen eindeutiger IDs
addButton.addEventListener('click', function () {
const task = "Dies ist ein neuer Listeneintrag!" //newTaskInput.value.trim();
if (task === '') {
alert('Bitte gib eine Aufgabe ein.');
return;
}
// Create a unique ID for the task
const taskId = `todo-${taskIdCounter++}`;
taskList.insertAdjacentHTML('beforeend', `
<li id="${taskId}">
<span class="text">${task}</span>
<button aria-label="Delete task: ${task}" class="delete-button">Löschen</button>
</li>
`);
newTaskInput.value = '';
});
taskList.addEventListener('click', function (event) {
if (event.target.classList.contains('delete-button')) {
const taskItem = event.target.closest('li');
taskItem.remove();
}
});
});
</script>
</head>
<body>
<h1>ToDo-Liste - 2</h1>
<form id="controls">
<fieldset disabled>
<label for="newtask">Neues Vorhaben:</label>
<input id="newtask" placeholder="Dies ist ein neuer Listeneintrag!" size="28">
</fieldset>
<button type="button" id="add">Hinzufügen!</button>
</form>
<ol id="taskList">
<li>
<span class="text">Im Wiki aktiv werden!</span>
<button aria-label="Delete task: ${task}" class="delete-button">Löschen</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="Delete task: ${task}" class="delete-button">Löschen</button>
</li>
</ol>
</body>
</html>
