On vous donne le code HTML partiel de cette page web dans dummy-vulns.html.
Le télécharger sur votre poste de travail, l’ouvrir dans un navigateur pour avoir un aperçu de la page web et analyser son contenu dans un éditeur de texte.

Ajouter un titre de niveau 1 à la page web pour obtenir le rendu suivant. Noter que “(fictif)” est en gras et emphase.

Modifier le fichier HTML pour ajouter la vulnérabilité suivante dans la liste :

Déplacer le titre de la page dans un élément générique de type bloc (→ <div>…​</div>) auquel vous attribuerez la classe (→ class=…​) “title-bar”

Ajouter dans ce bloc, à la suite du titre, un bouton (→ <button>…​</button>) intitulé “Mode sombre” auquel vous attribuerez l'identifiant (→ id=…​) “darkModeBtn”

Ajouter — entre le bloc “title-bar” et le tableau qui liste les CVEs — un élément générique de type bloc (→ <div>…​</div>) auquel vous attribuerez la classe (→ class=…​) “filters”.

Insérer successivement dans ce bloc générique :

Créer un sous-répertoire css/ dans le répertoire où se trouve dummy-vulns-statiç.html puis y sauvegarder la feuille de style dummy-vulns.css fournie.

[...]
|   dummy-vulns.html
\---css
        dummy-vulns.css

Lier cette feuille de style à notre page web (→ <link …​ />) et vérifier sa prise en compte par le navigateur web

Ajouter, dans la règle CSS qui s’applique à l’entête de la table (→ <th>), les déclarations CSS (c.-à-d. les paires propriété/valeur) qui permetteront de lui appliquer :

Ajouter une nouvelle règle qui s’applique aux éléments HTML dont la classe est cvss pour qu’ils s’affichent en gras avec la couleur de 1^erplan RGB(255,25,0)

Ajouter une règle qui cible tous les éléments <td> ayant la classe “idCVE” — et seulement eux — pour les afficher en gras avec une couleur de teinte/saturation/luminosité HSL(210deg,94%,46%)

Ajouter une règle qui cible tous les éléments <tr> de pseudo-classe :hover — et seulement eux — qui permettra d’appliquer la couleur hexadécimale 0xf3f3f3 lors du survol de chaque ligne du tableau avec la souris.

Modifier le fichier HTML de façon à appliquer en plus de la règle .badge, les règles .OS, .Hardware et Application déjà présentes dans le fichier CSS de façon à appliquer une couleur différente à chaque type de “badge” (c.-à-d. OS, Hardware ou Application).

Résultat attendu

Créer une règle CSS s’appliquant à tous les éléments de classe “filters” avec les propriétés suivantes :

   margin-bottom: 20px;
   display: flex;
   gap: 15px;
   align-items: center;
   background: #e8ecef;
   padding: 15px;
   border-radius: 5px;

Créer une règle CSS s’appliquant à tous les boutons présents dans le bloc de classe “filters” avec les propriétés suivantes :

   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background: #3498db;
   color: white;
   cursor: pointer;
   border: none;
   font-weight: bold;

Résultat attendu suite aux 2 dernières questions

Créer une règle CSS s’appliquant spécifiquement au bouton dont l’identifiant est “darkModeBtn” avec les propriétés suivantes :

   background: #899fad;
   color: white;
   font-weight: bold;

Faire une copie du fichier de style dummy-vuln.css dans dummy-vuln-dark.css et modifier les règles body, container, .filters et tr:hover pour appliquer un thème sombre de votre convenance à la page web.

Lier ce nouveau fichier de style à la page web et modifier l’intitulé du bouton d’identifiant “darkModeBtn” pour obtenir un résultat équivalent à l’illustration suivante :

Exemple de résultat attendu

Créer un sous-répertoire js/ dans le répertoire où se trouve dummy-vulns.html puis y ajouter un nouveau fichier dummy-vulns.js

[…]
|   dummy-vulns.html
|
+---css
|       dummy-vulns.css
|       dummy-vuln-dark.css
|
\---js
        dummy-vulns.js

Lier ce fichier à notre page web en ajoutant la balise suivante dans l’entête HTML :

<script src="dummy-vulns.js" defer></script> (1)

Modifier les fichiers dummy-vulns.css et dummy-vuln.js en adaptant les instructions des étapes 2 et 3 de l’article Enabling Dark and Light mode in JavaScript – a guide pour faire en sorte de basculer alternativement du thème clair au thème sombre lorsqu’on appuie sur le bouton d’identifiant “darkModeBtn” présent dans notre page web.
Voir après l’illustration une façon de procéder.

Coder une fonction Javascript :

function filterTable(filterType) { (1)
  ...
}

Son algorithme est le suivant :

Sélectionner toutes les lignes du tableau (-> balises `<tr>`) (1)
POUR CHAQUE ligne FAIRE (2)
| Sélectionner l'élément de cette ligne ayant la classe "`badge`" (3)
| SI le type de filtrage est "`Tous`" (4)
| |  OU une des classes de l'élément correspond au paramètre `filterType` ALORS
| | Forcer le style de l'affichage sur "`table-row`" (5)
| SINON
| | Forcer le style de l'affichage sur "`none`"
FINPOUR

1	Voir Document : méthode querySelectorAll()
2	Voir Array : méthode forEach()
3	Voir Document : méthode querySelector()
4	Voir if…else
5	Voir HTMLElement: style property

Attribuer un event listener à chaque bouton de filtrage dont le rôle est d’appeler la fonction filterTable() avec le paramètre adéquat.