Proje: Galeri uygulaması

JavaScript kursu · Orta seviye · Ders 95/134

5 derslik galeri projesine genel bakış: API'den görsel çekme, ızgara ve büyük görünüm.

Proje: Galeri uygulaması

Bu 5 derslik projede bir galeri uygulaması geliştireceğiz: API'den görsel listesi çekilir, bir izgarada küçük görseller gösterilir ve bir karta tıklanınca büyük görünüm açılır.

Şu kavramları birleştireceğiz:

async/await ile fetch çağrısı
createElement ile kart oluşturma
forEach ile dolaşıp appendChild ile ekleme
addEventListener ile tıklama dinleme
classList ile büyük görünüm açma/kapama

Her ders önceki dersin çözümünün üzerine eklenir.

Galerinin iskeleti

Galeri üç parçadan kurulur:

#app: ana kapsayıcı
div.gallery: küçük görsellerin dizildiği ızgara
div.modal: tıklanınca açılan büyük görünüm

İlk dersin sonunda #app içine bir h1 başlığı ve div.gallery öğesini eklemiş olacağız. Ayrıca gerçekçi görünmesi için elde hazır bir images dizisi olacak; her öğe url, title ve author alanlarını taşıyor.

Uygulama Başlığı ve ızgarayı kapsayıcıya ekle

Bu ilk adımda #app kapsayıcısını seç, bir h1 öğesi oluştur, metnini "Galeri" yap ve kapsayıcıya ekle. Sonra bir div oluştur, sınıfını gallery yap ve yine app'e ekle. Son olarak images adında bir dizi tanımla; içine en az bir nesne koy (url, title, author alanları ile).

Örnek çözümü göster

Önce getElementById ile kapsayıcıyı seç, sonra createElement ile h1 ve div oluştur, sınıfı ayarla ve appendChild ile ekle. Son olarak const images = [...] tanımla.

Örnek çözüm:
// Galeri uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Galeri";
app.appendChild(title);

const gallery = document.createElement("div");
gallery.className = "gallery";
app.appendChild(gallery);

const images = [
  { url: "https://picsum.photos/id/1/200/200", title: "Dağ manzarası", author: "Ayşe" },
  { url: "https://picsum.photos/id/2/200/200", title: "Şehir sokakları", author: "Mehmet" },
  { url: "https://picsum.photos/id/3/200/200", title: "Göl kıyısı", author: "Zeynep" }
];

Kendini test et

Galeri uygulamasının ana akışı nedir?
- İzgarayı önce, çekmeyi sonra yaparız
- Çekme, izgara, büyük görünüm sırasıyla
- Sadece büyük görünüm gösterilir
- Önce büyük görünüm, sonra izgara
Cevabı göster

Çekme, izgara, büyük görünüm sırasıyla — Doğru! Önce görselleri çeker, sonra izgarayı kurar, en son büyük görünümü ekleriz.

createElement ile div oluştur

const gallery = document.____;

Cevabı göster

const gallery = document.createElement('div');

Kavramı görevine eşleştir

fetch

Görsel listesini çekme
createElement

Kart öğesi oluşturma
forEach

Her görselde dolaşma
addEventListener

Tıklama dinleme
classList

Büyük görünüm açma

Proje: Galeri uygulaması