Conception de sites web dynamiques

TP6b : Javascript

Votre travail doit être accessible dans votre répertoire ~public_html/TP6/ avant le jeudi 21 mars à 12h.

L'objectif de ce TP est de créer une application de comptage du temps consacré à différentes tâches. L'utilisateur ajoute des tâches dans la liste, avec un chrono initial à 0. A chaque fois qu'on clique sur une tâche de la liste, son chrono se (re)lance et celui des autres s'interrrompt. Avant de fermer la session, l'utilisateur clique sur "Sauvegarder mes chronos" et peut les recharger lors d'une connexion ultérieure.

Copiez dans votre répertoire les fichiers chronos.html et chronos.js.

Ajout d'option

Implémentez la fonction ajout() dans chronos.js. Elle doit créer un objet o de type Option dont l'attribut value sera la concaténation du nom de la tache et de la durée (en secondes). Vous ajouterez à cet objet les attributs tache et durée. Cette option, une fois créée, est ajoutée au champ select, puis le champ texte est effacé (voir exemple du cours).

Chronométrage

Décommentez et comprenez le code à la fin de la fonction ajout(), complétez la fonction f_lance_chrono pour interrompre les chronos de toutes les tâches et écrire la fonction f_implemente(), qui doit incrémenter la durée d'une tâche de 1s et actualiser les attributs de l'option correspondante.

Sauvegarde des chronos

Implementez la fonction sauve(), qui doit sauvegarder sous forme de localStorage :

Chargement des chronos

Implémentez la fonction init_affichage(), qui doit lire dans le localStorage la liste des tâches, lire la durée de chaque tâche si la liste n'est pas vide, puis ajouter chaque tâche au champ select (utiliser la fonction ajout()).

(Facultatif) Présentation

Faites en sorte que l'affichage du temps soit au format hh:mm'ss. Faites une feuille de style pour soigner la présentation de votre page.