Beispiel:JS-DOM-Tut-7.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 - 2</title>
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
<style>
ul {list-style-type:none;}
li {
	width: 20em;
	display: grid;
	grid-template-columns: 1.5em 1fr 1.5em;
	margin: 0;
	
	input {width: 0; height: 0; font-size:0; margin:0;}
	label {
	  background: gainsboro;
	  border: thin solid grey;
	  grid-column: 1/-1;
	  grid-row: 1/2;
	  padding:0.5em;
	  display:grid;
	  grid-template-columns: 1.5em 1fr;
	}	
	input:checked ~ label {background: #d4e3b5;}
	input:checked ~ label:before {
		font-size:1.5em; line-height: 1.15rem;
		content: "✓ ";
		color:green;
	  grid-column: 1/2;
	  grid-row: 1/2;		
	}
	.text {	  grid-column: 2/3;
	  grid-row: 1/2;	}
	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:steelBlue;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:steelBlue;stroke-width:25' width='365' height='80'/%3E%3Cpath style='fill:none;stroke:steelBlue;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: 0.5em 0.5em 0 0;
}
li:last-of-type {
  border-bottom-radius: 0.5em;
}
</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 = 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>
        <input type="checkbox" id="${taskId}">
        <label for="${taskId}">
          <span class="text">${task}</span>
        </label>
        <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"> 
	<label for="newtask">Neues Vorhaben:</label>
	<input id="newtask">

	<button type="button" id="add">Hinzufügen!</button>
</form>	
<ul id="taskList">
          <li>
            <input type="checkbox" checked id="x1">
            <label for="x1">
              <span class="text">Im Wiki aktiv werden!</span>
            </label>
            <button aria-label="Delete task: ${task}" class="delete-button">Löschen</button>
          </li>
          <li>
            <input type="checkbox" id="x2">
            <label for="x2">
              <span class="text">Für SELFHTML spenden!</span>
            </label>
            <button aria-label="Delete task: ${task}" class="delete-button">Löschen</button>
          </li>
</ul>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-DOM-Tut-7.html&oldid=100691“