Examen

Ouverture de la navigation

• Le bouton en haut à droite de la page doit ouvrir la navigation ;
• La fermer si elle est ouverte (on a fait tout ça en cours 👌).

La navigation est encadrée par les commentaires <-- Navigation principale --> dans le html.

Rollover sur les cartes

• Au survol (mouseover) avec la souris, les cartes doivent avoir un effet (évidemment réalisé avec l'aide de JS, mais peut être fait en combinaison avec CSS) ;
• À la sortie de la souris (mouseout), les cartes doivent perdre cet effet (on l'a aussi vu en cours 😎🤙).

Voir les infos

Au clic sur le bouton View de chaque carte de la grille ci-dessous :

• Affichage de la zone des informations de la même carte, présente par défaut dans le code de la page et encadrée par les commentaires <-- Infos étudiant --><-- /Infos étudiant -->
• Elle est stylée en CSS pour être masquée avec la classe hidden (et visible sans).
• Quand la zone d'informations est visible, le bouton View reçoit l'état actif (classe active).
• Un nouveau clic sur le bouton ferme la zone et supprime l'état actif du bouton.

Ça semble familier ? Vu en cours ! 🤙

Éditer les infos

Chaque bouton Edit fait la même chose ET rend la zone d'informations éditable (attribut contenteditable="true")

Ok, pas vu en co… MAIS SI. 🤩

Classes CSS disponibles

• show : affiche un élément autrement masqué
• hidden : masque un élément autrement visible
• over : ajoute un effet de grossissement (qui pourrait servir d'effet au survol…)

Rappels

Pour rappel, les enseignements de nos cours :

• Bases : ⚠️ syntaxe, console ouverte (TOUT. LE. TEMPS.),
• Types de données : String, Number, Boolean, [Array], {Object}
• Variables : const VS let
• Conditions : if, else if, else
• Opérateurs : = ≠ ==
• Fonctions : déclaration, exécution (appel), paramètres
• DOM : sélectionner, modifier (texte, contenu HTML, attributs, classes)
• Évènements : qui - quoi - pour quoi (action)
• Boucles : for, for…of

Syntaxe

Fonctions
function saluer(nom) { console.log("Bonjour " + nom); }
saluer("Maria");

DOM
document.getElementById("id")
document/element.querySelector("selecteur")
document/element.querySelectorAll("selecteur")
element.setAttribute("nom-de-l-attribut", "valeur-de-l-attribut")
element.getAttribute("nom-de-l-attribut")
element.removeAttribute("nom-de-l-attribut")
element.classList.add("nom-de-la-classe")
element.classList.remove("nom-de-la-classe")
element.classList.contains("nom-de-la-classe")
element.classList.toggle("nom-de-la-classe")

Évènements
element.addEventListener("évènement", function () { … });

Boucles
for (let i = 0; i < 3; i++) {
  console.log(i);
}
for (let item of tableau) {
  console.log(item);
}

Exemple
const elements = document.querySelectorAll(".element");
for (let element of elements) {
  element.addEventListener…
  element.classList…
}