Giriş

Bu yazıda, Mini JS Projeleri arayan başlangıç ve erken düzey geliştiriciler için üç hızlı ve uygulanabilir fikir sunuyorum: Renk Değiştirici Buton, Sayaç Uygulaması ve Yapılacaklar Listesi. Her proje temel JavaScript kavramlarını kısa sürede pekiştirmenizi sağlar; hedef, her projeyi yaklaşık 5 dakika içinde çalışır hale getirmek olsa da süre kişisel deneyime göre değişebilir.

Hızlı önkoşullar ve beklentiler

  • Temel HTML/CSS bilgisi (etiketleri ve temel stil uygulamasını tanıyor olmak).
  • Basit bir metin editörü (VS Code, Sublime, Notepad++ vb.) ve modern bir tarayıcı.
  • Projeler çoğunlukla tek dosya/tek sayfa kurulumuyla yapılabilir; daha fazlası için geliştirme önerileri verilecektir.
  • Süre tahmini: Her proje için ~5 dakika hedefi; gerçek süre beceri ve dikkat düzeyine göre değişir.

Proje 1 — Renk Değiştirici Buton

Ne öğreneceksiniz: DOM seçimleri, olay dinleyicileri ve stil güncelleme. Bu fikir, basit bir etkileşim kurarak JavaScript ile HTML arasındaki iletişimi göstermeye uygundur. Benzer örneklere bakmak isterseniz bu fikir kaynaklarda da önerilmiştir: AlesTamedya – JavaScript proje fikirleri.

  1. index.html içinde bir buton oluşturun.
  2. Butona tıklandığında rastgele bir RGB renk üretin.
  3. Üretilen rengi document.body.style.backgroundColor ile uygulayın.
<!-- index.html --> <button id="changeColor">Rengi Değiştir</button>
// script.js const btn = document.getElementById('changeColor'); btn.addEventListener('click', () => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; });

Hızlı test: Butona tıklayın; arka plan renginin değiştiğini gözlemleyin. Geliştirme önerileri: renk paleti sınırlamak, geçişli (transition) bir CSS eklemek veya seçilen renk kodunu ekranda göstermek.

Proje 2 — Sayaç Uygulaması

Ne öğreneceksiniz: değişken yönetimi, butonlarla state güncelleme ve DOM güncelleme. Basit sayaç örnekleri, başlangıç adımlarını pekiştirmek için idealdir; eğitim içeriklerinde benzer uygulamalar sıkça önerilmektedir (Sorbil – JavaScript eğitimi).

  1. HTML içinde bir gösterge (display) ve üç buton (arttır, azalt, sıfırla) oluşturun.
  2. JavaScript içinde bir sayı değişkeni oluşturun ve her buton için event listener ekleyin.
  3. Değişiklikte göstergeyi güncelleyin.
<div id="counter">0</div> <button id="inc">Artır</button> <button id="dec">Azalt</button> <button id="reset">Sıfırla</button>
let count = 0; const display = document.getElementById('counter'); document.getElementById('inc').addEventListener('click', () => { count += 1; display.textContent = count; }); document.getElementById('dec').addEventListener('click', () => { count -= 1; display.textContent = count; }); document.getElementById('reset').addEventListener('click', () => { count = 0; display.textContent = count; });

Hızlı test: Her butona tıklayın ve gösterge değerinin beklendiği gibi güncellendiğini kontrol edin. Geliştirme fikirleri: artış/azalış adımını değiştirmek, negatif değerleri engellemek veya butonları klavye ile tetiklemek.

Proje 3 — Yapılacaklar Listesi (To‑Do)

Ne öğreneceksiniz: form verisi alma, dizi ile veri yönetimi, DOM'a öğe ekleme ve silme. Bu proje bir miktar daha fazla kod gerektirir ama temel hali birkaç dakika içinde kurulabilir. Benzer küçük proje önerileri kaynaklarda bulunabilir (Patika.dev – Frontend proje örnekleri).

  1. Bir input, ekle butonu ve liste boşluğu oluşturun.
  2. Form gönderildiğinde input değerini alın ve bir liste öğesi oluşturun.
  3. Liste öğesine silme ve tamamlandı işlevi ekleyin; isterseniz localStorage ile kalıcılık sağlayın.
