5 Dakikalık Mini JS Projesi: Basit To-Do Uygulaması

Günümüzde programlama öğrenmek isteyenler için Mini JS Projeleri oldukça popüler hale gelmiştir. Özellikle javascript mini projeler arasında yer alan basit uygulamalar, hem hızlı öğrenme hem de pratik yapma imkanı sunar. Bu yazıda, sadece 5 dakika içinde tamamlayabileceğiniz basit bir to-do uygulaması js projesini adım adım inceleyeceğiz.

To-Do Uygulaması Nedir?

To-Do Uygulaması, kullanıcıların günlük yapacakları işleri listeleyip yönetebildiği basit ama etkili bir uygulama türüdür. Bu uygulama sayesinde kullanıcılar görevlerini ekleyebilir, tamamladıklarını işaretleyebilir ve gerekirse silebilir. Bu tür uygulamalar, programlama öğrenenler için mini proje örnekleri arasında temel yapı taşlarından biridir.

Neden Vanilla JS Proje Tercih Edilmeli?

Vanilla JS proje terimi, herhangi bir kütüphane veya framework kullanmadan sadece saf JavaScript ile yazılmış projeleri ifade eder. Bu yaklaşım, JavaScript'in temel prensiplerini anlamak ve uygulamak için en etkili yöntemlerden biridir. Ayrıca, herhangi bir dış bağımlılık olmadan çalıştığı için projeler daha hafif ve hızlıdır.

Proje İçin Gerekli Araçlar

Basit bir metin editörü (Visual Studio Code, Sublime Text vb.)
Modern bir web tarayıcısı (Google Chrome, Firefox vb.)
Temel HTML, CSS ve JavaScript bilgisi

Adım Adım Basit To-Do Uygulaması

1. HTML Yapısını Oluşturma

İlk olarak, uygulamanın temel yapısını oluşturmak için basit bir HTML dosyası yazacağız. Bu dosyada bir başlık, görev eklemek için bir input alanı ve görevlerin listeleneceği bir liste elementi yer alacak.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basit To-Do Uygulaması</title>
</head>
<body>
  <h1>Görev Listesi</h1>
  <input type="text" id="taskInput" placeholder="Yeni görev ekle...">
  <button id="addTaskBtn">Ekle</button>
  <ul id="taskList"></ul>
</body>
</html>

2. JavaScript ile İşlevsellik Katma

Şimdi, kullanıcıların görev ekleyebilmesi ve listeye yeni görevlerin eklenmesi için JavaScript kodlarını yazacağız. Ayrıca, görevlerin tamamlandığını işaretlemek için event listener ekleyeceğiz.

const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', () => {
  const taskText = taskInput.value.trim();
  if(taskText !== '') {
    const li = document.createElement('li');
    li.textContent = taskText;
    li.addEventListener('click', () => {
      li.style.textDecoration = li.style.textDecoration === 'line-through' ? 'none' : 'line-through';
    });
    taskList.appendChild(li);
    taskInput.value = '';
  }
});

3. Kullanıcı Deneyimini Artırmak İçin İpuçları

Bu basit uygulamayı daha kullanışlı hale getirmek için bazı ek özellikler ekleyebilirsiniz:

Görev Silme: Her görev için bir silme butonu ekleyerek görevlerin kolayca kaldırılmasını sağlayabilirsiniz.
Görevleri Kaydetme: LocalStorage kullanarak sayfa yenilense bile görevlerin kaybolmamasını sağlayabilirsiniz.
Stil Düzenlemeleri: CSS ile listeyi daha estetik ve kullanıcı dostu hale getirebilirsiniz.

Başlangıç Seviyesi Kod & Snippet Rehberi ile Daha Fazlasını Öğrenin

Bu tür mini proje örnekleri ve javascript mini projeler üzerinde çalışmak, programlamada pratik yapmanın en iyi yollarından biridir. Başlangıç Seviyesi Kod & Snippet Rehberi, yeni başlayanlar için özel olarak tasarlanmış kapsamlı kaynaklar ve örneklerle doludur. Eğer JavaScript öğrenmeye yeni başladıysanız veya bilginizi pekiştirmek istiyorsanız, bu rehber size büyük katkı sağlayacaktır.

Sonuç

5 dakikalık bu vanilla js proje örneği ile basit bir to-do uygulaması js geliştirdik. Bu tür Mini JS Projeleri hem hızlı hem de etkili öğrenme deneyimi sunar. Kod yazarak öğrenmek isteyenler için bu tür küçük projeler, kavramları pekiştirmenin ve yeni beceriler kazanmanın mükemmel yoludur. 2026 yılında da programlama öğrenmeye devam eden herkes için bu yaklaşım geçerliliğini koruyacaktır.

5 Dakikalık Mini JS Projesi: Basit To-Do Uygulaması ile Hızlı Başlangıç