M3203 - Programmation objet et événementielle - TP4

Exercice 1 : Des voitures, la suite

Héritage Classes Objets

Vous allez compléter le code vu en cours pour ajouter une classe Utilitaire pour le loueur de voitures. Les utilitaires seront des voitures, avec des propriétés spécifiques : leur volume utile et leur hauteur.

1. Reprenez le code du cours (disponible ici).
2. Créez une nouvelle classe Utilitaire qui hérite de Voiture.
3. Ajoutez son constructeur qui appelle le constructeur de la classe mère et initialise les propriétés hauteur et volumeUtile à partir de valeurs passées en paramètre.
4. Écrivez la méthode affiche qui affichera le descriptif complet d'un utilitaire dans le document HTML.
5. Testez votre classe en créant quelques objets de type Utilitaire et en affichant leur descriptif.

Solution

Exercice 2 : To Do list

Héritage Classes Objets Évènements DOM

Dans cet exercice, l'objectif est de développer une application web de To Do List. La liste pourra comporter des tâches simples ou des tâches avec une limite de temps. L'utilisateur pourra éditer de nouvelles tâches, les modifier ou les supprimer.

L'application ressemblera à ceci :

Voici le document HTML avec lequel vous allez travailler où le squelette de notre To Do List est écrit, rien n'est à modfier dedans. Notez que l'application utilise Bootstrap et les icônes FontAwesome.

