Version étudiants

2025-04-08 11:22:56 +02:00
commit 4ae9d77f4b
9 changed files with 56 additions and 0 deletions
--- a/img/clavier.png
+++ b/img/clavier.png
--- a/img/ordinateur.png
+++ b/img/ordinateur.png
--- a/img/portable.png
+++ b/img/portable.png
--- a/img/routeur.png
+++ b/img/routeur.png
--- a/img/souris.png
+++ b/img/souris.png
--- a/img/switch.png
+++ b/img/switch.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <h1>Les modèles d'ordinateurs</h1>
    <ul>
        <li id="fixe">Ordinateur fixe</li>
        <li id="portable">Ordinateur portable</li>
    </ul>
    <img id="img-pc" src="img/ordinateur.png" alt="ordinateur fixe">
    <h2>Des périphériques</h2>
    <button id="btn-suivant">Image suivante</button>
    <img id="img-peripherique" src="" alt="un périphérique">
    <button id="btn-precedent">Image précédente</button>
    <script src="script.js" defer></script>
 </body>
 </html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,22 @@
 // A vous de jouer !
 // Identifie les deux élements de la liste fixe / portable
 const desktopLi = document.getElementById("fixe");
 const laptopLi = document.getElementById("portable");
 // Ajouter d'un observateur d'évènement sur ces éléments, faisant appel à la fonction définie ci-dessous
 desktopLi.addEventListener("click", () => { selectComputerPicture("fixe"); });
 laptopLi.addEventListener("click", () => { selectComputerPicture("portable"); });
 // Fonction modifiant l'application de la classe "selected" à un élément, à compléter
 function selectComputerPicture(type) {
    if (type === "fixe") {
        console.log("fixe")
        desktopLi.classList.add("selected");
        laptopLi.classList.remove("selected");
    } else if (type === "portable") {
        console.log("portable")
        laptopLi.classList.add("selected");
        desktopLi.classList.remove("selected");
    }
 }
--- a/style.css
+++ b/style.css
@@ -0,0 +1,4 @@
 .selected{
    color: red;
 font-weight: bold;
 }