Erstellen einer Todo-App mit Theme Toggle mithilfe von React

Einführung

In diesem Tutorial erstellen wir eine Todo-Listen-Webanwendung mit React. Dieses Projekt hilft beim Verständnis der Zustandsverwaltung, der Ereignisbehandlung und der Arbeit mit Listen in React. Es ist perfekt für Anfänger, die ihre Fähigkeiten in der React-Entwicklung stärken möchten.

Projektübersicht

Mit der Todo-Listen-Anwendung können Benutzer Aufgaben hinzufügen, als erledigt markieren und entfernen. Es bietet eine übersichtliche Oberfläche für die Verwaltung täglicher Aufgaben. Dieses Projekt zeigt, wie React verwendet werden kann, um den Status einer einfachen, aber dynamischen Anwendung zu verwalten.

Merkmale

• Neue Aufgabe hinzufügen: Benutzer können Aufgaben zur Liste hinzufügen.
• Als erledigt markieren: Benutzer können Aufgaben als erledigt markieren.
• Aufgabe löschen: Benutzer können Aufgaben aus der Liste löschen.
• Lokaler Speicher: Behält Aufgaben über das Neuladen von Seiten hinweg mithilfe von localStorage bei.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche und Verwalten des Komponentenstatus.
• CSS: Zum Gestalten der Anwendung.
• JavaScript: Für die Kernlogik und Funktionalität.

Projektstruktur

Die Projektstruktur folgt einem typischen React-Projektlayout:

├── public
├── src
│   ├── components
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Schlüsselkomponenten

• TodoList.jsx: Übernimmt die Anzeige und Verwaltung der Todo-Liste.
• TodoItem.jsx: Verwaltet einzelne Aufgabenelemente, einschließlich der Markierung als erledigt oder des Löschens.

Code-Erklärung

TodoList-Komponente

Diese Komponente verwaltet den Status der gesamten Aufgabenliste, einschließlich des Hinzufügens neuer Aufgaben und des Renderns der Liste.

import { useState, useEffect } from "react";
import TodoItem from "./TodoItem";

const TodoList = () => {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
    setTasks(savedTasks);
  }, []);

  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    if (task.trim()) {
      setTasks([...tasks, { text: task, completed: false }]);
      setTask("");
    }
  };

  const toggleCompletion = (index) => {
    const newTasks = tasks.map((t, i) =>
      i === index ? { ...t, completed: !t.completed } : t
    );
    setTasks(newTasks);
  };

  const deleteTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div classname="todo-list">
      <h1>Todo List</h1>
      <input type="text" value="{task}" onchange="{(e)"> setTask(e.target.value)}
        placeholder="Add a new task"
      />
      <button onclick="{addTask}">Add Task</button>
      <ul>
        {tasks.map((t, index) => (
          <todoitem key="{index}" task="{t}" index="{index}" togglecompletion="{toggleCompletion}" deletetask="{deleteTask}"></todoitem>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

TodoItem-Komponente

Die TodoItem-Komponente verwaltet die Anzeige jeder Aufgabe sowie Optionen, um sie als erledigt zu markieren oder zu löschen.

const TodoItem = ({ task, index, toggleCompletion, deleteTask }) => {
  return (
    

toggleCompletion(index)}>{task.text} deleteTask(index)}>Delete

); }; export default TodoItem;

In dieser Komponente erhalten wir Requisiten von der übergeordneten TodoList und verarbeiten Aktionen wie das Umschalten der Aufgabenerledigung oder das Löschen der Aufgabe.

App-Komponente

App.jsx dient als Stammverzeichnis der Anwendung und rendert die TodoList-Komponente.

import  { useState } from "react";
import "./App.css";
import TodoList from './components/TodoList';
import sun from "./assets/images/icon-sun.svg";
import moon from "./assets/images/icon-moon.svg";

const App = () => {
  const [isLightTheme, setIsLightTheme] = useState(false);

  const toggleTheme = () => {
    setIsLightTheme(!isLightTheme);
  };

  return (
    <div classname="{isLightTheme" :>
      <div classname="app">
        <div classname="header">
          <div classname="title">
            <h1>TODO</h1>
          </div>
          <div classname="mode" onclick="{toggleTheme}">
            <img src="%7BisLightTheme" moon : sun alt="Erstellen einer Todo-App mit Theme Toggle mithilfe von React">
          </div>
        </div>
        <todo></todo>
        <div classname="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
      </div>

    </div>
  );
};

export default App;

CSS-Styling

Das CSS stellt sicher, dass die Todo List-Anwendung benutzerfreundlich und reaktionsschnell ist.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: Josefin Sans, sans-serif;
}

.app {
  width: 100%;
  height: 100vh;
  background-color: #161722;
  color: white;
  background-image: url(./assets//images/bg-desktop-dark.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.header {
  width: 350px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title h1 {
  font-size: 30px;
  letter-spacing: 7px;
}
.mode {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mode img {
  width: 22px;
}

.todo {
  width: 350px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.input-box {
  border-bottom: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25273c;
  width: 100%;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
}
.check-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right,hsl(230, 50%, 20%) , hsl(280, 46%, 28%));
}

.input-task {
  width: 90%;
  border: none;
  color: white;
  background-color: #25273c;
}
.input-task:focus {
  outline: none;
}
.todo-list {

  margin-top: 20px;
  width: 350px;
  background-color: #25273c;
}
.todo-box {

  margin-inline: 15px;
  margin-block: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.todo-box .cross{
width: 14px;
}
.details {
  margin-bottom: 40px;
border-bottom: 1px solid white;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #25273c;
  font-size: 12px;
  padding: 12px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

.details .clickBtn{
  cursor: pointer;

}
.details .clickBtn:hover{
color: #3074fd;

}


/* //light Theme  */


.light-theme .app {
  background-color: #fff;
  color: #000;
  background-image: url(./assets//images/bg-desktop-light.jpg);
}

.light-theme .header {
color: white;
}

.light-theme .input-box{
  background-color: white;
  color: black;
  border-bottom: 1px solid black;
}
.light-theme input{
  background-color: white;
  color: black;
}
.light-theme .check-circle{
  border:1px solid black;

}
.light-theme  .todo-list{
  background-color: white;
  color: black;
}
.light-theme .details{
  border-bottom: 1px solid black;
  background-color: white;
  color: black;
}

.footer{
 margin: 40px;
}

Die Stile sorgen dafür, dass die Todo-Liste einfach und übersichtlich ist und ermöglichen gleichzeitig die Aufgabenverwaltung.

Installation und Nutzung

Um zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

git clone https://github.com/abhishekgurjar-in/todo_list.git
cd todo-list
npm install
npm start

Die Anwendung wird unter http://localhost:3000 ausgeführt.

Live-Demo

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

Abschluss

Das Todo-List-Projekt ist eine großartige Möglichkeit, die Arbeit mit Status, Listen und Ereignisbehandlung in React zu üben. Es zeigt, wie man eine nützliche Anwendung erstellt, die Daten mithilfe von localStorage sitzungsübergreifend beibehalten kann.

Credits

• Inspiration: Inspiriert durch den Bedarf an einem einfachen und effektiven Aufgabenverwaltungstool.

Autor

Abhishek Gurjar ist ein leidenschaftlicher Webentwickler. Weitere seiner Projekte finden Sie auf GitHub.

Das obige ist der detaillierte Inhalt vonErstellen einer Todo-App mit Theme Toggle mithilfe von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!