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-light.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-light.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 (→ balise <link>) et modifier l’intitulé du bouton d’identifiant “darkModeBtn” pour obtenir un résultat équivalent à l’illustration suivante :

Exemple de résultat attendu

Prendre connaissance de Dynamiser ses pages web avec JS > Manipuler le DOM

Sélectionner par balise (→ getElementsByTagName()) depuis la console du navigateur les éléments <button> de notre page web. Retourner le résultat dans une variable nommée tagSelect (cette variable est de type “HTMLCollection”)

Parcourir la variable tagSelect pour afficher les éléments qu’elle contient.

<button id="darkModeBtn">
<button id="allBtn">
<button id="osBtn">
<button id="hwBtn">
<button id="appBtn">

Sélectionner par id (→ getElementById()), l’élément dont l’id vaut “darkModeBtn” et afficher son contenu texte (→ propriété innerText)

"Mode sombre"

Sélectionner par classe (→ getElementsByClassName()), l’élément dont la classe vaut “title-bar” et afficher son contenu HTML (→ propriété innerHTML).

<h1>Registre <strong><em>(fictif)</em></strong> de Vulnérabilités de Sécurité</h1>
<button id="darkModeBtn">Mode sombre</button>

Reprendre les questions précédentes en utilisant plutôt les sélecteurs CSS grâce aux méthodes querySelector() et querySelectorAll()

Cibler l’élément de classe “cvss” après avoir ciblé l’élément d’id “CVE-2024-1001” comme expliqué dans Préciser sa sélection et modifier sa valeur originale (→ 7.8) pour lui donner la valeur 8.2.

Ajouter un écouteur d’évènement au bouton d’id “darkModeBtn” pour que son intitulé change de “Mode clair” à “Mode sombre” et réciproquement à chaque appui sur le bouton.

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 : ce fichier contiendra tout le code javascript permettant de basculer entre le mode clair et le mode sombre de la page suite à l’appui sur le bouton présent sur celle-ci.

[…]
|   dummy-vulns.html
|
+---css
|       dummy-vulns-light.css
|       dummy-vulns-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)

Adapter les instructions décrites dans les é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.

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. Celui-ci se contentera d’appeler la fonction filterTable() avec le paramètre adéquat.