Giriş

Mini projeler, JavaScript öğrenirken hızlı geri bildirim almanızı sağlar ve temel kavramları pratik olarak tekrarlamanıza yardımcı olur. Bu yazıda her biri yaklaşık 5 dakikada tamamlanabilecek beş mini proje bulacaksınız: renk değiştirici, palindrom kontrolü, rastgele alıntı üretici, kronometre ve kalıcı yapılacaklar listesi. Bu tür kısa uygulamalar, DOM manipülasyonu, olay işleme ve temel API kullanımı konularını pratikte görmenizi sağlar; benzer örnek koleksiyonları için 5minsofcode ve eğitim önerilerini JET Academy üzerinde bulabilirsiniz. Ayrıca adım adım video anlatımlar için bir eğitim kaynağı: Class Central video.

Hızlı Başlangıç — Gerekli Araçlar

• Basit bir metin editörü veya IDE (ör. Visual Studio Code).
• Modern bir tarayıcı (Chrome, Firefox, Edge vb.).
• Proje dizini: index.html ve script.js dosyaları.
• Canlı önizleme için Live Server eklentisi (isteğe bağlı).

Her proje için kısa bir HTML iskeleti ve bir adet JavaScript dosyası yeterlidir. Aşağıdaki projelerde temel DOSYALAR, adım adım yapılacaklar ve basit kod parçacıkları yer alıyor.

1) Renk Değiştirici (Color Switcher)

Amaç: Bir butona tıklandığında sayfanın arka plan rengini değiştirmek. Bu proje DOM seçimi ve olay dinleyici eklemeyi öğretiyor.

1. index.html içinde bir buton oluşturun.
2. script.js içinde butonu seçin ve click olayına bir fonksiyon bağlayın.
3. Renkleri bir dizide tutup rastgele bir eleman seçin veya sırayla ilerletin.

Basit HTML iskeleti (index.html):
<!DOCTYPE html>
<html lang="tr">
<head><meta charset="utf-8"><title>Renk Değiştirici</title></head>
<body>
<button id="colorBtn">Rengi Değiştir</button>
<script src="script.js"></script>
</body>
</html>

script.js (temel):
const btn = document.getElementById('colorBtn');
const colors = ['#FF6B6B', '#4ECDC4', '#FFE66D', '#556270', '#C7F464'];
btn.addEventListener('click', () => {
const next = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = next;
});

• Hızlı kontrol listesi: buton çalışıyor mu, renk değişiyor mu, konsolda hata var mı?
• Geliştirme önerileri: renk geçişleri için CSS transition ekleyin veya klavye kısayolu ekleyin.

Ne öğrenirsiniz: DOM seçimi, addEventListener, stil güncelleme. Bu tür küçük uygulamalar DOM ve olay işleme pratiği sağlar (kaynak).

2) Palindrom Kontrolü

Amaç: Kullanıcıdan alınan metnin palindrom (tersten okunuşu aynı) olup olmadığını kontrol etmek. Bu, string işleme ve temel algoritma mantığını öğretir.

1. Basit bir input ve kontrol butonu oluşturun.
2. Metni normalize edin: küçük harfe çevirme ve alfasayısal olmayan karakterleri temizleme.
3. Temizlenmiş metni ters çevirip karşılaştırın.

Örnek JS kontrol fonksiyonu:
const raw = document.getElementById('textInput').value;
const cleaned = raw.toLowerCase().replace(/[^a-z0-9]/g, '');
const isPal = cleaned === cleaned.split('').reverse().join('');
// Sonucu göster

Not: Bu basit sürüm Latin alfabesi ve rakamlar için uygundur; aksanlı karakterler ve diğer yazı sistemleri için ek normalizasyon gerekebilir.

• Geliştirme önerileri: büyük/küçük harf duyarlılığı, boşlukları yok sayma, kullanıcıya vurgulu geri bildirim ekleme.

3) Rastgele Alıntı Üretici

Amaç: Bir düğmeye tıklandığında ekranda rastgele bir alıntı gösterme. Burada temel API isteği (fetch) kullanımıyla hata yakalama pratik edebilirsiniz.

1. Alıntıyı gösterecek bir alan ve yeni alıntı butonu oluşturun.
2. fetch kullanarak bir dış API'den rastgele alıntı çekin veya kod içinde bir yedek dizi kullanın.
3. Hata durumunda yedek alıntılardan gösterin.