Et le CSS associé est à télécharger ici (vous n'aurez rien à faire en CSS, juste à appliquer les classes).

Première partie : Les tâches simples

Pour commencer, nous allons développer la classe SimpleItem permettant de créer des tâches "simples", c'est à dire sans limite de temps.

1. Téléchargez et enregistrez les fichiers HTML et CSS ci-dessus.
2. Créez le fichier todo.js où vous allez travailler.
3. Déclarez la classe SimpleItem
4. Écrivez le constructeur de la classe qui prendra en paramètre une chaine de caractères. Vous pouvez l'appeler chaine, ce sera le texte de la tâche ("faire les courses"), on s'en servira plus tard.
5. Dans le constructeur, initialisez la propriété list qui correspond à la liste ul d'identifiant "todo".
6. Dans le constructeur, initialisez la propriété item qui correspond à un nouvel item de liste (li)
7. Écrivez une méthode createInput qui retourne un nouvel élément input de type checkbox.
8. Écrivez une méthode createLabel qui prend en paramètre une chaîne de caractères texte correspondant au libellé de la tâche et qui retourne un nouvel élément de type span dont le contenu textuel est texte.
9. Écrivez une méthode createTools qui :
   1. Crée une variable divTools qui est un nouvel élément div possédant la classe CSS "tools"
   2. Crée une nouvelle propriété buttonEdit qui est un nouveau bouton possédant la classe CSS "edit"
   3. Crée une nouvelle propriété buttonDelete qui est un nouveau bouton possédant la classe CSS "delete"
   4. Ajoute les deux boutons à leur parent divTools
   5. Retourne divTools
10. Dans le constructeur, initialisez les nouvelles propriétés :
    • input avec la méthode createInput
    • label avec la méthode createLabel en lui donnant chaine en paramètre
    • tools avec la méthode createTools
11. Ajoutez à la propriété item ses trois enfants input, label et tools avec la méthode appendChild.
12. Ajouter à la propriété list son enfant item
13. Testez la classe en créant un nouvel item SimpleItem, par exemple : let item1 = new SimpleItem("test");. Il devrait apparaître dans votre To Do list.

Deuxième partie : Mise en place des évènements

On peut maintenant créer des items de listes en Javascript mais on aimerait que l'utilisateur puisse le faire seul en cliquant sur le bouton Ajouter, et qu'il puisse les éditer et les supprimer.

1. Ajoutez un écouteur d'évènements au bouton d'identifiant add qui créera un nouvel item de list SimpleItem avec le texte "Nouvelle tâche" lors d'un clic de bouton.
2. Dans le constructeur de la classe SimpleItem, ajoutez un écouteur d'évènements au bouton de délétion buttonDelete qui supprime l'item lors d'un clic
3. Dans le constructeur, ajoutez une nouvelle propriété saisie qui correspond à un nouvel élément input de type text. C'est dans ce champ de saisie que l'utilisateur entrera le texte de sa tâche
4. Dans le constructeur, ajouter un écouteur d'évènements au bouton d'édition buttonEdit qui efface la valeur de l'input saisie puis remplace l'élément label par l'élément saisie avec la méthode replaceChild lors d'un clic.
5. Dans le constructeur, ajoutez un écouteur d'évènements à l'élément input saisie qui crée un nouveau label à partir de la valeur entrée et échange les éléments saisie et label lors de l'évènement "change".
6. Testez !
7. Bonus : modifiez la classe SimpleItem pour que l'utilisateur voie directement le champ input saisie lorsqu'il crée un nouvel item.

Troisième partie : Les tâches chronométrées (facultative)

Notre appli commence à ressembler à quelque chose ! On va maintenant implémenter des tâches chronométrées. La différence principale avec les tâches simples est le petit drapeau coloré indiquant le temps restant avant la deadline. Ces tâches vont donc devoir gérer en plus la valeur du temps restant, le petit drapeau lui-même et un sélecteur de dates pour que l'utilisateur puisse rentrer sa deadline quand il édite une tâche !

1. Créez une nouvelle classe ChronoItem qui hérite de SimpleItem.
2. Dans le constructeur, appelez le constructeur de la classe mère
3. Dans le constructeur, initialisez la propriété diffTime à 0. C'est elle qui nous servira à stocker le temps restant.
4. Créez une méthode createTimePicker qui retourne un nouvel élément input de type date.
5. Dans le constructeur, initialisez une nouvelle propriété timePicker à l'aide de cette méthode
6. Dans le constructeur, utilisez la méthode insertBefore pour insérer l'élément timePicker en avant-dernière position dans l'item
7. Créez une méthode createChrono pour réaliser le petit drapeau coloré :
   1. Elle crée un nouvel élément span possédant la classe CSS "badge"
   2. Le contenu textuel du span correspond à l'arrondi inférieur de la propriété diffTime + la chaîne "jour(s)"
   3. Si la valeur de diffTime est inférieure ou égale à 2, l'élément span possèdera aussi la classe CSS "badge-danger"
   4. Si la valeur de diffTime est comprise entre 2 et 7, l'élément span possèdera la classe CSS "badge-warning"
   5. Sinon, l'élement span possèdera la classe CSS 'badge-success'
   6. Pour finir, la méthode retourne l'élément span créé
8. Dans le constructeur, initialisez une nouvelle propriété chrono à l'aide de cette méthode createChrono
9. Maintenant il nous faut ajouter les écouteurs d'évènements pour éditer et afficher le nombre de jours restants. Quand on affiche le nombre de jours restants, il nous faut calculer ce nombre de jours : c'est la différence entre la date saisie par l'utilisateur et la date d'aujourd'hui. Voyons voir : ajoutez à l'élément timePicker un écouteur d'évènements pour l'évènement "change". La fonction exécutée va alors :
   1. Stocker la date actuelle dans une variable today en utilisant la classe Date de Javascript, comme ceci : let today = new Date();
   2. Stocker une date avec la valeur saisie dans l'input timePicker dans une variable then, comme ceci : let then = new Date(this.timePicker.value);
   3. Stocker dans diffTime la différence entre les deux dates. Vous pouvez utiliser la méthode getTime qui renvoie la valeur d'une date en millisecondes depuis le 1 janvier 1970.
   4. Créer un nouveau chrono à l'aide de la méthode createChrono
   5. Remplacer l'élément timePicker par l'élément chrono avec la méthode replaceChild
10. Maintenant, pour pouvoir éditer la date, ajoutez à l'élément buttonEdit un nouvel écouteur d'évènements qui effacera la valeur de l'élément timePicker et remplacera l'élément chrono par l'élément timePicker lors d'un clic de souris.
11. Ajoutez un écouteur d'évènements au bouton addchrono qui créera un nouvel item de list ChronoItem lors d'un clic de souris.
12. Testez

Solution