Beispiel:JS-DOM-Tut-8.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.25rem; 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', `
  • <input type="checkbox" id="${taskId}"> <label for="${taskId}"> ${task} </label> <button aria-label="Delete task: ${task}" class="delete-button">Löschen</button> 
    •    `);

       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>

    ToDo-Liste - 2

    <form id="controls"> <label for="newtask">Neues Vorhaben:</label> <input id="newtask">

    <button type="button" id="add">Hinzufügen!</button> </form>

    • <input type="checkbox" checked id="x1"> <label for="x1"> Im Wiki aktiv werden! </label> <button aria-label="Delete task: ${task}" class="delete-button">Löschen</button>
    • <input type="checkbox" id="x2"> <label for="x2"> Für SELFHTML spenden! </label> <button aria-label="Delete task: ${task}" class="delete-button">Löschen</button>

    </body> </html>

    Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-DOM-Tut-8.html&oldid=100599“