Galeri ızgarası oluşturma

forEach ve createElement ile her görsel için kart oluşturup ızgaraya eklersin.

forEach ile kart oluşturma

images dizisindeki her görsel için bir kart oluşturmalıyız. forEach diziyi dolaşır ve her öğe için bir geriçağırı çalıştırır.

Her görsel için:

document.createElement('figure') ile kart öğesi
document.createElement('img') ile görsel
img.src = image.url ile kaynak
gallery.appendChild(card) ile ekleme

Bunları renderGrid fonksiyonunda toplayacağız.

Şablon dizelerle öznitelik

Görselin kaynağını ayarlamak için img.src özelliğine değer atarız. Değer bir değişkenden geliyorsa img.src = image.url yazmak yeterlidir.

Daha karmaşık dizeler için şablon dize (template literal) kullanırız: geri tırnak içinde ${...} ile ifade gömeriz. Örneğin img.alt = `Görsel: ${image.title}` başlığı alternatif metne katar.

Bu şekilde her kart hem görsel hem de başlık taşır.

Uygulama renderGrid fonksiyonunu yaz

Önceki dersin çözümünün üzerine devam et. images parametresi alan renderGrid fonksiyonu yaz. images.forEach ile her görsel için: bir figure, bir img ve bir figcaption oluştur. img.src'yi image.url yap. img ve figcaption'ı figure'a, sonra figure'ı gallery'ye ekle.

Örnek çözümü göster

function renderGrid(images) ile başla, images.forEach(function(image) {...}) içinde createElement ile figure, img, figcaption oluştur, img.src = image.url yap ve gallery.appendChild(card) ile ekle.

Ö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" }
];

async function fetchImages(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    return await response.text();
  } catch (error) {
    console.log(error.message);
  }
}

function renderGrid(images) {
  images.forEach(function(image) {
    const card = document.createElement("figure");
    const img = document.createElement("img");
    const caption = document.createElement("figcaption");
    img.src = image.url;
    img.alt = image.title;
    caption.textContent = image.author;
    card.appendChild(img);
    card.appendChild(caption);
    gallery.appendChild(card);
  });
}

Kendini test et

forEach ne yapar?
```
images.forEach(function(image) {
  // ...
});
```
- Her öğe için bir fonksiyon çalıştırır
- Diziyi tersine çevirir
- Yeni bir dizi döndürür
- İlk öğeyi siler
Cevabı göster

Her öğe için bir fonksiyon çalıştırır — Doğru! forEach her öğe için verilen fonksiyonu çağırır.
appendChild çağrısını tamamla
```
gallery.____;
```
Cevabı göster
```
gallery.appendChild(card);
```
DOM yöntemlerini eşleştir

createElement

Yeni öğe oluşturma
appendChild

Öğeyi ekleme
forEach

Diziyi dolaşma
img.src

Görsel kaynağı

Sıradaki ders: Büyük görsel görünümü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler