MON 2.1 : Bases Dev Web HTML/CSS/JS

J'ai passé la plus grande partie de ces 10h à revoir les bases HTML/CSS/JS sur différents sites comme :

• Site de tutos HTML/CSS

• Apprendre le javascript

Beaucoup de personnes ayant déjà fait des tutoriels sur les bases du dev web au temps 1, j'ai pensé qu'il serait plus judicieux de me consacrer à l'explication d'éléments intéressants à ajouter à une page web comme un carrousel.

Voici donc le tutoriel pour le réaliser.

Tutoriel Carrousel

Ce tutoriel consiste en l'explication, étape par étape, du code obtenu à l'adresse suivante : Tuto carrousel.

Étape 1 : Squelette du carrousel

Dans le body de notre fichier html, nous créons ici 2 éléments de type div qui constituent le squelette de notre carrousel.

<div class=carousel> 
    <div class="carousel_slot"> Mettre ici ce que vous voulez</div>
</div>

Le premier div de classe "carousel" sera la box contenant tous les slots. En effet, nous allons empiler les div "carousel_slot" puis n'afficher que celui sélectionné par l'utilisateur à l'aide d'attribution de classe.

Vous pouvez ajouter autant de "carousel_slot" que vous avez envie.

Un élément important de ce carousel est le div contenant les boutons de navigation. Il sera généré par une fonction js mais ressemble à ceci :

<div class="carousel_navigation">
        <span class="carousel_button"></span>
        <span class="carousel_button"></span>
        <span class="carousel_button"></span>
      </div>

(attention, il ne faut pas ajouter ce code au fichier html)

Étape 2 : Style CSS

L'affichage du slot sélectionné se fera par un changement de classes. Il est donc important de créer 4 classes de style distinct, à savoir :

Le style d'un slot par défaut

.carousel_slot{
  display: none;
  }

Il est possible de le styliser davantage mais l'attribut "display" doit absolument être fixé à "none" pour faire disparaître les slots non-désirés.

Le style du slot sélectionné

.carousel_selected_slot{
  display:block;
}

Similairement, ici l'attribut "display" doit être "block" pour rendre le slot visible.

Le style de bouton par défaut

.carousel_button{
  width: 10px;
  height: 10px;
  display: inline-block;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
}

Quelques précisions sur ces paramètres :

-inline-block = contrairement au inline, cet attribut respecte les attributs "margin" et "padding" mais permet aussi de définir une hauteur et largeur de l'élément.

-rgba : a désigne un paramètre alpha, allant de 0 à 1 qui définit la transparence.

-border-radius : indiquer une seule valeur permet de désigner la courbe des 4 coins (avec 50% on obtient un cercle).

• Le style du bouton sélectionné

.carousel_selected_button{
  background:rgba(255,255,255,1);
}

On obtient alors des cercles transparents et celui selectionné est plus visible que les autres.

Étape 3 : Changement de classes avec js

Comme mentionné au départ, la création des boutons va passer par une fonction js. Pour chaque "carousel_slot", on crée dans une array un bouton par défaut comme suit:

document.querySelectorAll(".carousel").forEach(carousel =>

  const items = carousel.querySelectorAll(".carousel_slot");
  const buttonsHtml = Array.from(items, () => {
      return `<span class="carousel_button"></span>`;
  });

Puis on place ces spans dans un div de navigation qu'on insère à son tour à l'intérieur du carrousel (spécifié par le paramètre "beforeend").

L'appel $buttonsHtml.join("")$ concatène les éléments de la liste. De plus l'argument de cette méthode, appelé le séparateur, définit se qui sépare les éléments dans la concaténation (ici rien d'où les deux guillements).

On obtient au final, le div de navigation comme montré à l'étape 1.

  carousel.insertAdjacentHTML(
      "beforeend", `<div class="carousel_navigation">
      ${buttonsHtml.join("")} </div>`
  );

Il est maintenant temps de changer faire fonctionner le carrousel en changeant les classes des slots et des boutons.

On commence par déselectionner tous les slots et boutons en réponse au click de l'utilisateur sur un bouton (on garde cependant son indice i).

  buttons.forEach((button, i) => {
      button.addEventListener("click", () => {
        items.forEach((item) =>
          item.classList.remove("carousel_selected_slot")
       buttons.forEach((button) =>
          button.classList.remove("carousel_selected_button")
      );

Au slot correspond au bouton d'indice i, on ajoute la classe du slot sélectionné ce qui le fait apparaîte. Et au bouton sur lequel on a cliqué, on lui attribue la classe du bouton selectionné, ce qui le rend moins transparent.

        items[i].classList.add("carousel_selected_slot");
        button.classList.add("carousel_selected_button");
    });

Enfin, il ne reste plus qu'à initialiser l'état du carrousel.

items[0].classList.add("carousel_selected_slot");
buttons[0].classList.add("carousel_selected_button");

});

Et voilà à quoi cela peut ressembler: