Task Timer: Erstellen einer Webanwendung mit HTML, CSS und JavaScript

Einführung

In diesem schrittweisen Projekt lernst du, wie du eine Task Timer-Webanwendung mit HTML, CSS und JavaScript erstellen kannst. Diese Webanwendung ermöglicht es Benutzern, Aufgaben hinzuzufügen, Timer für jede Aufgabe zu starten und zu stoppen sowie Aufgaben zu löschen. Am Ende dieses Projekts wirst du eine voll funktionsfähige Task Timer-Webanwendung mit einer modernen und benutzerfreundlichen Schnittstelle haben.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die grundlegende HTML-Struktur für die Task Timer-Webanwendung erstellst
Wie du die Webanwendung mit CSS gestylst, um sie visuell ansprechend zu gestalten
Wie du die JavaScript-Funktionalität implementierst, um Aufgaben zur Anwendung hinzuzufügen
Wie du die Timer-Funktionalität hinzufügst, um Timer für jede Aufgabe zu starten und zu stoppen
Wie du die Möglichkeit implementierst, Aufgaben aus der Anwendung zu löschen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Benutzer-Eingaben und -Validierungen in Webformularen zu behandeln
Timer dynamisch mit JavaScript zu starten und zu stoppen
Die Zeit in einem benutzerfreundlichen Format zu aktualisieren und anzuzeigen
Elemente aus dem Document Object Model (DOM) mit JavaScript zu löschen
Ein einfaches Webanwendungsprojekt zu strukturieren und zu organisieren
Buttons zu erstellen und Ereignislistener an sie anzuhängen
Eingabefelder nach der Benutzeroberfläche zu leeren
Buttons basierend auf Benutzeraktionen zu aktivieren und zu deaktivieren
Datenattribute verwenden, um Informationen in HTML-Elementen zu speichern

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/functions -.-> lab-445715{{"Erstellen einer Task Timer-Webanwendung"}} javascript/dom_select -.-> lab-445715{{"Erstellen einer Task Timer-Webanwendung"}} javascript/dom_manip -.-> lab-445715{{"Erstellen einer Task Timer-Webanwendung"}} javascript/event_handle -.-> lab-445715{{"Erstellen einer Task Timer-Webanwendung"}} javascript/dom_traverse -.-> lab-445715{{"Erstellen einer Task Timer-Webanwendung"}} end

Erstellen Sie die HTML-Struktur

Anforderungen:

Öffnen Sie die Datei index.html.
Erstellen Sie die grundlegende HTML-Struktur mit einem Titel, einem Header, einem Eingabefeld für die Task-Namen, einem Button "Aufgabe hinzufügen" und einer leeren Task-Liste (ul).

Funktionalität:

Etablieren Sie die Anfangsstruktur der Task Timer-Webanwendung.

Schritte:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task Timer</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Task Timer</h1>
      <div class="task-input">
        <input type="text" id="taskName" placeholder="Task Name" />
        <button onclick="addTask()">Add Task</button>
      </div>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Diese HTML-Struktur umfasst den Hauptcontainer, einen Header, ein Eingabefeld für die Task-Namen, einen Button "Aufgabe hinzufügen" und eine leere Task-Liste (ul), die dynamisch befüllt wird.

✨ Lösung prüfen und üben

CSS-Stillegung

Anforderungen:

Öffnen Sie die Datei style.css.
Fügen Sie CSS-Stile hinzu, um die Webanwendung visuell ansprechend zu gestalten.

Funktionalität:

Wenden Sie grundlegende Stile auf die Webanwendungselemente an.

Schritte:

