Proje sonu - Galeri
Galeri uygulamasını tamamlayıp çekme, ızgara ve büyük görünüm akışını çalıştırırsın.
Proje sonu: ana akış
Üç parça hazır: fetchImages veri çekiyor, renderGrid ızgarayı kuruyor, modal büyük görünümü açıyor. Şimdi hepsini bir main fonksiyonunda birleştireceğiz.
main, async olur çünkü fetchImages'ı await ile bekleyebilir. Akış:
- görsel listesini çek
- ızgarayı çiz
- modal dinleyicileri hazır (önceki ders)
Son olarak main() çağrısıyla uygulamayı başlatırız.
Uygulamayı başlatma
main fonksiyonunu yazdıktan sonra dosyanın sonunda main() ile çağırırız. Tarayıcı kodu yukarıdan aşağı okuduğu için tüm tanımlar hazır olduktan sonra main() çalışır.
İçinde renderGrid(images) ile ızgarayı çizeriz. Bu örnekte hazır images dizisini kullandık; gerçek bir uygulamada önce await fetchImages(url) ile veriyi çekip sonra renderGrid'e verebilirsin.
Bu, projeyi tamamlayan son adımdır.
Uygulama main fonksiyonunu yaz ve çağır
Önceki dersin çözümünün üzerine devam et. async function main() yaz. İçinde renderGrid(images) çağrısı yap. Sonra fonksiyon dışında main() çağrısı ekle.
Örnek çözümü göster
async function main() ile başla, içinde renderGrid(images); çağır. Sonra fonksiyonun dışında main(); yazarak uygulamayı başlat.
Ö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);
});
}
// Büyük görünüm modalı
const modal = document.createElement("div");
modal.classList.add("hidden");
const modalImg = document.createElement("img");
app.appendChild(modal);
modal.appendChild(modalImg);
gallery.addEventListener("click", function(event) {
if (event.target.tagName === "IMG") {
modalImg.src = event.target.src;
modal.classList.remove("hidden");
}
});
modal.addEventListener("click", function() {
modal.classList.add("hidden");
});
async function main() {
renderGrid(images);
}
main();Kendini test et
-
main neden async olmalı?
async function main() { const data = await fetchImages(url); // ... }- Çünkü daha hızlı çalışır
- Çünkü await fetchImages kullanır
- Çünkü modal gerektirir
- Çünkü async olmazsa hata verir
Cevabı göster
Çünkü await fetchImages kullanır — Doğru! await kullanmak için fonksiyon async olmalı.
-
renderGrid çağrısını tamamla
async function main() { ____; } main();Cevabı göster
async function main() { renderGrid(images); } main(); -
Dersi özelliğine eşleştir
- 1. ders
- İskelet ve başlık
- 2. ders
- API'den çekme
- 3. ders
- Izgara kurma
- 4. ders
- Büyük görünüm
- 5. ders
- main ile başlatma