CodeBlanks Logo Icon CodeBlanks

Proje sonu - Alışveriş sepeti

JavaScript kursu · Başlangıç · Ders 58/133

Sepet uygulamasını tamamlayıp eklenen ürünleri ve toplam tutarı gösterirsin.

Şimdiye kadar ne yaptık?

Önceki dört derste şunları kurduk:

  • Boş bir cart dizisi tanımladık.
  • productNames ve productPrices dizilerini ekledik.
  • push ile sepete iki ürün ekledik.
  • Bir for döngüsüyle ürünleri listeledik.
  • Bir total toplayıcıyla fiyatları topladık.

Son adım, bunları tek bir düzgün akışta birleştirmek: sepeti yazdır, döngü içinde hem listele hem topla, son olarak toplamı göster.

Tek döngüde listele ve topla

Son adımda iki ayrı döngü yerine tek bir döngü kullanacağız. Döngü her ürün için hem console.log ile bilgi yazdırsın hem de total += productPrices[cart[i]] ile fiyatı eklesin.

Böylece kod daha kısa ve anlaşılır olur. Döngüden önce bir başlık, döngüden sonra toplamı yazdırırız.

Uygulama Sepet uygulamasını tamamla

Kodu tek bir düzgün akışta birleştir. Bir console.log ile sepet başlığını yazdır, sonra tek bir for döngüsü içinde hem her ürünü console.log(productNames[cart[i]], productPrices[cart[i]]) ile listele hem de total += productPrices[cart[i]] ile fiyatı topla. Döngüden sonra toplamı yazdır.

Örnek çözümü göster
// Alışveriş sepeti uygulaması

// Ürün adları ve fiyatları
const productNames = ["Kalem", "Defter", "Silgi"];
const productPrices = [15, 30, 10];

// Sepet
const cart = [];
cart.push(0);
cart.push(2);

// Sepeti listele ve toplamı hesapla
let total = 0;
console.log("Sepet:");
for (let i = 0; i < cart.length; i++) {
  console.log(productNames[cart[i]], productPrices[cart[i]]);
  total += productPrices[cart[i]];
}
console.log("Toplam:", total);

Proje tamam!

Tebrikler! Beş dersin sonunda çalışan bir alışveriş sepeti uygulaman var:

  • Ürünleri iki paralel diziyle tanımlar.
  • push ile sepete ürün ekler.
  • Tek bir for döngüsüyle hem listeler hem toplar.
  • Sonuçta sepet içeriğini ve toplam tutarı gösterir.

Sonraki bölümlerde bu yapıyı nesnelerle ve fonksiyonlarla nasıl güçlendireceğini öğreneceksin.

Kendini test et

  1. Sepet uygulamasında hangi yapı bir ürünü temsil eder?

    • productNames ve productPrices dizilerinde aynı indeksteki elemanlar
    • cart dizisinin ilk elemanı
    • console.log çıktısındaki bir satır
    • let total değişkeni
    Cevabı göster

    productNames ve productPrices dizilerinde aynı indeksteki elemanlar — Doğru! Bir ürünün adı ve fiyatı iki paralel dizide aynı indekste durur.

  2. Sepet başlığını yazdır

    const cart = [0, 2];
    let total = 25;
    ____
    console.log("Sepet:", cart.length, "ürün");
    Cevabı göster
    const cart = [0, 2];
    let total = 25;
    console.log("Toplam:", total);
    console.log("Sepet:", cart.length, "ürün");
  3. Proje adımlarını eşleştir

    const cart = []
    Boş sepeti tanımlar
    cart.push(0)
    Sepete ilk ürünü ekler
    for (let i = 0; ...)
    Sepette dolaşır
    total += productPrices[cart[i]]
    Fiyatı toplama ekler

Başlangıç bölümündeki tüm dersler