body {
  font-family: "Arial", sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

.task-input {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 0;
  outline: none;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #444;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.timer-controls {
  display: flex;
  gap: 10px;
}

.timer-controls button {
  padding: 8px 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

.timer-controls button:hover {
  background-color: #444;
}

.task-time {
  font-size: 1.2rem;
  color: #555;
}

Wir werden in den nächsten Schritten die CSS-Stile hinzufügen, um eine richtige Koordination mit der JavaScript-Funktionalität sicherzustellen.

✨ Lösung prüfen und üben

Implementieren Sie die Aufgabe Hinzufügen-Funktionalität

Anforderungen:

Öffnen Sie die Datei script.js.
Erstellen Sie die addTask-Funktion, die Aufgaben zur Liste hinzufügt, wenn der Button "Aufgabe hinzufügen" angeklickt wird.

Funktionalität:

Benutzer können Aufgaben zur Task-Liste hinzufügen.

Schritte:

// Funktion, um eine neue Aufgabe hinzuzufügen
function addTask() {
  const taskNameInput = document.getElementById("taskName");
  const taskName = taskNameInput.value.trim();

  if (taskName === "") {
    alert("Bitte geben Sie einen Task-Namen ein.");
    return;
  }

  // Erstellen eines neuen Listenelements (li)
  const li = document.createElement("li");
  li.innerHTML = `
        <span>${taskName}</span>
        <div class="timer-controls">
            <button onclick="startTimer(this)">Start</button>
            <button onclick="stopTimer(this)">Stop</button>
            <button onclick="deleteTask(this)">Delete</button>
        </div>
        <span class="task-time">0:00</span>
    `;

  // Anhängen der neuen Aufgabe an die Task-Liste (ul)
  const taskList = document.getElementById("taskList");
  taskList.appendChild(li);

  // Leeren des Eingabefelds
  taskNameInput.value = "";
}

Dieser Code definiert die addTask-Funktion, die ein neues Task-Element erstellt, wenn der Button "Aufgabe hinzufügen" angeklickt wird.

✨ Lösung prüfen und üben

Implementieren Sie die Task Timer Start-Funktionalität

Anforderungen:

Erweitern Sie die Datei script.js.
Erstellen Sie die startTimer-Funktion, die Timer für Aufgaben startet, wenn der Button "Start" angeklickt wird.

Funktionalität:

Benutzer können Timer für spezifische Aufgaben starten.

Schritte:

// Funktion, um einen Timer zu starten
function startTimer(button) {
  // Holen Sie sich das übergeordnete Listenelement (li) des angeklickten Buttons
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const startTime = Date.now();

  // Deaktivieren Sie den Button "Start" und aktivieren Sie den Button "Stop"
  button.disabled = true;
  li.querySelector("button:nth-child(2)").disabled = false;

  // Aktualisieren Sie die Timeranzeige alle Sekunde
  const interval = setInterval(() => {
    const elapsedTime = new Date(Date.now() - startTime);
    taskTime.textContent = elapsedTime.toISOString().substr(14, 5);
  }, 1000);

  // Speichern Sie die Intervall-ID in einem Data-Attribut für spätere Verwendung
  li.dataset.intervalId = interval;
}

Dieser Code definiert die startTimer-Funktion, die einen Timer startet, wenn der Button "Start" angeklickt wird.

✨ Lösung prüfen und üben

Implementieren Sie die Task Timer Stop-Funktionalität

Anforderungen:

Fortsetzen Sie in der Datei script.js.
Erstellen Sie die stopTimer-Funktion, die Timer für Aufgaben stoppt, wenn der Button "Stop" angeklickt wird.

Funktionalität:

Benutzer können Timer für spezifische Aufgaben stoppen.

Schritte:

// Funktion, um einen Timer zu stoppen
function stopTimer(button) {
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const intervalId = li.dataset.intervalId;

  clearInterval(intervalId);
  button.disabled = true;
  li.querySelector("button:nth-child(1)").disabled = false;

  // Zeigen Sie die endgültige vergangene Zeit an
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

Dieser Code definiert die stopTimer-Funktion, die den Timer stoppt, wenn der Button "Stop" angeklickt wird.

✨ Lösung prüfen und üben

Implementieren Sie die Task Lösch-Funktionalität

Anforderungen:

Noch immer in der Datei script.js.
Erstellen Sie die deleteTask-Funktion, die Benutzern ermöglicht, Aufgaben zu löschen, wenn der Button "Löschen" angeklickt wird.

Funktionalität:

Benutzer können Aufgaben aus der Liste entfernen.

Schritte:

// Funktion, um eine Aufgabe zu löschen
function deleteTask(button) {
  const li = button.parentElement.parentElement;
  li.remove();
}

Dieser Code definiert die deleteTask-Funktion, die eine Aufgabe löscht, wenn der Button "Löschen" angeklickt wird.

✨ Lösung prüfen und üben

Ausführen der App

Öffnen Sie index.html in einem Webbrowser.

Testen Sie die Anwendung, indem Sie Ausgaben hinzufügen und überprüfen, ob die Ausgabenliste und die Zusammenfassung richtig aktualisiert werden.
Der Effekt der Seite ist wie folgt:

✨ Lösung prüfen und üben

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich eine Task Timer-Webanwendung mit HTML, CSS und JavaScript erstellt. Benutzer können Aufgaben hinzufügen, die Timer für jede Aufgabe starten und stoppen und Aufgaben nach Bedarf löschen. Diese Webanwendung bietet eine moderne und benutzerfreundliche Schnittstelle zum Verfolgen der Zeit, die für spezifische Aufgaben oder Projekte aufgewendet wird.