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;
+}