Introduction à la Todo List en JavaScript Pur

La création d’une application Todo List en JavaScript natif constitue un projet formateur essentiel pour les développeurs, tant débutants qu’intermédiaires. Ce type d’exercice permet d’affûter vos compétences en développement front-end, notamment la manipulation du DOM, la gestion des événements et l’implémentation du stockage de données côté client.
Ce guide détaille les étapes clés pour bâtir une telle application, de la configuration initiale à l’ajout de fonctionnalités de persistance.

Configuration Initiale du Projet

Pour débuter, installez la structure de base de votre projet. Créez un répertoire dédié et au sein de celui-ci, deux fichiers : index.html pour l’interface utilisateur et script.js pour la logique applicative. La structure typique se présente comme suit :

• .
  • index.html
  • script.js

Conception de l’Interface Utilisateur (HTML)

Dans votre fichier index.html, définissez la structure HTML minimale pour votre Todo List :

    
    
    
    
    


    
Ma Todo List
    
    Ajouter
    

    


    

Implémentation de l’Ajout de Tâches (JavaScript)

Le fichier script.js accueillera la logique pour dynamiser votre Todo List. Débutez par la gestion de l’ajout de nouvelles tâches :

const addTaskBtn = document.getElementById('addTaskBtn');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', () => {
    const taskText = taskInput.value.trim(); // Utiliser trim() pour supprimer les espaces blancs inutiles
    if (taskText) {
        const li = document.createElement('li');
        li.textContent = taskText; // Définir le texte de la tâche
        taskList.appendChild(li);
        taskInput.value = ''; // Réinitialiser le champ d'entrée
    }
});
    

Fonctionnalité de Suppression de Tâches

Pour compléter l’interactivité, ajoutez la capacité de supprimer des tâches. Cela implique de modifier la façon dont les éléments li sont créés pour y inclure un bouton de suppression :

// Dans le gestionnaire d'événement click du bouton addTaskBtn, après avoir créé le li:
li.innerHTML = `${taskText} Supprimer`; // Ajouter le bouton

// Ajouter un écouteur d'événement au bouton de suppression nouvellement créé
li.querySelector('.deleteBtn').addEventListener('click', function() {
    taskList.removeChild(li);
    saveTasks(); // Mettre à jour le localStorage après suppression
});
    

Persistance des Données avec localStorage

Afin que les tâches persistent après un rafraîchissement de la page, exploitez l’API localStorage du navigateur. Cette méthode permet de stocker des données clés-valeur localement pour l’origine du site :

function saveTasks() {
    const tasks = [];
    taskList.querySelectorAll('li').forEach(li => {
        // Stocker le texte de la tâche. Si vous avez des éléments plus complexes, stockez leurs propriétés.
        tasks.push(li.firstChild.textContent); // Accéder au nœud texte pour éviter d'inclure le bouton
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(taskText => {
        const li = document.createElement('li');
        li.textContent = taskText;
        li.innerHTML += `Supprimer`; // Ré-ajouter le bouton
        taskList.appendChild(li);

        // Attacher l'écouteur de suppression après l'ajout
        li.querySelector('.deleteBtn').addEventListener('click', function() {
            taskList.removeChild(li);
            saveTasks();
        });
    });
}

// Appeler loadTasks au chargement de la page
document.addEventListener('DOMContentLoaded', loadTasks);

// Modifier l'écouteur du bouton d'ajout pour sauvegarder
addTaskBtn.addEventListener('click', () => {
    const taskText = taskInput.value.trim();
    if (taskText) {
        const li = document.createElement('li');
        li.textContent = taskText;
        li.innerHTML += `Supprimer`;
        taskList.appendChild(li);
        taskInput.value = '';
        saveTasks(); // Sauvegarder après ajout
    }
});
    

L’avis du Labo

Pour une gestion plus robuste des tâches, envisagez de stocker chaque tâche sous forme d’objet dans le localStorage (par exemple : { id: Date.now(), text: 'Ma Tâche', completed: false }). Cela facilitera l’implémentation de fonctionnalités avancées comme le marquage des tâches comme complétées ou la réorganisation, tout en permettant une identification unique de chaque élément pour les opérations de suppression et de mise à jour.

Conclusion

Vous disposez maintenant d’une application Todo List opérationnelle, construite intégralement en JavaScript pur. Ce projet pratique renforce vos compétences en développement front-end, en particulier dans la manipulation dynamique du DOM et l’utilisation du stockage local pour une expérience utilisateur persistante. Pour aller plus loin, explorez l’ajout de fonctionnalités comme l’édition des tâches, la gestion des priorités, ou une intégration avec une API back-end. Continuez à coder et à innover !