Wie kann man eine To-Do-App mit Vanilla JavaScript erstellen (und lokalem Speicher)?

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial werden wir unsere Front-End-Fähigkeiten verbessern, indem wir lernen, eine „handgemachte“ To-Do-App zu erstellen. Zum Erstellen werden keine JavaScript-Frameworks verwendet. Wir verwenden nur HTML, CSS und Vanille-JavaScript.

Was werden wir erstellen?

Hier ist ein Einführungsvideo, das die Funktionalität der JavaScript-App demonstriert, die wir erstellen werden. Benutzer können Aufgaben hinzufügen, als erledigt markieren und entfernen. Die Aufgabensummen und ihre Status werden in der Statusleiste angezeigt:

Hier ist die Demo zu Codepen, mit der Sie spielen können:

Please accept marketing cookies to load this content.

Hinweis: Dies ist kein Einführungs-Tutorial. Es wird davon ausgegangen, dass Sie mit den wichtigsten Front-End-Kenntnissen wie CSS Grid, Flexbox, ES6, JavaScript-Arrays usw. vertraut sind. Für diese Demonstration hat es auch keine Priorität, die App vollständig zugänglich zu machen.

1. Beginnen Sie mit den erforderlichen Assets

Um das Layout ein bisschen einzigartiger zu gestalten, verwenden wir einige handgefertigte SVG-Illustrationen und eine benutzerdefinierte Schriftart aus Envato Elements.

SUMMER - FONT PACK — SOMMER - FONT PACK auf Envato Elements

Es ist erwähnenswert, dass die meisten dieser Assets aus einem früheren Tutorial stammen. Tatsächlich werden wir auch viele der Positionierungstechniken verwenden, die wir in diesem Tutorial gelernt haben. Es lohnt sich also, sie zu lesen.

Formen

Wie kann man ein Responsives Handmade SVG-Formular erstellen?

George Martsoukos

How to Build a Responsive Handmade SVG Form

2. Weiter mit der Seiten-Markup

Wir beginnen mit einer SVG und einem div-Container:

1	<svg style="display:none;">...</svg>
2	<div class="container">...</div>

SVG Sprites

Wie schon in der Vergangenheit haben wir als bewährte Methode alle SVGs als symbols in einem SVG-Sprite-Container gespeichert. Anschließend rendern wir sie bei Bedarf auf dem Bildschirm, indem wir das use-Element aufrufen.

Hier ist das Markup für das SVG-Sprite:

<svg style="display:none;">
  <symbol id="input" viewBox="0 0 345.27 56.51" preserveAspectRatio="none">...</symbol>
  <symbol id="checkbox_empty" viewBox="0 0 33.18 33.34">...</symbol>
  <symbol id="checkmark" viewBox="0 0 37.92 33.3" preserveAspectRatio="none">...</symbol>
  <symbol id="button" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">...</symbol>
  <symbol id="close" viewBox="0 0 29.71 30.59">...</symbol>
  <symbol id="stats" viewBox="0 0 998.06 602.62" preserveAspectRatio="none">...</symbol>    
</svg>

Beachten Sie das preserveAttributerveAspectRatio="none", das wir den meisten Abbildungen beigefügt haben. Wir haben dies getan, da unsere Symbole, wie wir später sehen werden, skaliert werden und ihre ursprünglichen Abmessungen verlieren.

Container

Der Container enthält ein Formular, ein div-Element und eine leere geordnete Liste:

<div class="container">
  <form class="todo-form">...</form>
  <div class="todo-stats">...</div>
  <ol class="todo-list"></ol>
</div>

Innerhalb des Formulars haben wir eine Eingabe- und eine Senden-Schaltfläche zusammen mit den zugehörigen SVGs:

<form class="todo-form">
  <div class="form-wrapper">
    <input type="text" name="name" autofocus>
    <svg>
      <use xlink:href="#input"></use>      
    </svg>
  </div>
  <div class="form-wrapper">
    <button type="submit">Add new task</button>
    <svg>
      <use xlink:href="#button"></use>
    </svg>
  </div>
</form>

Beachten Sie das name-Attribut, das wir dem Eingabefeld hinzugefügt haben. Später verwenden wir dieses Attribut, um nach dem Absenden des Formulars auf den Eingabewert zuzugreifen.

Hinweis: In unserer Demo funktioniert das autofocus-Attribut des Textfelds nicht. Tatsächlich wird der folgende Fehler ausgegeben, den Sie sehen können, wenn Sie Ihre Browserkonsole öffnen:

The cross-origin error due to the autofocus attribute

Wenn Sie diese App jedoch lokal ausführen (nicht als Codepen-Projekt), tritt dieses Problem nicht auf. Alternativ können Sie den Fokus über JavaScript festlegen.

Innerhalb des div platzieren wir drei verschachtelte divs und das zugehörige SVG. In diesem Abschnitt verfolgen wir die Gesamtzahl der verbleibenden und erledigten Aufgaben:

<div class="todo-stats">
  <div class="total-tasks">
    Total Tasks: <span>0</span>
  </div>
  <div class="completed-tasks">
    Completed Tasks: <span>0</span>
  </div>
  <div class="remaining-tasks">
    Remaining Tasks: <span>0</span>
  </div>
  <svg>
    <use xlink:href="#stats"></use>
  </svg>
</div>

Schließlich werden die Elemente der geordneten Liste dynamisch über JavaScript hinzugefügt.

3. Definieren Sie einige grundlegende Stile

Wenn das Markup fertig ist, fahren wir mit einigen Reset-Stilen fort:

@font-face {
  font-family: "Summer";
  src: url(SummerFont-Regular.woff);
}
 
@font-face {
  font-family: "Summer Bold";
  src: url(SummerFont-Bold.woff);
}
 
:root {
  --white: #fff;
}
 
* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}
 
input,
button {
  font-family: inherit;
  font-size: 100%;
  background: none;
}
 
[type="checkbox"] {
  position: absolute;
  left: -9999px;
}
 
button,
label {
  cursor: pointer;
}
  
ol {
  list-style: none;
}
 
body {
  font: 28px/1.2 "Summer";
  margin: 1.5rem 0;
}

4. Legen Sie die Hauptstile fest

Lassen Sie uns nun die Hauptstile unserer App diskutieren.

Containerstile

Der Container hat eine maximale Breite mit horizontal zentriertem Inhalt:

.container {
  max-width: 700px;
  padding: 0 10px;
  margin: 0 auto;
}

Formularstile

Auf kleinen Bildschirmen werden alle Formularelemente gestapelt:

In Ansichtsfenstern mit einer Breite von 600 Pixel und mehr ändert sich das Formularlayout jedoch wie folgt:

The form layout on medium screens and above

Beachten wir zwei Dinge:

In weiten Ansichtsfenstern ist die Eingabe doppelt so groß wie die Schaltfläche.
Die SVGs sind absolut positionierte Elemente und befinden sich unter ihrer angrenzenden Formularsteuerung. Eine ausführlichere Erklärung finden Sie in diesem vorherigen Tutorial.

Hier sind die Stile für diesen Abschnitt:

/*CUSTOM VARIABLES HERE*/

.todo-form .form-wrapper {
  position: relative;
}

.todo-form input,
.todo-form button {
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 15px;
}

.todo-form svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.todo-form button {
  color: var(--white);
  text-transform: uppercase;
}

@media screen and (min-width: 600px) {
  .todo-form {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 5px;
  }
}

Statistik Stile

Schauen wir uns als nächstes die Statusleiste an, die uns einen kurzen Bericht über die Gesamtzahl der Aufgaben gibt.

Auf kleinen Bildschirmen sieht es wie folgt aus:

Bei Ansichtsfenstern mit einer Breite von 600 Pixel und mehr sollte sich dies jedoch wie folgt ändern:

The stats layout on medium screens and above

Beachten wir zwei Dinge:

In breiten Ansichtsfenstern haben alle untergeordneten div-Elemente die gleiche Breite.
Ähnlich wie bei den vorherigen SVGs ist auch diese absolut positioniert und fungiert als Hintergrundbild, das den gesamten Abschnitt abdeckt.

Die verwandten Stile:

/*CUSTOM VARIABLES HERE*/

.todo-stats {
  position: relative;
  text-align: center;
  padding: 5px 10px;
  margin: 10px 0;
  color: var(--white);
}

.todo-stats > div {
  position: relative;
  z-index: 1;
}

.todo-stats svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 600px) {  
  .todo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Aufgabenstile

Das Aufgabenlayout, das wir im nächsten Abschnitt dynamisch generieren, sieht folgendermaßen aus:

Jede Aufgabe, die durch ein li dargestellt wird, besteht aus zwei Teilen.

Im ersten Teil wird ein Kontrollkästchen zusammen mit dem Aufgabennamen angezeigt. Im zweiten Teil sehen Sie eine Schaltfläche zum Löschen, um die Aufgabe zu entfernen.

Hier sind die verwandten Stile:

.todo-list li {
  display: grid;
  align-items: baseline;
  grid-template-columns: auto 20px;
  grid-column-gap: 10px;
  padding: 0 10px;
}

.todo-list li + li {
  margin-top: 10px;
}

Wenn eine Aufgabe unvollständig ist, wird ein leeres Kontrollkästchen angezeigt. Wenn eine Aufgabe als erledigt markiert ist, wird ein Häkchen angezeigt. Zusätzlich erhält der Name eine Deckkraft von 50% sowie eine Linie durch ihn.

Hier sind die Stile, die für dieses Verhalten verantwortlich sind:

.todo-list .checkbox-wrapper {
  display: flex;
  align-items: baseline;
}

.todo-list .checkbox-wrapper label {
  display: grid;
  margin-right: 10px;
}

.todo-list .checkbox-wrapper svg {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
}

.todo-list .checkbox-wrapper .checkmark {
  display: none;
}

.todo-list [type="checkbox"]:checked + label .checkmark {
  display: block;
}

.todo-list [type="checkbox"]:checked ~ span {
  text-decoration: line-through;
  opacity: 0.5;
}

Im Folgenden finden Sie die Stile für die Schaltfläche "Löschen":

.todo-list .remove-task {
  display: flex;
  padding: 2px;
}

.todo-list .remove-task svg {
  width: 16px;
  height: 16px;
}

5. Fügen Sie das JavaScript hinzu

An diesem Punkt sind wir bereit, die Kernfunktionalität unserer App zu erstellen. Lassen Sie es uns tun!

Beim Einreichen des Formulars

Jedes Mal, wenn ein Benutzer das Formular durch Drücken der Eingabetaste oder der Schaltfläche "Senden" sendet, gehen wir wie folgt vor:

Verhindern Sie das Senden des Formulars, wodurch ein erneutes Laden der Seite verhindert wird.
Holen Sie sich den Wert, der im Eingabefeld enthalten ist.
Angenommen, das Eingabefeld ist nicht leer, erstellen wir ein neues Objektliteral, das die Aufgabe darstellt. Jede Aufgabe hat eine eindeutige ID und einen Namen und ist standardmäßig aktiv (nicht abgeschlossen).
Fügen Sie diese Aufgabe dem tasks-Array hinzu.
Speichern Sie das Array im lokalen Speicher. Der lokale Speicher unterstützt nur Zeichenfolgen. Dazu müssen wir die Methode JSON.stringify() verwenden, um die Objekte im Array in Zeichenfolgen zu konvertieren.
Rufen Sie die Funktion createTask() auf, um die Aufgabe auf dem Bildschirm visuell darzustellen.
Löschen Sie das Formular.
Konzentrieren Sie sich auf das Eingabefeld.

Hier ist der relevante Code:

const todoForm = document.querySelector(".todo-form");
let tasks = [];

todoForm.addEventListener("submit", function(e) {
  // 1
  e.preventDefault();
  // 2
  const input = this.name;
  const inputValue = input.value;
  
  if (inputValue != "") {
    // 3
    const task = {
      id: new Date().getTime(),
      name: inputValue,
      isCompleted: false
    };
    // 4
    tasks.push(task);
    // 5
    localStorage.setItem("tasks", JSON.stringify(tasks));
    // 6
    createTask(task);
    // 7
    todoForm.reset();
  }
  // 8
  input.focus();
}); 

Erstellen Sie eine Aufgabe

Die Funktion createTask() ist für die Erstellung des Markups der Aufgabe verantwortlich.

Hier ist zum Beispiel die Struktur für die Aufgabe "Go for a walk":

Zwei Dinge sind hier wichtig:

Wenn die Aufgabe abgeschlossen ist, wird das Häkchen angezeigt.
Wenn die Aufgabe nicht abgeschlossen ist, erhält das span-Element das Attribut contenteditable. Dieses Attribut gibt uns die Möglichkeit, seinen Namen zu bearbeiten/aktualisieren.

Unten ist die Syntax für diese Funktion:

function createTask(task) {
  const taskEl = document.createElement("li");
  taskEl.setAttribute("id", task.id);
  const taskElMarkup = `
    <div class="checkbox-wrapper">
      <input type="checkbox" id="${task.name}-${task.id}" name="tasks" ${
    task.isCompleted ? "checked" : ""
  }>
      <label for="${task.name}-${task.id}">
        <svg class="checkbox-empty">
          <use xlink:href="#checkbox_empty"></use>
        </svg>
        <svg class="checkmark">
          <use xlink:href="#checkmark"></use>
        </svg>
      </label>
      <span ${!task.isCompleted ? "contenteditable" : ""}>${task.name}</span>
    </div>
    <button class="remove-task" title="Remove ${task.name} task">
      <svg>
        <use xlink:href="#close"></use>
      </svg>
    </button>
  `;
  taskEl.innerHTML = taskElMarkup;
  todoList.appendChild(taskEl);
  countTasks();
}

Aktualisieren Sie eine Aufgabe

Eine Aufgabe kann auf zwei verschiedene Arten aktualisiert werden:

Durch Ändern des Status von "unvollständig" in "abgeschlossen" und umgekehrt.
Durch Ändern des Namens für den Fall, dass die Aufgabe unvollständig ist. Denken Sie daran, dass in diesem Fall das span-Element das Attribut contenteditable hat.

Um diese Änderungen im Auge zu behalten, nutzen wir das input-Ereignis. Dies ist ein akzeptables Ereignis für uns, da es sowohl für input-Elemente als auch für Elemente mit aktiviertem contenteditable gilt.

Das Schwierige ist, dass wir dieses Ereignis nicht direkt an die Zielelemente (Kontrollkästchen, span) anhängen können, da diese dynamisch erstellt werden und beim Laden der Seite nicht Teil des DOM sind.

Dank der Ereignisdelegation hängen wir das input-Ereignis an die übergeordnete Liste an, die Teil des anfänglichen Markups ist. Anschließend überprüfen wir über die target-Eigenschaft dieses Ereignisses die Elemente, bei denen das Ereignis aufgetreten ist, und rufen die Funktion updateTask() auf:

1	todoList.addEventListener("input", (e) => {
2	const taskId = e.target.closest("li").id;
3	updateTask(taskId, e.target);
4	});

In der Funktion updateTask() führen wir die folgenden Schritte aus:

Besorgen Sie sich die Aufgabe, die aktualisiert werden muss.
Überprüfen Sie das Element, das das Ereignis ausgelöst hat. Wenn das Element das Attribut contenteditable hat (d. h. Es ist das span-Element), setzen wir den Namen der Aufgabe gleich dem Textinhalt des span.
Andernfalls (d. h. Es ist das Kontrollkästchen) schalten wir den Status der Aufgabe und das checked-Attribut um. Außerdem schalten wir das contenteditable-Attribut der angrenzenden span um.
Aktualisieren Sie den Wert des tasks-Schlüssels im lokalen Speicher.
Rufen Sie die Funktion countTasks() auf.

Hier ist die Syntax für diese Funktion:

function updateTask(taskId, el) {
  // 1
  const task = tasks.find((task) => task.id === parseInt(taskId));

  if (el.hasAttribute("contentEditable")) {
    // 2
    task.name = el.textContent;
  } else {
    // 3
    const span = el.nextElementSibling.nextElementSibling;
    task.isCompleted = !task.isCompleted;
    if (task.isCompleted) {
      span.removeAttribute("contenteditable");
      el.setAttribute("checked", "");
    } else {
      el.removeAttribute("checked");
      span.setAttribute("contenteditable", "");
    }
  }
  // 4
  localStorage.setItem("tasks", JSON.stringify(tasks));
  // 5
  countTasks();
}

Entfernen Sie eine Aufgabe

Wir können eine Aufgabe über die Schaltfläche "Schließen" entfernen.

Ähnlich wie beim Aktualisierungsvorgang können wir dieser Schaltfläche kein Ereignis direkt zuordnen, da sie sich beim Laden der Seite nicht im DOM befindet.

Dank der Ereignisdelegation fügen wir der übergeordneten Liste ein click-Ereignis hinzu und führen die folgenden Aktionen aus:

Überprüfen Sie, ob das Element, auf das geklickt wird, die Schaltfläche "Schließen" oder die untergeordnete SVG-Datei ist.
In diesem Fall ermitteln wir die id des übergeordneten Listenelements.
Übergeben Sie diese id an die Funktion removeTask().

Hier ist der relevante Code:

const todoList = document.querySelector(".todo-list");

todoList.addEventListener("click", (e) => {
  // 1
  if (
    e.target.classList.contains("remove-task") ||
    e.target.parentElement.classList.contains("remove-task")
  ) {
    // 2
    const taskId = e.target.closest("li").id;
    // 3
    removeTask(taskId);
  }
});

In der Funktion removeTask() führen wir die folgenden Schritte aus:

Entfernen Sie die zugehörige Aufgabe aus dem tasks-Array.
Aktualisieren Sie den Wert des tasks-Schlüssels im lokalen Speicher.
Entfernen Sie das zugehörige Listenelement.
Rufen Sie die Funktion countTasks() auf.

Hier ist die Syntax für diese Funktion:

function removeTask(taskId) {
  // 1
  tasks = tasks.filter((task) => task.id !== parseInt(taskId));
  // 2
  localStorage.setItem("tasks", JSON.stringify(tasks));
  // 3
  document.getElementById(taskId).remove();
  // 4
  countTasks();
}

Aufgaben zählen

Wie bereits erwähnt, enthalten viele der oben genannten Funktionen die Funktion countTask().

Seine Aufgabe besteht darin, die Aufgaben auf Änderungen (Hinzufügungen, Aktualisierungen, Löschungen) zu überwachen und den Inhalt der zugehörigen Elemente zu aktualisieren.

Hier ist seine Unterschrift:

const totalTasks = document.querySelector(".total-tasks span");
const completedTasks = document.querySelector(".completed-tasks span");
const remainingTasks = document.querySelector(".remaining-tasks span");

function countTasks() {
  totalTasks.textContent = tasks.length;
  const completedTasksArray = tasks.filter((task) => task.isCompleted === true);
  completedTasks.textContent = completedTasksArray.length;
  remainingTasks.textContent = tasks.length - completedTasksArray.length;
}

Verhindern Sie das Hinzufügen neuer Zeilen

Jedes Mal, wenn ein Benutzer den Namen einer Aufgabe aktualisiert, sollte er keine neuen Zeilen durch Drücken der Eingabetaste erstellen können.

Um diese Funktionalität zu deaktivieren, nutzen wir erneut die Ereignisdelegation und hängen das keydown-Ereignis wie folgt an die Liste an:

todoList.addEventListener("keydown", function (e) {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
});

Beachten Sie, dass in diesem Szenario nur die span-Elemente dieses Ereignis auslösen können, sodass keine zusätzliche Prüfung wie folgt erforderlich ist:

1	if (e.target.hasAttribute("contenteditable") && e.keyCode === 13) {
2	e.preventDefault();
3	}

Daten beim Laden der Seite beibehalten

Wenn wir den Browser schließen und zum Demo-Projekt navigieren, verschwinden unsere Aufgaben.

Aber warten Sie, das ist nicht 100% wahr! Denken Sie daran, dass wir bei jeder Aufgabenmanipulation auch das tasks-Array im lokalen Speicher speichern. Um beispielsweise in Chrome die lokalen Speicherschlüssel und -werte anzuzeigen, klicken Sie auf die Registerkarte Anwendung, erweitern Sie das Menü Lokaler Speicher und klicken Sie schließlich auf eine Domäne, um deren Schlüssel-Wert-Paare anzuzeigen.

In meinem Fall sind hier die Werte für den tasks-Schlüssel:

Um diese Aufgaben anzuzeigen, müssen wir sie zunächst aus dem lokalen Speicher abrufen. Dazu verwenden wir die Methode JSON.parse(), mit der die Zeichenfolgen wieder in JavaScript-Objekte konvertiert werden.

Als Nächstes speichern wir alle Aufgaben im vertrauten tasks-Array. Beachten Sie, dass dieses Array leer ist, wenn sich keine Daten im lokalen Speicher befinden (z. B. beim ersten Besuch der App). Dann müssen wir das Array durchlaufen und für jede Aufgabe die Funktion createTask() aufrufen. Und das ist alles!

Das entsprechende Code-Snippet:

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

if (localStorage.getItem("tasks")) {
  tasks.map((task) => {
    createTask(task);
  });
}

Schlussfolgerung

Puh! Vielen Dank, dass Sie diese lange Reise mitgemacht haben. Hoffentlich haben Sie heute einige neue Kenntnisse gewonnen, die Sie auf Ihre eigenen Projekte anwenden können.

Erinnern wir uns daran, was wir gebaut haben:

Please accept marketing cookies to load this content.

Ohne Zweifel ist das Erstellen einer solchen App mit einem JavaScript-Framework möglicherweise stabiler, einfacher und effizienter (das Neulackieren des DOM ist teuer). Wenn Sie jedoch wissen, wie Sie diese Art von Übung mit einfachem JavaScript lösen können, erhalten Sie einen soliden Überblick über die Grundlagen und werden zu einem besseren JavaScript-Entwickler.

Lassen Sie mich vor dem Abschluss zwei Ideen zur Erweiterung dieser Übung vorschlagen:

Verwenden Sie die HTML-Drag & Drop-API oder eine JavaScript-Bibliothek wie Sortable.js, um die Aufgaben neu zu ordnen.
Speichern Sie Daten(Aufgaben) in der Cloud anstelle des Browsers. Ersetzen Sie beispielsweise den lokalen Speicher durch eine Echtzeitdatenbank wie Firebase.

Wie immer vielen Dank fürs Lesen!

Weitere Vanilla JavaScript Apps

Wenn Sie lernen möchten, wie Sie kleine Apps mit einfachem JavaScript erstellen, lesen Sie die folgenden Tutorials: