Erstellen Sie eine Todo-Listen-Website-CSS-Tutorial-php.cn

Build a Todo List Website

Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: eine Todo List-Anwendung. Dieses Projekt ist perfekt für alle, die ihre JavaScript-Kenntnisse verbessern möchten, indem sie an einem praktischen und weit verbreiteten Tool arbeiten. Unabhängig davon, ob Sie gerade erst anfangen oder Ihre Fähigkeiten verfeinern möchten, ist das Erstellen einer Todo-Liste eine großartige Möglichkeit, den Umgang mit Benutzereingaben, die Verwaltung von Daten und die dynamische Aktualisierung des DOM zu erlernen.

Projektübersicht

Die Anwendung Todo-Liste ist ein einfaches, aber leistungsstarkes Tool, mit dem Benutzer ihre Aufgaben effizient verwalten können. Es verfügt über eine intuitive Benutzeroberfläche, über die Benutzer Aufgaben hinzufügen, bearbeiten und löschen, sie als erledigt markieren und Aufgaben basierend auf ihrem Status filtern können. Dieses Projekt ist eine großartige Möglichkeit, die Kernkonzepte der Webentwicklung zu verstehen, einschließlich Ereignisbehandlung und Datenpersistenz mithilfe von localStorage.

Merkmale

Benutzerfreundliche Oberfläche: Ein klares und intuitives Design, das die Aufgabenverwaltung einfach macht.
Aufgaben hinzufügen, bearbeiten und löschen: Voll funktionsfähige Steuerelemente zur effektiven Verwaltung Ihrer Aufgaben.
Aufgaben als erledigt markieren: Markieren Sie Aufgaben ganz einfach als erledigt und filtern Sie sie nach ihrem Status.
Persistente Daten: Alle Aufgaben werden im localStorage gespeichert, sodass Ihre Liste auch nach dem Aktualisieren der Seite intakt bleibt.
Responsives Design: Das Layout ist responsiv und funktioniert nahtlos sowohl auf Desktop- als auch auf Mobilgeräten.

Verwendete Technologien

HTML: Strukturiert die Webseite und Eingabeelemente.
CSS: Gestaltet die Benutzeroberfläche so, dass sie ein benutzerfreundliches Erlebnis bietet.
JavaScript: Verwaltet die Logik zum Hinzufügen, Bearbeiten, Löschen und Filtern von Aufgaben sowie zum Verwalten von Daten in localStorage.

Projektstruktur

Hier ein kurzer Überblick über die Projektstruktur:

Todo-List/
├── index.html
├── styles.css
└── script.js

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für die Todo-Listen-Anwendung.
styles.css: Enthält CSS-Stile, um das Erscheinungsbild und die Reaktionsfähigkeit der Todo-Liste zu verbessern.
script.js: Verwaltet die Anwendungslogik, einschließlich Aufgabenverwaltung und LocalStorage-Vorgänge.

Installation

Um mit dem Todo-Listen-Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

git clone https://github.com/abhishekgurjar-in/Todo-List.git

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Todo-List
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in Ihrem Webbrowser, um mit der Verwendung der Todo-Listen-Anwendung zu beginnen.

Verwendung

Öffnen Sie die Website in einem Webbrowser.
Fügen Sie eine Aufgabe hinzu, indem Sie etwas in das Eingabefeld eingeben und die Eingabetaste drücken.
Aufgaben bearbeiten oder löschenmit den bereitgestellten Optionen.
Aufgaben als erledigt markieren indem Sie das entsprechende Kontrollkästchen aktivieren.
Filtern Sie Aufgaben nach ihrem Status, indem Sie die Filteroptionen oben in der Liste verwenden.
Löschen Sie alle Aufgaben, indem Sie auf die Schaltfläche „Alle löschen“ klicken, um neu zu beginnen.

Code-Erklärung

HTML

Die Datei index.html stellt die Struktur für die Todo-Listen-Anwendung bereit, einschließlich des Eingabefelds zum Hinzufügen von Aufgaben, Schaltflächen zum Filtern von Aufgaben und einer Liste zum Anzeigen der Aufgaben. Hier ein kurzer Überblick:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>ToDo</title>
  </head>
  <body>
    <div class="main">
      <div id="logo">
        <img
          src="./logo/175e8acd1b69064c1fafe52ed5b12019-removebg-preview.png"
          alt=""
        />
      </div>
      <div class="wrapper">
        <div class="task-input">
          <input type="text" placeholder="Add a new task" />
        </div>

        <div class="controls">
          <div class="filters">
            <span id="all" class="active">All</span>
            <span id="pending">Pending</span>
            <span id="completed">Completed</span>
          </div>
          <button class="clear-btn">Clear All</button>
        </div>
        <ul class="task-box"></ul>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Nach dem Login kopieren

CSS

Die Datei „styles.css“ formatiert die Todo-List-Anwendung und sorgt so für ein sauberes und ansprechendes Design. Hier sind einige wichtige Stile:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #fff;
}

.main {
  min-height: 85vh;
}

#logo {
  width: 100%;
  height: 7vh;
  display: flex;
  align-items: bottom;
  justify-content: center;
}

img {
  width: 300px;
  height: 222px;
}

::selection {
  color: #fff;
  background: #1e293b;
}

.wrapper {
  max-width: 405px;
  background: #64d1ef;
  margin: 137px auto;
  padding: 28px 0 30px;
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.401);
}

.task-input {
  height: 52px;
  padding: 0 25px;
  position: relative;
}

.task-input input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  border-radius: 5px;
  padding: 0 20px 0 10px;
  border: 1px solid #7a7a7a;
}

.task-input input:focus,
.task-input input.active {
  padding-left: 10px;
  border: 2px solid #1e293b;
}

.task-input input::placeholder {
  color: #bfbfbf;
}

.controls,
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.controls {
  padding: 18px 25px;
  border-bottom: 1px solid #000000a4;
}

.filters span {
  margin: 0 8px;
  font-size: 17px;
  color: #444;
  cursor: pointer;
}

.filters span:first-child {
  margin-left: 0;
}

.filters span.active {
  color: #101216;
}

.controls .clear-btn {
  border: none;
  opacity: 0.6;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 4px;
  background: #1e293b;
  letter-spacing: 0.3px;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.clear-btn.active {
  opacity: 0.9;
  pointer-events: auto;
}

.clear-btn:active {
  transform: scale(0.93);
}

.task-box {
  margin-top: 20px;
  margin-right: 5px;
  padding: 0 20px 10px 25px;
}

.task-box.overflow {
  overflow-y: auto;
  max-height: 300px;
}

.task-box::-webkit-scrollbar {
  width: 5px;
}

.task-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.task-box::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 25px;
}

.task-box .task {
  list-style: none;
  font-size: 17px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  align-items: flex-start;
  border-bottom: 1px solid #2c2a2a;
}

.task-box .task:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.task-box .task label {
  display: flex;
  align-items: flex-start;
}

.task-box label input {
  margin-top: 7px;
  accent-color: #1e293b;
}

.task-box label p {
  user-select: none;
  margin-left: 12px;
  word-wrap: break-word;
}

.task label p.checked {
  text-decoration: line-through;
}

.task-box .settings {
  position: relative;
}

.settings :where(i, li) {
  cursor: pointer;
}

.settings .task-menu {
  z-index: 10;
  right: -5px;
  bottom: -65px;
  padding: 5px 0;
  background: #fff;
  position: absolute;
  border-radius: 4px;
  transform: scale(0);
  transform-origin: top right;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.task-box .task:last-child .task-menu {
  bottom: 0;
  transform-origin: bottom right;
}

.task-box .task:first-child .task-menu {
  bottom: -65px;
  transform-origin: top right;
}

.task-menu.show {
  transform: scale(1);
}

.task-menu li {
  height: 25px;
  font-size: 16px;
  margin-bottom: 2px;
  padding: 17px 15px;
  cursor: pointer;
  justify-content: flex-start;
}

.task-menu li:last-child {
  margin-bottom: 0;
}

.settings li:hover {
  background: #f5f5f5;
}

.settings li i {
  padding-right: 8px;
}

.footer {
  text-align: center;
  margin: 40px;
}

@media (max-width: 400px) {
  body {
    padding: 0 10px;
  }

  .wrapper {
    padding: 20px 0;
  }

  .filters span {
    margin: 0 5px;
  }

  .task-input {
    padding: 0 20px;
  }

  .controls {
    padding: 18px 20px;
  }

  .task-box {
    margin-top: 20px;
    margin-right: 5px;
    padding: 0 15px 10px 20px;
  }

  .task label input {
    margin-top: 4px;
  }
}

Nach dem Login kopieren

JavaScript

Die Datei script.js enthält die Logik zum Hinzufügen, Bearbeiten, Löschen und Filtern von Aufgaben. Hier ein Überblick über die Hauptfunktionen:

const taskInput = document.querySelector(".task-input input"),
    filters = document.querySelectorAll(".filters span"),
    clearAll = document.querySelector(".clear-btn"),
    taskBox = document.querySelector(".task-box");

let editId,
    isEditTask = false,
    todos = JSON.parse(localStorage.getItem("todo-list"));

// Filter tasks based on status (all, completed, pending)
filters.forEach(btn => {
    btn.addEventListener("click", () => {
        document.querySelector("span.active").classList.remove("active");
        btn.classList.add("active");
        showTodo(btn.id);
    });
});

function showTodo(filter) {
    let liTag = "";
    if (todos) {
        todos.forEach((todo, id) => {
            let completed = todo.status == "completed" ? "checked" : "";
            if (filter == todo.status || filter == "all") {
                liTag += `<li class="task">
                    <label for="${id}">
                        <input onclick="updateStatus(this)" type="checkbox" id="${id}" ${completed}>
                        <p class="${completed}">${todo.name}</p>
                    </label>
                    <div class="settings">
                        <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
                        <ul class="task-menu">
                            <li onclick='editTask(${id}, "${todo.name}")'><i class="uil uil-pen"></i>Edit</li>
                            <li onclick='deleteTask(${id}, "${filter}")'><i class="uil uil-trash"></i>Delete</li>
                        </ul>
                    </div>
                </li>`;
            }
        });
    }

    taskBox.innerHTML = liTag || `<span>You don't have any task here</span>`;
    let checkTask = taskBox.querySelectorAll(".task");
    !checkTask.length ? clearAll.classList.remove("active") : clearAll.classList.add("active");
    taskBox.offsetHeight >= 300 ? taskBox.classList.add("overflow") : taskBox.classList.remove("overflow");
}

showTodo("all"); // Show all tasks by default

// Function to show the menu for task options
function showMenu(selectedTask) {
    let menuDiv = selectedTask.parentElement.lastElementChild;
    menuDiv.classList.add("show");
    document.addEventListener("click", e => {
        if (e.target.tagName != "I" || e.target != selectedTask) {
            menuDiv.classList.remove("show");
        }
    });
}

// Function to update the status of a task (completed or pending)
function updateStatus(selectedTask) {
    let taskName = selectedTask.parentElement.lastElementChild;
    if (selectedTask.checked) {
        taskName.classList.add("checked");
        todos[selectedTask.id].status = "completed";
    } else {
        taskName.classList.remove("checked");
        todos[selectedTask.id].status = "pending";
    }
    localStorage.setItem("todo-list", JSON.stringify(todos));
}

// Function to edit an existing task
function editTask(taskId, textName) {
    editId = taskId;
    isEditTask = true;
    taskInput.value = textName;
    taskInput.focus();
    taskInput.classList.add("active");
}

// Function to delete a task
function deleteTask(deleteId, filter) {
    isEditTask = false;
    todos.splice(deleteId, 1);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo(filter);
}

// Clear all tasks
clearAll.addEventListener("click", () => {
    isEditTask = false;
    todos.splice(0, todos.length);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo();
});

// Add a new task or update an existing one
taskInput.addEventListener("keyup", e => {
    let userTask = taskInput.value.trim();
    if (e.key == "Enter" && userTask) {
        if (!isEditTask) {
            todos = !todos ? [] : todos;
            let taskInfo = { name: userTask, status: "pending" };
            todos.push(taskInfo);
        } else {
            isEditTask = false;
            todos[editId].name = userTask;
        }
        taskInput.value = "";
        localStorage.setItem("todo-list", JSON.stringify(todos));
        showTodo(document.querySelector("span.active").id);
    }
});

Nach dem Login kopieren

Live-Demo

Sehen Sie sich hier die Live-Demo der Todo List-Anwendung an.

Abschluss

Das Erstellen dieser Todo-List-Anwendung war eine aufschlussreiche Erfahrung, die es mir ermöglichte, mein Verständnis von JavaScript, DOM-Manipulation und Datenpersistenz zu vertiefen. Ich hoffe, dass dieses Projekt Ihnen als Inspiration dient, Ihre eigenen Aufgabenverwaltungstools zu erstellen. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde im Rahmen meiner kontinuierlichen Bemühungen entwickelt, die Webentwicklung zu meistern, wobei der Schwerpunkt auf praktischen Anwendungen liegt, die die Produktivität im Alltag steigern.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Todo-Listen-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!