1. Méthode afficherTaches()

Ecrivez le code de la méthode afficherTaches() qui affiche de manière formatée sur la console toutes les tâches contenues dans le tableau taches attribut de la liste de tâches. Le format d'affichage attendu est :

✓ Tâche 1
   ID: 1764440896115
   Préparer un sujet d'examen
   Priorité: Haute
   Créée le: 29/11/2025 19:28:16
   Statut: Terminée

○ Tâche 2
   ID: 1764438775160
   Corriger les copies
   Priorité: Moyenne
   Créée le: 29/11/2025 18:52:55
   Statut: En cours

Indications :

• Si le tableau est vide, afficher : "Aucune tâche à afficher."
• Utiliser `✓` pour les tâches terminées et `○` pour les tâches en cours
• Les tâches sont affichées dans leur ordre d'apparation dnas le tableau taches et sont numérotées à partir de 1 (alors que le tableau commence à l'indice 0).

Vérifiez que l'affichage produit correspond bien à ce qui est demandé (choix 10 du menu de l'application app.js.

2. Getters nbTaches et nbTachesTerminees et méthode nbTacheDePriorite(niveauPriorite)

Ecrivez le code des getters nbTaches et nbTachesTerminees qui renvoient respectivement le nombre total de tâches de la liste et le nombre de tâches marquées comme terminées.

Ecrivez le code de la méthode nbTacheDePriorite(niveauPriorite) qui renvoie le nombre de tâches ayant un niveau de priorité donné.

Paramètre :

• niveauPriorite (string) : le niveau de priorité à rechercher ("Basse", "Moyenne", "Haute")

Retour : (number) le nombre de tâches correspondantes

Testez ces méthodes en appelant le choix 2 (Afficher les statistiques) de l'application app.js et en vérifiant que les valeurs fournies correspondent bien aux valeurs effectives.

3. Méthode terminer(index)

Ecrivez le code de la méthode terminer(index) qui marque une tâche comme terminée

Paramètre :

• index (number) : le numéro de la tâche à marquer comme terminée (commence à 1)

Attention : Les tâches sont numérotées à partir de 1 pour l'utilisateur, mais le tableau commence à l'indice 0.

Testez cette méthode (choix 3 du menu de app.js) et la tâche a bien été marquée (en affichant la liste des tâches (choix 1) et les statistiques (choix 2))

4. Méthode nouvelleTache(description, priorite)

Ecrire le code de la méthode nouvelleTache(description, priorite) qui ajoute une nouvelle tâche à la fin de la liste.

Paramètres :

• description (string) : la description de la tâche,
• priorite (string) : la priorité de la tâche (par défaut "Basse")

Structure de la tâche à créer :

• id : utiliser Date.now() pour générer un identifiant unique ¹.
• description : la description fournie
• terminee : initialisé à false
• priorite : la priorité fournie (ou "Basse" par défaut)
• dateCreation : la date actuelle au format français (new Date().toLocaleString("fr-FR"))

Avec l'application app.js créez une nouvelle tâche (choix 4 du menu) et vérifiez ensuite qu'elle apparait correctement à la fin de liste des tâches (choix 1).

5. Méthode supprimer(index)

Ecrivez le code de la méthode supprimer(index) qui supprime une tâche de la liste et la renvoie.

Paramètre :

• index (number) : le numéro de la tâche à supprimer (commence à 1 comme pour la méthode terminer)

Retour : (object) la tâche supprimée

Indication : vous pouvez essayer d'utiliser la méthode splice() des tableaux qui peut s'avérer bien utile pour de telles situations.

Utilisez l'application app.js pour tester la suppression (choix 5 du menu) et verifier que la tâche a bien été retiré de la liste (en affichant la liste des tâches (choix 1) et les statistiques (choix 2))

6. Méthode supprimerTachesTerminees()

Ecrivez le code de la méthode supprimerTachesTerminees() qui supprime de la liste toutes les tâches terminées.

indication : vous pouvez utilisez la méthode filter() des tableaux pour ne conserver que les tâches non terminées.

Utilisez l'application app.js pour tester la suppression (choix 3 du menu).

// Trier par priorité (Haute > Moyenne > Basse)
listeDeTaches.trier((a, b) => {
    const priorites = { "Haute": 3, "Moyenne": 2, "Basse": 1 };
    return priorites[b.priorite] - priorites[a.priorite];
});

Question : Dans app.js, complétez le code de la fonction trierTaches afin de réaliser les différents tris selon les critères proposés.

Testez les différents tris (choix 7 du menu de app.js) et vérifiez que vous obtenez bien le résultat attendu en affichant la liste des tâches.

Question : le menu de app.js prévoit une recherche de tâches par mot clé (choix 9) : l'utilisateur rentre une chaîne de et l'interface affiche la liste de toutes les taches qui contiennent tout ou partie de cette chaîne mais cette fonctionnalité n'a pas du tout été implémentée ni dans l'application (app.js) ni dans la classe ListeDeTaches. A vous de la réaliser.

L'idée est à partir de la chaîne proposée de rechercher toutes les tâches dont la description contient la chaîne indépendamment de la casse (majuscule ou minuscules). Pensez à regarder la doc de String et en particulier les méthodes include et toLowerCase ou toUpperCase().

attention readline-sync traite mal les caractères accentués. faites attenton de ne pas en utiliser dans vos recherches.

Question 1 : mise en forme de la page index.html

Ajoutez à horloges.css de nouvelles règles de styles CSS pour définir une couleur de fond bleu clair (composantes primaires Rouge : 208, Vert: 222 et Bleu: 252) pour toutes les pages du site et pour que les vignettes contenant l'horloge et la photographie de chacune des villes soient matérialisées de la manière suivante :

