Beispiel:ToDo-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ToDo-Liste - 4</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 statusSelect = 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();
  });
  // === Completion ===================================================	
	statusSelect.addEventListener('change', () => {
  	if (!selectedTask) return;

  	const status = statusSelect.value; // planned | pending | done

		selectedTask.classList.remove('planned', 'pending', 'done');

		selectedTask.classList.add(status);
	});
	
});

 
</script>  
</head>
 
<body>
  <h1>ToDo-Liste - 4</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>

    <select class="completion-status" size="3" >
      <option value="planned">Geplant</option>
      <option value="pending">In Bearbeitung</option>
      <option value="done">Erledigt!</option>
    </select>
  </form>
</dialog>

</body>
</html>

Abgerufen am 22.12.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:ToDo-4.html"