Apprenez à créer une application Todo List en JavaScript pur. Cet article guide les développeurs débutants et intermédiaires à travers les étapes essentielles du développement front-end.

Créer une Application Todo List en JavaScript Pur

|

Écrit par

Hugo – La Pause Code

Introduction

Créer une application Todo List en JavaScript pur est un excellent projet pour les développeurs débutants et intermédiaires. Cela vous permet de mettre en pratique vos compétences en développement front-end tout en apprenant à manipuler le DOM, gérer les événements et stocker des données localement.

1. Configuration de votre projet

Avant de commencer, créez un dossier pour votre projet et ajoutez un fichier index.html et un fichier script.js. Voici un exemple de structure de base :

.
├── index.html
└── script.js

2. Création de l’interface utilisateur

Dans votre fichier index.html, commencez par créer une structure HTML simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>
<body>
    <h1>Ma Todo List</h1>
    <input type="text" id="taskInput" placeholder="Ajouter une tâche...">
    <button id="addTaskBtn">Ajouter</button>
    <ul id="taskList"></ul>
    <script src="script.js"></script>
</body>
</html>

3. Ajouter des tâches avec JavaScript

Dans votre fichier script.js, commencez à écrire le code pour ajouter des tâches :

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

addTaskBtn.addEventListener('click', () => {
    const taskText = taskInput.value;
    if (taskText) {
        const li = document.createElement('li');
        li.textContent = taskText;
        taskList.appendChild(li);
        taskInput.value = '';
    }
});

4. Supprimer des tâches

Pour permettre la suppression des tâches, modifiez le code pour ajouter un bouton de suppression :

li.innerHTML = `${taskText} <button class='deleteBtn'>Supprimer</button>`;

li.querySelector('.deleteBtn').addEventListener('click', () => {
    taskList.removeChild(li);
});

5. Stockage des tâches avec localStorage

Pour conserver les tâches même après le rechargement de la page, utilisez localStorage :

function saveTasks() {
    const tasks = [];
    taskList.querySelectorAll('li').forEach(li => {
        tasks.push(li.textContent);
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

addTaskBtn.addEventListener('click', () => {
    // ... code d'ajout de tâche
    saveTasks();
});

Conclusion

Vous avez maintenant une application Todo List fonctionnelle en JavaScript pur. Ce projet vous permet d’appliquer vos compétences en développement front-end tout en vous familiarisant avec la manipulation du DOM et le stockage local. N’hésitez pas à ajouter des fonctionnalités supplémentaires, comme la possibilité de marquer des tâches comme complètes ou de les trier. Bon codage !

Laisser un commentaire