Giriş

Yeni başlayan biriyseniz veya hızlı bir pratik turu yapmak istiyorsanız, kısa süre içinde tamamlanıp fayda sağlayan mini projeler en iyi yoludur. Bu yazıda her biri yaklaşık 5 dakikada yapılabilecek üç mini JavaScript projesi sunuyorum: Yaş Hesaplayıcı, Görev Listesi ve Kullanıcı Profil Kartı. Temel amaç DOM manipülasyonu, olay dinleyicileri ve basit veri kontrolü gibi kavramları uygulamalı öğrenmektir.

Hazırlık — Gerekenler

• Temel bir metin editörü (VS Code, Notepad++ veya basit Notepad).
• Modern bir web tarayıcısı (Chrome, Firefox veya Edge).
• Basit HTML dosyası oluşturma bilgisi. Alternatif olarak CodePen veya JSFiddle gibi çevrimiçi ortamlar kullanılabilir.

Neden bu üç proje?

Bu projeler, kısa sürede tamamlanabilecek şekilde seçildi ve her biri farklı temel beceriyi pekiştirir: kullanıcı girdisi ve tarih işlemleri (Yaş Hesaplayıcı), DOM üzerinde liste yönetimi ve olaylar (Görev Listesi), ve veri gösterimi ile basit düzenleme etkileşimleri (Profil Kartı). Daha fazla örnek ve ilham için MasterJS ve topluluk projelerine bakabilirsiniz: MasterJS ve Parve5h — JavaScript Mini Projects.

1) Yaş Hesaplayıcı — Yaklaşık 5 dakika

Ne yapar: Kullanıcının doğum yılı girildiğinde güncel yaşını hesaplar. Hangi kavramlar uygulanır: DOM erişimi, kullanıcı girdisi okuma, tarih işlemleri ve basit doğrulama.

1. HTML oluşturun. Örnek yapı (index.html içine):

<input id="birth" type="number" placeholder="Doğum yılınızı girin (ör. 1990)">
<button id="calc">Hesapla</button>
<p id="result"></p>

2. JavaScript ekleyin (aynı dosyada <script> içinde veya ayrı bir .js dosyasında):

document.getElementById('calc').addEventListener('click', function() {
const y = Number(document.getElementById('birth').value);
const now = new Date().getFullYear();
if (!y || y > now) {
document.getElementById('result').textContent = 'Lütfen geçerli bir yıl girin.';
return;
}
document.getElementById('result').textContent = 'Yaşınız: ' + (now - y);
});

Açıklama ve ipuçları:

• new Date().getFullYear() ile şu anki yılı alıyoruz.
• Girilen değeri Number() ile sayıya çevirin ve basit doğrulama yapın (boş veya gelecekteki yıl olmasın).
• Genişletme fikirleri: doğum tarihini (gün/ay/yıl) alıp daha hassas yaş hesaplaması yapmak veya sonuçları yerel depolamaya (localStorage) kaydetmek.

2) Görev Listesi (To‑Do) — Yaklaşık 5 dakika

Ne yapar: Yeni görev ekleme, görevleri tamamlandı olarak işaretleme ve çift tıklama ile silme. Hangi kavramlar uygulanır: element oluşturma, olay dinleyicileri, DOM güncelleme.

1. Basit HTML:

<input id="task" placeholder="Yeni görev">
<button id="add">Ekle</button>
<ul id="list"></ul>

2. JavaScript (ekleme, tamamlama, silme):

document.getElementById('add').addEventListener('click', function() {
const val = document.getElementById('task').value.trim();
if (!val) return; // boşsa ekleme
const li = document.createElement('li');
li.textContent = val;
// tek tıklama: tamamla/geri al
li.addEventListener('click', function() {
this.style.textDecoration = this.style.textDecoration === 'line-through' ? 'none' : 'line-through';
});
// çift tıklama: sil
li.addEventListener('dblclick', function() { this.remove(); });
document.getElementById('list').appendChild(li);
document.getElementById('task').value = '';
});

Notlar ve geliştirmeler:

• Bu basit örnek, olayları ve DOM oluşturmayı gösterir. Görsel geri bildirim için CSS ile tamamlanmış öğelere başka bir sınıf ekleyebilirsiniz.
• Görevleri tarayıcı kapandıktan sonra saklamak için localStorage kullanılabilir; her eklemede listeden JSON oluşturup kaydetmek yeterlidir.
• Daha büyük uygulamalarda olay delegasyonu kullanmak performans ve yönetim açısından faydalıdır.

3) Kullanıcı Profil Kartı — Yaklaşık 5 dakika

Ne yapar: Basit bir profil kartı oluşturur; isim, avatar ve kısa açıklama gösterir. Hangi kavramlar uygulanır: DOM güncelleme, objeden veri okuma, kullanıcı etkileşimi (prompt ile düzenleme).

1. HTML iskeleti:

<div id="card">
<img id="avatar" src="https://via.placeholder.com/80" alt="avatar">
<h3 id="name">İsim</h3>
<p id="bio">Kısa açıklama</p>
<button id="edit">Düzenle</button>
</div>

2. JavaScript ile veri bağlayın ve düzenlemeyi açın:

const user = { name: 'Ayşe Yılmaz', bio: 'Frontend geliştirici', avatar: 'https://via.placeholder.com/80' };
document.getElementById('name').textContent = user.name;
document.getElementById('bio').textContent = user.bio;
document.getElementById('avatar').src = user.avatar;
document.getElementById('edit').addEventListener('click', function() {
const newName = prompt('Yeni isim', user.name);
if (newName) { user.name = newName; document.getElementById('name').textContent = user.name; }
});

Geliştirme önerileri:

• Profili form ile düzenleyip değişiklikleri localStorage veya bir API’ye gönderebilirsiniz.
• Rastgele profil verisi çekmek için RandomUser API gibi servisleri deneyebilirsiniz.

Hızlı ipuçları ve sık karşılaşılan durumlar

• Tarayıcı konsolunu (Developer Tools) kullanarak hataları hızlıca bulun. console.log() ile değişkenleri kontrol edin.
• Kullanıcı girdilerini her zaman doğrulayın (ör. sayı bekliyorsanız Number() ile dönüştürme ve NaN kontrolü yapın).
• Kodunuzu küçükçe adımlara bölün: önce HTML iskelet, sonra tek bir işlevi çalışan hale getirin, ardından genişletin.
• Daha fazla mini proje örneği ve görsel yönlendirme için MasterJS ve diğer topluluk koleksiyonlarına bakabilirsiniz: Vanilla JavaScript Projects.

Nasıl hızlıca denersiniz?

1) index.html oluşturun ve yukarıdaki HTML parçalarını yapıştırın.
2) <script> içinde JavaScript kodunu ekleyin veya ayrı bir .js dosyası oluşturup bağlayın.
3) Dosyayı çift tıklayıp tarayıcıda açın veya CodePen/JSFiddle’de canlı deneyin. Kod üzerinde değişiklik yapıp anında sonucu görebilirsiniz.

Kaynaklar ve daha fazla örnek

• MasterJS — Proje örnekleri ve açıklamalar — temel kavramları uygulamalı gösterir.
• JavaScript Mini Projects — Parve5h — çeşitli mini proje örnekleri içerir.
• Vanilla JavaScript Projects — HTML/CSS/JS ile yapılmış çok sayıda mini proje.

Sonuç

Bu üç mini proje, JavaScript’in temel kavramlarını kısa sürede uygulamalı öğrenmenizi sağlar. Her proje basit tutulduğundan genişletme seçenekleri çoktur: veri kalıcılığı, daha iyi UX, API entegrasyonu gibi adımlar ilerlediğinizde ekleyebileceğiniz doğal geliştirmelerdir. Uygulama örnekleri ve daha fazla ilham için yukarıdaki kaynaklara göz atabilirsiniz.