JavaScript ile Basit Calculator Yapımı

“Hesap yapar, drama yapmaz.” 🧮😄

JavaScript öğrenirken bazı mini projeler vardır:

• Küçük görünür
• Basit başlar
• Ama içinde çok fazla temel bilgi saklar

İşte Calculator (Hesap Makinesi) tam olarak böyle bir projedir.

“Ben JavaScript biliyorum” demenin
en mütevazı ama en etkili yollarından biri 😎

1️⃣ Koddan Önce: Mantığı Kuralım 🧠

(Çünkü plansız kod, karışık hayat demektir)

Bir calculator ne yapar?

1. Kullanıcı sayı girer
2. Bir işlem seçer
3. JavaScript hesaplar
4. Sonuç ekrana yazılır

Yani ihtiyacımız olanlar:

• 🟦 Input → sayı almak için
• 🟦 Button → işlem seçmek için
• 🟦 Function → hesap yapmak için
• 🟦 DOM → sonucu göstermek için

📌 Altın kural:

Kod yazmadan önce “Bu uygulama ne yapacak?” sorusuna cevap ver.

2️⃣ HTML: Calculator’ın İskeleti 🏗️

(Kas yok, beyin yok… ama ayakta duruyor)

<input type="number" id="num1" placeholder="1. sayı">
<input type="number" id="num2" placeholder="2. sayı">

<button onclick="hesapla('+')">+</button>
<button onclick="hesapla('-')">-</button>
<button onclick="hesapla('*')">*</button>
<button onclick="hesapla('/')">/</button>

<p id="sonuc">Sonuç: </p>

HTML’de Neler Oluyor?

🔹 <input type="number">

• Kullanıcıdan sayı alır
• Klavyede harf yazılmasını azaltır
• Ama yine de JavaScript kontrolü şart ⚠️

🔹 id kullanımı

id="num1"

JavaScript’in “gel buraya” demesi için 👋

🔹 onclick

<button onclick="hesapla('+')">

🧠 Bu şu demek:

“Bu butona basıldığında, hesapla fonksiyonunu çağır
ve hangi işlem olduğunu söyle.”

3️⃣ JavaScript: Calculator’ın Beyni 🧠⚡

Şimdi işin asıl olayı başlıyor.

function hesapla(islem) {
  let sayi1 = Number(document.getElementById("num1").value);
  let sayi2 = Number(document.getElementById("num2").value);
  let sonuc;

🔹 function hesapla(islem)

• Tek fonksiyon
• Dışarıdan işlem türünü alıyor
• Kod tekrarını azaltıyor (PRO hareket 😎)

🔹 Input’tan Değer Alma

let sayi1 = Number(document.getElementById("num1").value);

📌 Çok önemli detay:

• Input’tan gelen değer = string
• "2" + "3" → "23" ❌
• Number("2") + Number("3") → 5 ✅

Number() = felaket önleyici 😅

4️⃣ İşlem Seçimi: if / else Mantığı ⚙️

if (islem === "+") {
  sonuc = sayi1 + sayi2;
} else if (islem === "-") {
  sonuc = sayi1 - sayi2;
} else if (islem === "*") {
  sonuc = sayi1 * sayi2;
} else if (islem === "/") {
  sonuc = sayi1 / sayi2;
}

Burada Ne Yapıyoruz?

• Hangi butona basıldıysa
• Ona göre matematik yapıyoruz
• JavaScript: “Tamam, ben hallederim” diyor 😎

5️⃣ Sonucu Ekrana Yazdırma 🖥️✨

document.getElementById("sonuc").textContent =
  "Sonuç: " + sonuc;

📌 DOM manipülasyonu =

“HTML, artık ben konuşuyorum” anı 😄

6️⃣ Kritik Tuzak: Sıfıra Bölme ⚠️

(Matematik bile buna sinir olur)

if (islem === "/" && sayi2 === 0) {
  sonuc = "Sıfıra bölünemez!";
}

🧠 Profesyonel refleks:

Kullanıcıya ASLA güvenme 😅
Her zaman saçma bir şey yapabilir.

7️⃣ Daha Temiz ve Profesyonel Versiyon: switch-case ✨

switch (islem) {
  case "+":
    sonuc = sayi1 + sayi2;
    break;
  case "-":
    sonuc = sayi1 - sayi2;
    break;
  case "*":
    sonuc = sayi1 * sayi2;
    break;
  case "/":
    sonuc = sayi2 === 0
      ? "Sıfıra bölünemez"
      : sayi1 / sayi2;
    break;
}

📌 Avantajları:

• Okunabilirlik ↑
• Kod düzeni ↑
• “Bu işi bilen yazmış” hissi ↑

8️⃣ Mini Debug Rehberi 🐞🛠️

Bir şey çalışmıyorsa:

• ❓ console.log(sayi1, sayi2)
• ❓ console.log(islem)
• ❓ Input boş mu?
• ❓ Number() kullandın mı?

🧠 Debug = yazılımcının süper gücü 🦸‍♂️

9️⃣ Mini Proje Sana Ne Öğretti? 🎓

✔️ DOM’dan veri almayı
✔️ Event mantığını
✔️ Fonksiyon yazmayı
✔️ Koşul yapıları (if, switch)
✔️ Kullanıcı hatalarına karşı önlem almayı

Küçük proje → büyük özgüven 💪

🔟 Geliştirme Fikirleri (Level Atlamak İsteyenlere) 🚀

• ➕ % (mod alma) ekle
• 🧹 Clear (C) butonu
• ⌨️ Klavye ile işlem yapma
• 🎨 CSS ile gerçek calculator tasarımı
• 📱 Mobil uyumlu layout
• 🧠 Tek input’lu “gerçek” calculator mantığı

En Sık Yapılan Hatalar ❌

❌ Number() kullanmamak
❌ Input boşken hesap yapmak
❌ Her şeyi tek satıra sıkıştırmak
❌ Kod okunurluğunu umursamamak

✔️ Temiz kod = huzurlu zihin 😌

Kısa Ama Etkili Özet 🧠✨

• Calculator = JS öğrenmenin altın projelerinden
• Basit ama öğretici
• DOM + Function + Condition = tam paket
• Mini projeler seni gerçek geliştirici yapar 😎