ToDo-Liste mit JavaScript

Die im Formular eingetragenen Daten per JavaScript: localStorage() im Browser des Benutzers hinterlegen, auslesen und löschen. Wie das alles genau abläuft, ist im Quelltext nachzulesen.

Demo

Quelltext: todo-liste.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑


<!DOCTYPE html>

<html lang="de" dir="ltr">

 <head>

  <meta charset="UTF-8">

  <title>ToDo-Liste</title>

  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">


<style>

/*

 * ToDo-Liste

 */



body {

 background-color: #FBFDFF;

}



body, textarea, input {

 font-family: Verdana, Arial, Sans-Serif;

}



fieldset {

 display: Inline;

 border: Solid 1px #0091C8;

}



fieldset legend {

 color: #0091C8;

}



textarea {

 width: 300px;

 height: 150px;

 resize: none;

}



:focus-visible {

  outline: Solid 1px #2284E6;

}



div.element {

 padding: 5px;

 margin-bottom: 5px;

 border-bottom: Solid 1px #CECECE;

 cursor: Default;

 transition: background-color 0.5s;

}



div.element:hover {

 background-color: rgba(223, 247, 255, 0.5);

}



div#liste {

 width: 500px;

 height: 250px;

 overflow: Auto;

 background-color: #FFFFFF;

 background-image:

  linear-gradient(90deg, transparent 147px, #ABCED4 147px, #ABCED4 149px, transparent 149px);

 background-size: 100% 2.2em;

 resize: vertical;

}

</style>



<script>

/*

 * ToDo-Liste

 */



// JavaScript-Funktion nach dem laden des DOMs ausführen

window.addEventListener("DOMContentLoaded", function() {



 // Dem HTML-Button [id="speichern"] eine JavaScript-Funktion zuweisen

 document.getElementById("speichern").addEventListener("click", speichern);



 // Funktion auslesen() aufrufen

 auslesen();

});



// Lokale Storage-Objekte auslesen

function auslesen() {



 // Array setzen

 let liste = [];



 // Über allen lokalen Storage-Objekten iterieren

 for (var i = 0; i < localStorage.length; i++) {



  // Enthält der Schlüssel den Inhalt: "-todo-"

  if (localStorage.key(i).includes("-todo-")) {



   // Den Schlüssel mit split("-") in ein Array zerlegen

   var teil = localStorage.key(i).split("-");



   // Deutsches Datumsformat erstellen

   var datum = teil[2] + '.' + teil[1] + '.' + teil[0];



   // Einen Kommentar zusammen mit dem Datum hinzufügen (wird zur späteren Sortierung verwendet)

   var inhalt = '<!-- ' + teil[0] + '-' + teil[1] + '-' + teil[2] + ' -->' +



    // Ein Div-Element mit der ID des Schlüssels hinzufügen

    '<div class="element" id="' + localStorage.key(i) + '">' +



    // Einen Button zum löschen des Div-Elements hinzufügen

    '<button type="button" title="Löschen" onClick="entfernen(`' + localStorage.key(i) + '`)">x</button>' +



    // Deutsches Datumsformat und den Wert vom lokalen Storage-Objekt hinzufügen

    '&emsp;' + datum  + '&emsp;' + localStorage.getItem(localStorage.key(i)) + '</div>';



   // Den Inhalt in ein Array setzen

   liste.push(inhalt);

  }

 }



 // Array sortieren

 liste.sort();



 // Das Array in einen String umwandeln und ausgeben

 document.querySelector("#liste").innerHTML = liste.join("");

}



// Lokales Storage-Objekt speichern

function speichern() {



 // Überprüfen ob alle Pflichtfelder ausgefüllt sind, ggf. eine Meldung ausgeben

 if (document.getElementById("Form").reportValidity()) {



  // Zufallszahl erzeugen z.B.: 9045

  var rnd = Math.round(Math.random() * 10000);



  // Den Schlüssel erstellen, z.B.: 2023-03-16-todo-9045

  var key = document.getElementById("key").value + '-todo-' + rnd;



  // Den Wert (Inhalt) aus dem Textarea auslesen

  var wert = document.getElementById("wert").value;



  // Das Schlüssel/Wert-Paar im lokalen Storage-Objekt speichern

  window.localStorage.setItem(key, wert);



  // Formular zurücksetzen

  document.getElementById("Form").reset();



  // Funktion auslesen() aufrufen

  auslesen();

 }

}



// Lokales Storage-Objekt entfernen

function entfernen(id) {



 // Die ID in der Browser-Konsole (zur Kontrolle) ausgeben

 console.log(id);



 // Überprüfen ob die übergebene ID des Div-Elements im DOM existiert

 if (document.getElementById(id)) {



 // Das Idem aus dem lokalen Storage-Objekt entfernen

 window.localStorage.removeItem(id);



 // Das Div-Element aus dem DOM entfernen

 document.getElementById(id).remove();

 }

}

</script>



</head>

<body>



<form id="Form">

<fieldset>

 <legend>ToDo-Liste</legend>



<p><label>Text: <br>

 <textarea id="wert" required="required"></textarea></label>

</p>



<p><label>Datum: 

 <input type="date" id="key" required="required" value="<?=date("Y-m-d");?>"></label>&emsp;

 <button type="button" id="speichern">Speichern</button>

</p>



<div id="liste"></div>



</fieldset>

</form>



</body>

</html>

➤ Gefällt Ihnen das Skript oder haben Sie einen Fehler gefunden? Dann freue ich mich auf Ihren Kommentar.

Tipps

Einfache Kalender mit PHP erstellen: PHP-Kalender können nützlich sein. Sie können so einfach sein wie das Datum anzeigen oder so komplex wie das Einrichten eines Online-Buchungssystems. Diese beiden PHP-Scripte zeigen wie Sie einfache Kalender erstellen. Wenn Sie wissen, wie das geht, können Sie dieselben Konzepte auf komplexe Kalender anwenden, die Sie möglicherweise benötigen.

RSS-Feed selbst erstellen: Ein RSS-Feed lässt sich, mit wenigen Codezeilen, einfach selbst erstellen. Diese stellen in erster Linie ein vorzügliches Instrument dar, den Bekanntheitsgrad einer Website zu steigern.

Erster Eintrag in eine MySQL-Datenbank mit PHP: Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.

10 Regeln zu Dateinamen: Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.