• avec un fond de couleur lightsteelblue et dont les coins sont arrondis (rayon 15 pixels),
• cette couleur de fond change et prend la valeur steelblue si la vignette est survollée par la souris,
• la vignette à des marges internes et une marge externe inférieure de 10 pixels,
• tout le contenu de la vignette (nom de la ville, horloge, image de la ville) est centré.

Question 2 : liens entre la page d'accueil et les pages de description des villes

• Modifiez le code de la page d'accueil index.html afin que
  • la vignette contenant de la ville de Vancouver supporte un lien hypertexte qui renvoie vers la page vancouver.html. Quel que soit l'endroit où l'utilisateur clique sur la vignette (le texte Vancouver, l'horloge, l'image du drapeau, la photographie réduite de la ville, le fond de la vignette) le lien est suivi.
  • pour les vignettes concernant les autres villes (Sidney, New York, Rio de Janeiro, ...) un lien hypertexte redirige vers la page underconstruction.html, page provisoire qui sera remplacée ultérieurement par des pages spécifiques à chacune des villes. Ne le faire que pour le ville de Sidney.
• Modifiez le code de underconstruction.html pour que
  • l'item Acceuil renvoie vers la page d'accueil index.html

Question 3: liens externes vers iconarchive.com et wikimedia.org

Modifiez la page about.html, comme indiqué sur la figure qui suit afin que

• dans les crédits pour l'auteur des images des drapeaux, on ait un lien vers la page de téléchargement des images sur le site iconarchive.com (l'url de cette page est https://www.iconarchive.com/show/flags-icons-by-icondrawer.html),

• dans les crédits pour les photographies des villes, on ait un lien vers la page d'accueil (https://commons.wikimedia.org) du site Wikimedia Commons d'où ces images sont issues.

Faites en sorte que ces pages s'ouvrent dans un nouvel onglet du navigateur.

Question 4: liens internes à la page vancouver.html

Pour le moment, nous ne nous intéresserons pas aux liens de navigation vers les autres pages depuis la page vancouver.html, cela sera mis en oeuvre lorsque vous utiliserez Bootstrap 5 pour sa présentation. Par contre vous pouvez dès à present mettre en place les liens de navigation internes à celle-ci à savoir :

1. le lien permettant d'aller directement aux informations climatiques depuis la présentation générale
2. le lien permettant d'aller directement aux informations générales depuis les informations climatiques

Question 5: modification du tableau des informations climatiques

Modifiez ce tableau de façon à ce que les informations de températures et de précipitations soient regroupées comme indiqué sur la figure ci-dessous.

Question 6: mise en forme de la page vancouver.html avec Bootstrap 5

En utilisant Bootstrap 5, modifiez la page vancouver.html afin d’obtenir un affichage conforme à celui présenté sur la figure ci-dessous.

Les points qui sont demandés (et que vous pouvez réaliser dans n'importe ordre) sont :

• mise en place d'une barre de navigation similaire à celles des autres pages du site (index.html, about.html ou underconstruction.html). Cette barre devra avoir les propriétés suivantes :
  • position fixe en haut de la fenêtre, elle reste toujours visible même lorsque l'on scrolle dans la page,
  • la barre se transforme en bouton avec menu déroulant (burger menu ) lorsque la fenêtre n'est plus assez large pour afficher tous les items de navigation,
  • les items Accueil et A propos correspondent à des liens hypertexte qui conduisent respectivement aux pages index.html et about.html.
• La présentation générale de la ville de Vancouver est faite avec la disposition (layout) suivant :
  • le contenu de la page occupe toute la largeur de la fenêtre du navigateur,
  • les trois premiers articles de la section Informations générales sont affichés sur deux colonnes :
    • la premier article avec l'image de la ville de Vancouver est dans une première colonne qui occupe les 3/4 de la largeur de la fenêtre du navigateur,
    • le deuxième article (avec le portrait de Georges Vancouver) et le troisième article sont dans une deuxième colonne qui occupe 1/4 de la largeur de la fenêtre du navigateur,
    • la taille (largeur) des colonnes et des images s'adapte automatiquement à la largeur de la fenêtre du navigateur. Par contre si cette dernière est inférieure à 576 pixels, la disposition en colonnes est abandonnée au profit d'une disposition en blocs les uns au dessous des autres
  • tous les autres éléments (titres, sections, articles, tableau) occupent toute la largeur de la fenêtre du navigateur.
• Les deux images ont un effet de vignette (bordure blanche) et de plus un découpage circulaire est appliqué à l'image du portrait de Georges Vancouver. La taille des images s'adapte automatiquement à la largeur de la colonne où elles se situent.
• Le tableau est mis en forme avec une bordure autour de chacune des cellules, avec les noms de colonnes en blanc sur fond noir et ensuite la couleur du fond des lignes du tableau varie entre deux nuances de gris une ligne sur deux afin de produire un effet de bandes (stripped).
  De plus si la fenêtre du navigateur n'est pas assez large pour afficher le tableau dans son entier, le tableau devient automatiquement scrollable et on peut parcourir son contenu à l'aide d'un ascenseur horizontal.

  

Question 7: modification de la barre de navigation

Dans la page vancouver.html rajouter entre les items Accueil et A propos un nouvel item Ville permettant à l'aide d'un menu déroulant (dropdown menu) d'accéder aux pages de description des différentes villes pour lesquelles il y a une horloge sur la page d'accueil. La figure ci-dessous présente le fonctionnement attendu pour ce menu.