Créer un site Web de liste de tâches-tutoriel CSS-php.cn

Build a Todo List Website

Introduction

Bonjour les développeurs ! Je suis ravi de vous présenter mon dernier projet : une application Todo List. Ce projet est parfait pour tous ceux qui cherchent à améliorer leurs compétences JavaScript en travaillant sur un outil pratique et largement utilisé. Que vous débutiez ou cherchiez à perfectionner vos compétences, la création d'une liste de tâches est un excellent moyen d'apprendre à gérer les entrées des utilisateurs, à gérer les données et à mettre à jour dynamiquement le DOM.

Aperçu du projet

L'application Todo List est un outil simple mais puissant qui permet aux utilisateurs de gérer efficacement leurs tâches. Il présente une interface intuitive dans laquelle les utilisateurs peuvent ajouter, modifier et supprimer des tâches, les marquer comme terminées et filtrer les tâches en fonction de leur statut. Ce projet est un excellent moyen de comprendre les concepts fondamentaux du développement Web, y compris la gestion des événements et la persistance des données à l'aide de localStorage.

Caractéristiques

Interface conviviale : Une conception épurée et intuitive qui facilite la gestion des tâches.
Ajouter, modifier et supprimer des tâches : contrôles entièrement fonctionnels pour gérer efficacement vos tâches.
Marquer les tâches comme terminées : marquez facilement les tâches comme terminées et filtrez-les en fonction de leur statut.
Données persistantes : toutes les tâches sont stockées dans localStorage, de sorte que votre liste reste intacte même après avoir actualisé la page.
Conception réactive : la mise en page est réactive et fonctionne de manière transparente sur les appareils de bureau et mobiles.

Technologies utilisées

HTML : Structure la page Web et les éléments de saisie.
CSS : stylise l'interface pour offrir une expérience conviviale.
JavaScript : gère la logique d'ajout, de modification, de suppression et de filtrage des tâches, ainsi que la gestion des données dans localStorage.

Structure du projet

Voici un bref aperçu de la structure du projet :

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

Copier après la connexion

index.html : Contient la structure HTML de l'application Todo List.
styles.css : inclut des styles CSS pour améliorer l'apparence et la réactivité de la liste de tâches.
script.js : gère la logique de l'application, y compris la gestion des tâches et les opérations de stockage local.

Installation

Pour démarrer le projet Todo List, suivez ces étapes :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Todo-List
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans votre navigateur Web pour commencer à utiliser l'application Todo List.

Usage

Ouvrez le site Web dans un navigateur Web.
Ajoutez une tâche en tapant dans le champ de saisie et en appuyant sur "Entrée".
Modifiez ou supprimez des tâches à l'aide des options fournies.
Marquer les tâches comme terminées en cochant la case correspondante.
Filtrer les tâches selon leur statut à l'aide des options de filtrage en haut de la liste.
Effacez toutes les tâches en utilisant le bouton « Effacer tout » pour recommencer à zéro.

Explication du code

HTML

Le fichier index.html fournit la structure de l'application Todo List, y compris le champ de saisie pour ajouter des tâches, des boutons pour filtrer les tâches et une liste pour afficher les tâches. Voici un bref aperçu :

<!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>

Copier après la connexion

CSS

Le fichier styles.css stylise l'application Todo List, garantissant un design épuré et réactif. Voici quelques styles clés :

@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;
  }
}

Copier après la connexion

Javascript

Le fichier script.js contient la logique d'ajout, de modification, de suppression et de filtrage des tâches. Voici un aperçu des principales fonctions :

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);
    }
});

Copier après la connexion

Démo en direct

Découvrez la démo en direct de l'application Todo List ici.

Conclusion

Créer cette application Todo List a été une expérience enrichissante, m'ayant permis d'approfondir ma compréhension de JavaScript, de la manipulation du DOM et de la persistance des données. J'espère que ce projet vous servira d'inspiration pour créer vos propres outils de gestion de tâches. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mes efforts continus pour maîtriser le développement Web, en se concentrant sur des applications pratiques qui améliorent la productivité quotidienne.