Dans cet exercice, vous devez créer une page web pour gérer une liste de tâches à faire (to-do list).
Pour simplifier, la liste ne sera pas sauvegardée entre les rechargements de la page.
Ce dépôt contient le fichier HTML de la page souhaitée, ainsi qu'un fichier CSS et un fichier JavaScript vide.
- Vous devez réaliser l'exercice en binôme.
Vous devrez créer une page de gestion de liste de tâches à l’exemple de cette page.
Vous réaliserez votre page à partir du code fourni, qui contient un fichier HTML et un fichier de style CSS.
Vous devrez donc remplir le fichier script.js.
Vous pouvez apporter des modifications au fichier HTML, mais cela n’est pas nécessaire. Vous pouvez également modifier le fichier de style.
La page doit être réalisée en utilisant JavaScript, sans bibliothèque externe.
La page doit contenir un panneau permettant l’ajout d’un nouvel item. L’item sera ajouté en bas de la liste.
La liste de tâches doit être affichée en permanence sur la page. Chaque item doit être accompagné de deux boutons : suppression et modification.
Lorsqu’on actionne le bouton de suppression, l’item correspondant sera supprimé de la liste.
L’appui sur le bouton de modification active le mode de modification. Un panneau sera affiché, permettant de modifier le texte de l’item grâce à un champ d’entrée. On peut soit confirmer, soit annuler la modification grâce à deux boutons. Dans les deux cas, le mode de modification sera désactivé. Lorsque le mode de modification est actif, le panneau de création doit être masqué.
Pour cet exercice, vous n'aurez besoin que d'un éditeur de texte et d'un navigateur web. Vous pouvez toutefois utiliser un éditeur de développement intégré, comme VS Code ou WebStorm, pour réaliser votre développement.
La page doit s'afficher dans un navigateur web.
Vous ne devez pas avoir besoin d'un serveur web local pour cet exercice.
La page doit pouvoir s'ouvrir en utilisant le protocole file://, par exemple en double-cliquant sur le fichier HTML dans votre navigateur de fichiers.