Neden 5 dakikalık mini projeler?
Kısa süreli mini projeler, JavaScript öğrenirken kavramları (DOM, olay dinleyicileri, zamanlayıcılar) hızlıca uygulamaya geçirmenizi sağlar. Bu yazıda To‑Do listesi, canlı saat ve basit slider (resim döndürücü) için adım adım yönergeler bulacaksınız. Bu tür başlangıç projelerinin faydaları ve örnekleri için Patika.dev'in proje önerilerine göz atabilirsiniz: Patika.dev — Frontend proje önerileri. Ayrıca kişisel proje örnekleri ve ilham almak için farklı uygulama örneklerine göz atabilirsiniz: Yusuf SEZER — Projeler.
Genel hazırlık
- Gerekenler: Basit HTML, biraz CSS, temel JavaScript (getElementById, addEventListener, Date, setInterval).
- Çalışma ortamı: Herhangi bir metin editörü ve modern bir tarayıcı yeterli.
- Süre yönetimi: Her proje için amaç 5 dakikadır; örnekler başlangıç seviyesi olup hızlıca çalıştırılabilir.
1) 5 Dakikada To‑Do Listesi
Amaç
Kullanıcının görev girebileceği, listeleyebileceği ve hızlıca işaretleyebileceği basit bir To‑Do uygulaması oluşturmak.
Gereksinimler (basit HTML iskeleti)
Minimal HTML örneği (etiketler gösterim amaçlıdır):
HTML (örnek):
<input id="task" placeholder="Yeni görev" />
<button id="add">Ekle</button>
<ul id="list"></ul>
Adım adım (yaklaşık 5 dakika)
- HTML'yi oluşturun ve tarayıcıda açın.
- JavaScript'te giriş ve liste elemanlarını seçin:
const input = document.getElementById('task'); ve const list = document.getElementById('list'); - "Ekle" butonuna tıklandığında yeni <li> oluşturup içeriği ekleyin ve listeye ekleyin:
JavaScript (örnek):
const addBtn = document.getElementById('add');
addBtn.addEventListener('click', () => {
const text = input.value.trim();
if (!text) return; // boşsa çık
const li = document.createElement('li');
li.textContent = text;
list.appendChild(li);
input.value = '';
});
Hızlı genişletmeler (1–10 dk)
- Görevlerin yanına tamamlandı butonu veya checkbox ekleyin ve tamamlandığında stil değiştirin.
- localStorage kullanarak sayfa yenilense bile görevleri saklayın: localStorage.setItem ve localStorage.getItem.
- Silme ve düzenleme özellikleri ekleyin.
2) 5 Dakikada Canlı Saat
Amaç
Tarayıcıda gerçek zamanlı saat göstermek; JavaScript'in Date ve setInterval fonksiyonlarını öğrenmek için ideal.
Gereksinimler
Tek bir gösterge elemanı yeterli: <div id="clock"></div>.
Adımlar
- HTML'de <div id="clock"></div> ekleyin.
- JavaScript'te bir fonksiyon yazın: şu anki zamanı al, <div> içine yaz.
- setInterval ile fonksiyonu her saniye çağırın.
JavaScript (örnek):
const clock = document.getElementById('clock');
function updateClock() {
const now = new Date();
clock.textContent = now.toLocaleTimeString();
}
setInterval(updateClock, 1000);
updateClock();
Geliştirme fikirleri
- 24 saat veya 12 saat formatı arasında geçiş ekleyin.
- Tarihi de gösterin: now.toLocaleDateString().
- CSS ile görünümü saat teması hâline getirin veya analog saat çizin (canvas öğrenme fırsatı).
3) 5 Dakikada Basit Slider (Resim Döndürücü)
Amaç
Bir dizi resmi ileri/geri gösterebilen basit bir slider yapın; dizin ve stil manipülasyonu öğrenilir.
Gereksinimler (örnek HTML)
HTML (örnek):
<div id="slider">
<img src="img1.jpg" id="slide" />
<button id="prev"><<<<<<></button>
<button id="next">>>>>></button>
</div>
Adımlar
- Bir dizi resim URL'si oluşturun: const images = ['img1.jpg','img2.jpg','img3.jpg'];
- Geçerli indeks değişkeni oluşturun: let i = 0;
- next ve prev butonlarına tıklama olayları bağlayıp img src'sini değiştirin.
JavaScript (örnek):
const images = ['img1.jpg','img2.jpg','img3.jpg'];
let i = 0;
const slide = document.getElementById('slide');
function show(i) { slide.src = images[i]; }
document.getElementById('next').addEventListener('click', () => { i = (i + 1) % images.length; show(i); });
document.getElementById('prev').addEventListener('click', () => { i = (i - 1 + images.length) % images.length; show(i); });
show(i);
Geliştirmeler
- Otomatik oynatma için setInterval kullanın ve fareyle durdurma (hover) ekleyin.
- Geçiş animasyonları için basit CSS geçişleri ekleyin.
- Responsive yapmak için resimleri ve konteyneri esnek boyutlandırın.
Test ve Hızlı Kontrol Listesi
- Tarayıcı konsolunda hata (console) var mı kontrol edin.
- Element ID'leri kodla eşleşiyor mu (büyük/küçük harf duyarlılığına dikkat).
- Event listener'lar doğru öğelere bağlanmış mı?
- LocalStorage varsa veriler doğru okunuyor/ayarılıyor mu?
- Mobilde temel görünüm düzgün mü?
Hataları Bulma (Hızlı Yöntemler)
- console.log ile değişkenlerin değerlerini kontrol edin.
- İlk önce HTML'de eksik etiket olup olmadığını kontrol edin.
- Script dosyanızın HTML'de doğru sırada yüklendiğinden emin olun (örn. <body> sonunda veya DOMContentLoaded içinde çalıştırma).
Genişletme ve Öğrenme Yolu
Bu mini projelerden sonra adım adım şunlara geçebilirsiniz: komponent tabanlı yapı (React veya benzeri), erişilebilirlik (keyboard navigation, ARIA), performans ve test yazımı. Kısa projeler öğrenmeyi hızlandırır; Patika.dev gibi rehberlerden proje fikirleri alabilirsiniz (kaynak).
Kaynaklar ve İleri Okuma
- Patika.dev — Frontend Becerilerinizi Geliştirecek 5 Proje Örneği — Başlangıç projeleri için öneriler ve motivasyon.
- Yusuf SEZER — Projeler — Farklı JavaScript proje örnekleri ve kod parçacıkları.
- 10 Dakikada Yapabileceğiniz Javascript Uygulaması (Medium) — Hızlı uygulama fikirleri.
Sınırlamalar ve notlar
Buradaki örnekler öğretici ve minimal düzeydedir; üretim kullanımına geçmeden önce erişilebilirlik, hata yakalama ve uygun güvenlik kontrolleri eklenmelidir. Kod örnekleri basitleştirilmiştir — ortamınıza göre küçük uyarlamalar gerekebilir.
SSS
Soru: Gerçekten bu projeler 5 dakikada tamamlanabilir mi?
Cevap: Temel işlevselliği (HTML + kısa JavaScript) kurmak genellikle 5 dakikayı alır. Stil, hata kontrolü ve genişletmeler daha fazla zaman gerektirebilir.
Soru: Hangi proje ile başlamalıyım?
Cevap: To‑Do listesi DOM ve olayları öğrettiği için iyi bir başlangıçtır. Saat projesi zamanlayıcıları anlamak, slider ise dizin yönetimi ve görsel değişiklikler için uygundur.
Soru: Yazdığım kod çalışmıyorsa nereden başlamalıyım?
Cevap: Tarayıcı konsolunu açın, console.log ile değişkenleri izleyin, element ID'lerinin doğru olduğundan emin olun ve script'in DOM yüklendikten sonra çalıştığını doğrulayın.
Soru: Bu projeleri genişletmek için ne öğrenmeliyim?
Cevap: HTML/CSS derinliği, ES6+ JavaScript (arrow function, const/let), localStorage, küçük testler (ör. jest), ve sonrasında bir frontend kütüphanesi (React, Vue) faydalı olacaktır.