<input id="todoInput" placeholder="Yeni görev" /> <button id="addTodo">Ekle</button> <ul id="todoList"></ul>
const todos = []; const list = document.getElementById('todoList'); function render() { list.innerHTML = ''; todos.forEach((t, i) => { const li = document.createElement('li'); li.textContent = t; const del = document.createElement('button'); del.textContent = 'Sil'; del.addEventListener('click', () => { todos.splice(i, 1); render(); }); li.appendChild(del); list.appendChild(li); }); } document.getElementById('addTodo').addEventListener('click', () => { const val = document.getElementById('todoInput').value.trim(); if (val) { todos.push(val); document.getElementById('todoInput').value = ''; render(); } });

Hızlı test: Yeni görev ekleyin, silme butonunu deneyin. Geliştirme önerileri: tamamlandı durumu ekleme, görevleri düzenleme veya localStorage ile sayfa yenilense bile görevlerin korunmasını sağlama.

Hızlı kontrol listesi (Checklist)

  • HTML öğeleri doğru id/atribütlerle var mı?
  • Event listener'lar doğru elementlere eklendi mi?
  • console (tarayıcı geliştirici araçları) boş mu? Hata varsa satırı kontrol edin.
  • Basit kullanıcı senaryolarını denediniz mi (tıklama, boş input, hızlı birden fazla tıklama)?
  • Geliştirme için küçük adımlar halinde ilerleyin: önce HTML yapısını oluşturun, sonra JS ekleyin, en sona stil ekleyin.

Zaman yönetimi ve öğrenme önerileri

Bu Mini JS Projeleri, kısa sürede tamamlanabilir görevler sağlayarak düzenli uygulama alışkanlığı kazandırır. Günde 10–20 dakika ayırarak bu ve benzeri mini projelerle pratik yapmak temel bilgilerin kalıcılığını artırır. Daha fazla proje ve yapılandırılmış kurslar için örnek bir kaynak olarak da kurslar bulunmaktadır: Udemy — 30 Günde 30 Proje.

Sınırlamalar ve dikkat edilmesi gerekenler

Bu rehberde verilen örnekler öğrenme amaçlı ve sadeleştirilmiş haliyle sunulmuştur. Gerçek dünya uygulamalarında erişilebilirlik, performans ve veri doğrulama gibi ek konulara dikkat etmek gerekir. Ayrıca süre tahminleri kişisel tecrübeye bağlı olarak değişir; hedef, hızlı öğrenme odaklı pratik yapmaktır.

Sıkça Sorulan Sorular

1) Her projeyi gerçekten 5 dakikada tamamlayabilir miyim?

Süre, deneyiminize ve dikkat düzeyinize bağlıdır. Basit kurulum ve kodla 5 dakika hedefi mümkün olsa da, hata ayıklama veya UI düzenlemeleri ile biraz daha zaman gerekebilir.

2) Kodları tarayıcıda nasıl çalıştırabilirim?

HTML dosyanızı kaydedip bir tarayıcıda açın. JavaScript'i ayrı bir dosyada kullanıyorsanız HTML içinde <script> etiketiyle ya da geliştirici araçları konsolundan test edebilirsiniz. (Not: Buradaki örnek kodlar basit gösterimlerdir.)

3) Bu projeler hangi JavaScript konularını pekiştirir?

DOM seçimi, olay yönetimi, değişken kontrolü, dizi işlemleri ve temel tarayıcı API'leri (ör. localStorage) gibi konuları uygulamalı olarak pekiştirir.

4) Sonraki adım olarak ne yapmalıyım?

Bu mini projeleri çeşitlendirip her birine küçük özellikler ekleyin (ör. animasyon, doğrulama, localStorage). Ardından daha büyük projelere geçmeden önce her konuyu derinleştiren örnekler üzerinde çalışın.

Sonuç

Mini JS Projeleri ile hızlı kazanımlar elde edebilirsiniz. Renk değiştirici buton, sayaç ve yapılacaklar listesi, temel JavaScript kavramlarını pratikte pekiştirmek için uygundur. Kaynaklardaki örnekler ve eğitim içerikleriyle (kaynaklar: AlesTamedya, Sorbil, Patika.dev) bu projeleri zenginleştirebilir ve portföyünüze ekleyebilirsiniz.

Kaynaklar: AlesTamedya, Sorbil, Patika.dev.