Développer votre To-do-List – 2D Online

Voici comment développer une to-do list en utilisant HTML, CSS, et JavaScript !

1. Structure du projet

Vous allez créer trois fichiers :

index.html pour la structure HTML
style.css pour le style CSS
script.js pour la logique JavaScript

2. Création du fichier HTML

Créez un fichier nommé index.html avec la structure suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Ma To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Ajouter une tâche...">
        <button id="addTaskButton">Ajouter</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Création du fichier CSS

Créez un fichier nommé style.css pour styliser votre to-do list :

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

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

#taskInput {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

#addTaskButton {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#addTaskButton:hover {
    background-color: #218838;
}

#taskList {
    list-style-type: none;
    padding: 0;
}

#taskList li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#taskList li:last-child {
    border-bottom: none;
}

.deleteButton {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.deleteButton:hover {
    background-color: #c82333;
}

4. Création du fichier JavaScript

Créez un fichier nommé script.js pour ajouter la logique de la to-do list :

// Sélection des éléments du DOM
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');

// Fonction pour ajouter une tâche
function addTask() {
    const taskText = taskInput.value.trim();

    // Vérifie que le champ de saisie n'est pas vide
    if (taskText !== '') {
        // Crée un nouvel élément de liste
        const li = document.createElement('li');
        li.textContent = taskText;

        // Crée un bouton de suppression pour chaque tâche
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Supprimer';
        deleteButton.className = 'deleteButton';

        // Ajoute un événement de clic pour supprimer la tâche
        deleteButton.addEventListener('click', () => {
            taskList.removeChild(li);
        });

        // Ajoute le bouton de suppression à l'élément de liste
        li.appendChild(deleteButton);

        // Ajoute l'élément de liste à la liste des tâches
        taskList.appendChild(li);

        // Vide le champ de saisie après l'ajout de la tâche
        taskInput.value = '';
    }
}

// Ajoute un événement de clic pour le bouton d'ajout de tâche
addTaskButton.addEventListener('click', addTask);

// Permet d'ajouter une tâche en appuyant sur la touche "Entrée"
taskInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTask();
    }
});

5. Explication du code

HTML :
Le fichier index.html crée une structure de base avec un champ de texte pour entrer une tâche, un bouton pour ajouter la tâche, et une liste pour afficher les tâches ajoutées.
CSS :
Le fichier style.css définit le style de votre to-do list pour qu’elle soit agréable visuellement, en ajoutant des marges, des bordures, et des couleurs.
JavaScript :
Le fichier script.js gère la logique :
- Il sélectionne les éléments du DOM pour interagir avec eux.
- Il ajoute des tâches à la liste et crée un bouton de suppression pour chaque tâche.
- Il permet également d’ajouter une tâche en appuyant sur la touche « Entrée » et de supprimer des tâches en cliquant sur le bouton « Supprimer ».

6. Test de l’application

Pour tester votre application, ouvrez le fichier index.html dans un navigateur web. Vous devriez pouvoir :

Ajouter des tâches en les saisissant dans le champ de texte et en cliquant sur le bouton « Ajouter » ou en appuyant sur la touche « Entrée ».
Supprimer des tâches en cliquant sur le bouton « Supprimer » associé à chaque tâche.

7. Améliorations possibles

Stockage local : Utilisez le localStorage pour sauvegarder les tâches afin qu’elles soient conservées même après un rechargement de la page.
Animations : Ajoutez des animations pour les actions d’ajout et de suppression de tâches.
Fonctionnalités supplémentaires : Ajoutez des fonctionnalités telles que la possibilité de marquer des tâches comme complètes, de les éditer, ou de définir des priorités.

En suivant ces étapes, vous pourrez créer une application de liste de tâches simple, mais fonctionnelle. Vous pourrez également explorer et ajouter des fonctionnalités supplémentaires pour répondre à vos besoins spécifiques.

Image by freepik