Mission 3: Programmiere eine App

In Mission 3 lernst du, wie du mit HTML und JavaScript eine App programmieren kannst. Das Wort App ist eine Abkürzung für Application (auf Deutsch: „Anwendung“). Das ist ein Programm, das einem Menschen helfen soll, eine bestimmte Aufgabe zu erledigen. In dieser Mission programmierst du eine App, mit der man eine Aufgabenliste verwalten kann. Der Benutzer der App kann eine Aufgabenliste aufbauen, indem er neue Aufgaben einfügt. Wenn er eine Aufgabe erledigt hat, kann er sie durch Anklicken aus der Aufgabenliste entfernen.

Als erstes lernst du, wie man einen Button (eine Schaltfläche) erstellt. Dann verwendest du zwei Programmierschnittstellen (Application Program Interfaces oder kurz APIs), das DOM (Document Object Model) und localStorage. Diese APIs ermöglichen dir, eine Webseite zu programmieren, auf der Dinge erscheinen und verschwinden können und die Daten speichern kann.

CODE SKILLS

So erstellst du einen Button

Verwende das -Tag, um einen Button zu erstellen, den man anklicken kann.

Hole dir den Code

CODE SKILLS

Buttons führen den Code aus

Verwende das onClick-Attribut und sorge dafür, dass ein Alert erscheint, wenn man den Button anklickt.

Hole dir den Code

CODE SKILLS

Methoden und Eigenschaften

Finde und ändere die Inhalte von HTML-Elementen mit der DOM-API.

Hole dir den Code

CODE SKILLS

Neue HTML-Elemente einfügen

Verwende das DOM um neue HTML-Elemente zu erzeugen und in die App einzufügen.

Hole dir den Code

CODE SKILLS

Die Basis-App erstellen

Erstelle die Vorlage für die Basisversion der App.

Hole dir den Code

CODE SKILLS

Ein HTML-Element entfernen

Verwende die DOM-API, um ein HTML-Element aus deiner App zu entfernen

Hole dir den Code

CODE SKILLS

Mehrere HTML-Elemente entfernen

Verwende die Methode removeChild, um mehrere HTML-Elemente aus deiner Webseite zu entfernen.

Hole dir den Code

CODE SKILLS

Die API localStorage verwenden

Speichere Daten auf deinem Computer mit der API localStorage.

Hole dir den Code

Deine Aufgabe: Eine APP für eine Aufgabenliste

Verwende deine HTML- und JavaScript-Kenntnisse, um eine digitale Aufgabenliste für Professor Bairstone zu programmieren. Du benötigst die APIs DOM und localStorage.

Hole dir den Code