🎭📂🪗 Créer un Modal, un Dropdown et un Accordion avec JavaScript

« J’ai cliqué sur le bouton… quelque chose s’est passé à l’écran, mais POURQUOI ? »

Dans le monde du frontend, il existe des composants qui :

• Arrêtent l’utilisateur 🛑
• Forcent une décision 🤔
• Mettent de l’ordre dans le chaos 🧘

Aujourd’hui, nous construisons ce trio Avengers de l’UI :

• Modal → Entre en scène avec beaucoup de drame
• Dropdown → Discret mais ultra utile
• Accordion → Un peu obsessionnel avec l’ordre… mais il a raison

Le tout en HTML + CSS + JavaScript purs
Pas de framework. Pas d’excuses. Juste de l’apprentissage 😎

🎭 1. MODAL – « STOP ! Tu ne peux pas partir sans voir ça »

Un modal, c’est essentiellement ça :

« Normalement je suis caché, mais quand quelqu’un clique sur un bouton — BOOM 💥 — j’apparais à l’écran. »

🎯 Cas d’utilisation

• Écrans de connexion / inscription
• Avertissements
• Drames du type « J’accepte »
• Pop-ups de campagne (oui… ceux qu’on déteste)

🧱 HTML – Construisons le squelette

<button id="openModal">Open Modal 🚀</button>

<div class="modal" id="modal">
  <div class="modal-content">
    <span class="close" id="closeModal">×</span>
    <h2>I’m a Modal 👋</h2>
    <p>Relax, I’m just here to inform you.</p>
  </div>
</div>

🧠 Que se passe-t-il ici ?

• modal → L’arrière-plan sombre (overlay)
• modal-content → La boîte blanche (la star du show)
• × → Le cri « ferme-moi, s’il te plaît »

🎨 CSS – Lumières, caméra, action

.modal {
  display: none; /* La ligne la plus importante */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.modal-content {
  background: white;
  padding: 20px;
  width: 300px;
  margin: 100px auto;
  border-radius: 10px;
}

.close {
  cursor: pointer;
  font-size: 24px;
}

🧠 Conseil en or :
Sans display: none, le modal commence à crier dès sa naissance.

⚙️ JavaScript – Lui donner vie

const modal = document.getElementById("modal");
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeModal");

openBtn.addEventListener("click", () => {
  modal.style.display = "block";
});

closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

😄 La logique JS en résumé :

« Afficher → Cacher → Réafficher »
JavaScript adore le minimalisme.

💡 Astuces pour le Modal

• Ajouter la fermeture avec la touche ESC
• Cliquer sur l’arrière-plan pour fermer
• classList.toggle rend le code plus propre
• Ajouter des animations = +100 de charisme

📂 2. DROPDOWN – « Il s’ouvre, mais reste sage »

Un dropdown, c’est :

« Petit menu, grande responsabilité. »

🧱 HTML

<button id="dropdownBtn">Menu ⬇️</button>

<ul id="dropdownMenu" class="dropdown">
  <li>Profile</li>
  <li>Settings</li>
  <li>Logout</li>
</ul>

🎨 CSS

.dropdown {
  display: none;
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
}

⚙️ JavaScript – La magie du toggle

const btn = document.getElementById("dropdownBtn");
const menu = document.getElementById("dropdownMenu");

btn.addEventListener("click", () => {
  menu.style.display =
    menu.style.display === "block" ? "none" : "block";
});

🧠 La magie ici :
À chaque clic, JS pose une seule question :

« Suis-je ouvert ou fermé ? »

💡 Astuces pour le Dropdown

• Cliquer à l’extérieur devrait le fermer (niveau avancé)
• La sensibilité tactile est cruciale sur mobile
• Trop de dropdowns = UX en pleurs 😢

🪗 3. ACCORDION – « L’ordre avant tout »

Un accordion, c’est :

« Tout ne peut pas être ouvert en même temps, mon ami. »

🧱 HTML

<button class="accordion-btn">Question 1 ❓</button>
<div class="panel">Answer 1</div>

<button class="accordion-btn">Question 2 ❓</button>
<div class="panel">Answer 2</div>

🎨 CSS

.panel {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
}

⚙️ JavaScript – Trouver le voisin

const buttons = document.querySelectorAll(".accordion-btn");

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    const panel = btn.nextElementSibling;

    panel.style.display =
      panel.style.display === "block" ? "none" : "block";
  });
});

🧠 Qu’est-ce que nextElementSibling ?

« Donne-moi l’élément juste après moi. »

La colonne vertébrale des accordions 💪

💡 Astuces pour l’Accordion

• Tu veux qu’un seul panneau soit ouvert à la fois ?
  • Ferme d’abord tous les panneaux
• Avec des animations, c’est magique
• Le héros secret des pages FAQ

🧠 Règles d’or du Frontend

• Utilise des classes au lieu de display → code propre
• JS = comportement, CSS = apparence
• Petits composants = gros impact
• Du code sans UX = du code poubelle 😅

🎬 Mot de la fin

Écrire des interfaces UI en JavaScript, c’est un peu comme ça :

« Tu cliques sur un bouton…
et en coulisses, une petite machine logique se met à tourner. »

Le modal adore le drame 🎭
Le dropdown s’ouvre poliment 📂
L’accordion exige de l’ordre 🪗