🎭📂🪗 JavaScript ile Modal, Dropdown ve Accordion Yapımı

“Butona bastım… ekranda bir şeyler oluyor ama NEDEN?”

Frontend dünyasında bazı bileşenler vardır ki:

• Kullanıcıyı durdurur 🛑
• Seçim yaptırır 🤔
• Düzeni sağlar 🧘

İşte bugün bu UI Avengers üçlüsünü yapıyoruz:

1. Modal → Sahneye dramayla girer
2. Dropdown → Sessiz ama kullanışlı
3. Accordion → Düzen takıntılı ama haklı

Hepsi sade HTML + CSS + JavaScript
Framework yok. Bahane yok. Öğrenmek var 😎

---

🎭 1. MODAL – “DUR! Bunu görmeden gidemezsin”

Modal dediğimiz şey aslında şudur:

“Normalde gizliyim ama biri butona bastığında BOOM 💥 ekrana düşerim.”

🎯 Kullanım Alanları

• Giriş / kayıt ekranı
• Uyarılar
• “Kabul ediyorum” dramaları
• Kampanya popupları (evet, o sinir bozucular)

---

🧱 HTML – İskeleti Kuralım

<button id="openModal">Modal Aç 🚀</button>

<div class="modal" id="modal">
  <div class="modal-content">
    <span class="close" id="closeModal">×</span>
    <h2>Ben Bir Modalım 👋</h2>
    <p>Korkma, sadece bilgi veriyorum.</p>
  </div>
</div>

🧠 Ne oluyor burada?

• modal → Arka plan (karartma)
• modal-content → Beyaz kutu (esas yıldız)
• × → “Kapat beni” çığlığı

---

🎨 CSS – Sahne Işıkları

.modal {
  display: none; /* En önemli satır */
  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;
}

🧠 Altın bilgi:
display: none yoksa modal doğar doğmaz bağırır.

---

⚙️ JavaScript – Hayat Veriyoruz

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";
});

😄 JS mantığı:

“Göster → Gizle → Tekrar Göster”
JavaScript minimalizmi sever.

---

💡 Modal İpuçları

• ESC ile kapatma ekleyebilirsin
• Arka plana tıklayınca kapatabilirsin
• classList.toggle ile daha temiz yazılır
• Animasyon eklersen +100 karizma

---

📂 2. DROPDOWN – “Açılır ama taşmaz”

Dropdown =

“Küçük menü, büyük sorumluluk.”

---

🧱 HTML

<button id="dropdownBtn">Menü ⬇️</button>

<ul id="dropdownMenu" class="dropdown">
  <li>Profil</li>
  <li>Ayarlar</li>
  <li>Çıkış</li>
</ul>

---

🎨 CSS

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

---

⚙️ JavaScript – Toggle Sihri

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

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

🧠 Buradaki sihir:
Her tıklamada şu soru sorulur:

“Açık mıyım, kapalı mıyım?”

---

💡 Dropdown İpuçları

• Dışarı tıklayınca kapanmalı (ileri seviye)
• Mobilde dokunma hassas
• Çok açılırsa UX ağlar 😢

---

🪗 3. ACCORDION – “Düzen şart!”

Accordion =

“Aynı anda her şey açık olamaz arkadaş.”

---

🧱 HTML

<button class="accordion-btn">Soru 1 ❓</button>
<div class="panel">Cevap 1</div>

<button class="accordion-btn">Soru 2 ❓</button>
<div class="panel">Cevap 2</div>

---

🎨 CSS

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

---

⚙️ JavaScript – Komşuyu Bul

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";
  });
});

🧠 nextElementSibling nedir?

“Benim hemen altımdaki elementi getir.”

Accordion’ların bel kemiği 💪

---

💡 Accordion İpuçları

• Aynı anda sadece biri açık olsun istiyorsan:
  • Önce tüm panelleri kapat
• Animasyonla efsane olur
• FAQ sayfalarının gizli kahramanı

---

🧠 Genel Frontend Altın Bilgiler

• display yerine class toggle kullan → temiz kod
• JS = davranış, CSS = görünüm
• Küçük bileşen = büyük etki
• UX düşünmeden yazılan kod = çöp 😅

---

🎬 Kapanış

JavaScript UI yazmak şuna benzer:

“Bir düğmeye bastın…
arkada minik bir mantık çarkı dönüyor.”

Modal sahne yapar 🎭
Dropdown usulca açılır 📂
Accordion düzen ister 🪗