Basit fetch örneği (script.js):
const quoteEl = document.getElementById('quote');
async function newQuote() {
try {
const res = await fetch('https://api.quotable.io/random');
if (!res.ok) throw new Error('Ağ hatası');
const data = await res.json();
quoteEl.textContent = `${data.content} — ${data.author}`;
} catch (err) {
const fallback = [{content: 'Basitlik güzeldir', author: 'Anonim'}];
const q = fallback[Math.floor(Math.random() * fallback.length)];
quoteEl.textContent = `${q.content} — ${q.author}`;
}
}

Not: Teknik olarak üçüncü taraf API'ler CORS veya ağ sorunlarına yol açabilir; bu yüzden her zaman bir fallback mekanizması koyun.

4) Kronometre (Stopwatch)

Amaç: Başlat/durdur/sıfırla işlevlerine sahip basit bir kronometre. Burada zamanlayıcı yönetimi ve setInterval kullanımı gösterilir.

Örnek mantık (script.js):
let startTime = 0, elapsed = 0, timer = null;
function start() {
startTime = Date.now() - elapsed;
timer = setInterval(() => {
elapsed = Date.now() - startTime;
display(elapsed);
}, 100);
}
function stop() { clearInterval(timer); }
function reset() { clearInterval(timer); elapsed = 0; display(0); }

display(ms) fonksiyonu ile dakika:saniye formatına dönüştürüp DOM'a yazdırın. Bu proje zaman hesaplama ve DOM güncelleme döngüsünü anlamanızı sağlar.

5) Kalıcı Yapılacaklar Listesi (Persistent To‑Do)

Amaç: Kullanıcı görevleri ekleyip silebilsin; liste sayfa yenilendiğinde kaybolmasın. Bunun için localStorage kullanacağız.

Örnek temel akış:
let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
function addTask(text) {
tasks.push({id: Date.now(), text});
localStorage.setItem('tasks', JSON.stringify(tasks));
render();
}
function removeTask(id) {
tasks = tasks.filter(t => t.id !== id);
localStorage.setItem('tasks', JSON.stringify(tasks));
render();
}

Not: localStorage, tarayıcıda basit veri saklamak için uygundur; hassas veya kritik veriler için sunucu tarafı çözümler değerlendirilmelidir.

Kısa Hata Ayıklama İpuçları

• Tarayıcı konsolunu (DevTools) açıp hata mesajlarını kontrol edin.
• DOM elementlerini seçerken id veya class isimlerinin doğru olduğundan emin olun.
• Network isteklerinde CORS veya ağ hatalarını Network sekmesinden inceleyin.

Projeleri Tamamladığınızda Ne Öğrenmiş Olursunuz?

• DOM manipülasyonu ve olay dinleyicilerinin nasıl kullanıldığını (seçme, güncelleme, event binding).
• Basit string ve dizi işlemleri (ör. ters çevirme, filtreleme).
• Temel zamanlayıcı yönetimi (setInterval / clearInterval) ve zaman hesaplama.
• Yerel veri depolama için localStorage kullanımı ve temel fetch ile API çağrıları.

Bu başlıklar ve pratikler hakkında daha fazla örnek ve kısa egzersizler için 5minsofcode ve JET Academy kaynaklarına göz atabilirsiniz.

İleriye Dönük Adımlar

• Projeleri birleştirerek daha büyük bir uygulama oluşturun (ör. yapılacaklar listesinde zamanlayıcı ve hatırlatıcılar ekleyin).
• CSS ile kullanıcı arayüzünü güzelleştirin; küçük animasyonlar ekleyin.
• Basit testler yazın veya kodu modüler hale getirip tekrar kullanılabilir fonksiyonlar oluşturun.

Kaynaklar

• 5minsofcode — 5 dakikada kodlama örnekleri
• JET Academy — Başlangıç dostu JS projeleri
• Class Central — Video: 5 mini JavaScript projesi

Bu kısa projeler öğrenme sürecinde hız kazanmanızı sağlar. Küçük, tamamlanabilir hedefler belirleyin; sonra üzerine özellikler ekleyerek büyütün. İyi kodlamalar!