Beginnen Sie gerade erst Ihre Reise in die Programmierung? Mach es dir gemütlich und schnüre deine Hausschuhe fest – es wird lustig 😄
🤖 IN Anlage Kodik Wir bringen Ihnen bei, Code auf freundliche Weise zu schreiben: Schritt für Schritt, mit Projekten, Tipps und Unterstützung.
Und diese To-Do-Liste ist nur eines der ersten Projekte, die Sie auf jeden Fall meistern werden! 🚀
🚀 Warum ist eine To-Do-Liste das perfekte erste Projekt?
To-Do-Liste ist eines der einfachsten und beliebtesten Projekte, mit denen jeder, der Webentwicklung lernt, beginnt. Es trainiert die wichtigsten Fähigkeiten:
Arbeit mit HTML-Struktur (DOM),
Interaktion mit dem Benutzer (Ereignisse),
Logik, Bedingungen und ein paar Schleifen,
und vor allem macht es Spaß und ist anschaulich! 🎯
Was brauchst du?
HTML — um die Struktur festzulegen: Eingabefeld, Schaltfläche, Aufgabenliste.
CSS — für die Grundausstattung (kann minimal sein).
JavaScript - damit alles funktioniert: Hinzufügen, Klicks, Aktionen.
📦 Schritt 1: Layout (HTML)
Zuerst erstellen wir eine einfache HTML-Seite, die Folgendes enthält:
Feld zur Eingabe einer neuen Aufgabe;
Schaltfläche, um sie zur Liste hinzuzufügen;
leere Liste, in der Aufgaben angezeigt werden.
Es ist wie ein leeres Notizbuch, in das du Aufgaben schreibst - nur im Browser.
<div class="todo-container">
<h1>Мои задачи</h1>
<input id="taskInput" type="text" placeholder="New task..." />
<button id="addBtn">Добавить</button>
<ul id="taskList"></ul>
</div>
🎨 Schritt 2: Stile (CSS)
Mit CSS kannst du:
Ränder und Ausrichtung festlegen;
den Hintergrund angenehm gestalten;
die Ecken der Elemente abrunden;
und einfach dafür sorgen, dass deine App ordentlich aussieht.
Dies ist kein obligatorischer Schritt, aber er hilft Ihnen, ein Gefühl dafür zu bekommen, was Sie tun dieses Produktund nicht nur eine Reihe von Codes.
.todo-container {
max-width: 400px;
margin: auto;
padding: 20px;
background: #f9f9f9;
border-radius: 12px;
}🧠 Schritt 3: JavaScript — zum Leben erwecken!
Hier beginnt der interessanteste Teil 💡
Wir werden den Button "lehren", eine Aufgabe hinzuzufügen:
Wenn der Benutzer auf die Schaltfläche klickt, übernimmt JavaScript den Text aus dem Eingabefeld.
Erstellt ein neues Listenelement (
li) und fügt diesen Text ein.Fügt dieses Element der Liste (
ul) auf der Seite hinzu.
Dann „bringen wir“ den Aufgaben bei, auf einen Klick zu reagieren:
Wenn Sie darauf klicken, wird die Aufgabe durchgestrichen — so zeigen wir, dass sie abgeschlossen ist.
Optional - mit einem Doppelklick können Sie es löschen.
All dies geschieht mit Hilfe von Ereignishandler — spezielle Funktionen, die auf Benutzeraktionen reagieren.
const addBtn = document.getElementById("addBtn");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
addBtn.addEventListener("click", () => {
const taskText = taskInput.value.trim();
if (taskText === "") return;
const li = document.createElement("li");
li.textContent = taskText;
li.addEventListener("click", () => {
li.classList.toggle("done");
});
taskList.appendChild(li);
taskInput.value = "";
});🧩 Mini-Übung: Aufgaben löschen hinzufügen
Versuche, das Projekt zu vervollständigen — Möglichkeit hinzufügen Aufgabe löschen Doppelklick:
li.addEventListener("dblclick", () => {
li.remove();
});Jetzt ist deine To-Do-Liste noch praktischer 💥
Wir freuen uns, dich in der App zu sehen Kodika, wo das Erlernen der Programmierung einfacher und schneller ist.
Und wir haben auch Telegram-Community, wo Sie Fragen stellen, Ihren Code zeigen und einfach Unterstützung von anderen Neulingen und erfahrenen Entwicklern finden können 👨💻👩💻
Programmieren ist interessant, besonders wenn man dabei Kodik und Freunde!