In diesem Arbeitsblatt erstellst du die Struktur einer einfachen Anwendung mithilfe von HTML. Als Beispiel-Anwendung dient eine einfache Todo-App, die uns über das Semester hinweg als Lernbeispiel dienen wird und die wir in den nächsten Wochen mit weiteren Features ausstatten werden.
Klick auf den Link unten und dann auf den "Remix to Edit" Button, der oben rechts erscheint. Damit erstellst du eine Kopie des Templates in deinem eigenen Glitch-Account. Diesen Remix kannst du als Template für die Aufgabe verwenden und du kannst direkt loslegen.
<aside> 1️⃣ Remixe das Projekt unten, um mit der Todo-App zu starten
</aside>
https://glitch.com/edit/#!/todo-app-html-template
Wir beginnen unsere App, indem wir mit HTML eine erste Struktur und erste Inhalte erstellen. Erstellt die folgenden Elemente:
<aside> ☑️ Erstelle eine Überschrift ersten Grades, um deiner App einen Titel zu verleihen.
</aside>
<aside> ☑️ Lege eine unsortierte Liste mit Todo-Items an. Füge ein paar Einträge hinzu, die als erste Beispiele für deine App dienen sollen.
</aside>
<aside> ☑️ Platziere unter der Liste einen Button "Add Task". Dieser Button soll später die Funktion übernehmen, einen neuen Task in die Liste einzufügen.
</aside>
<aside> ☑️ Fügt einen weiteren Button neben den ersten und nennt ihr "Clear List". Dieser Button soll später die alle Todo-Items auf der Liste entfernen.
</aside>
So etwa könnte das Ergebnis aussehen:
So könnte das Ergebnis ohne CSS aussehen.
Als Inspiration und falls du nicht weiter kommst gibt es zu diesem Arbeitsblatt das unten stehende Video. Das Video ist bereits etwäs älter und die Entwicklung geschieht hier noch in Codepen.