Basit Bir Yapılacaklar Listesi Uygulaması Oluşturma

Basit Bir Yapılacaklar Listesi Uygulaması Oluşturma

Merhaba! Bu yazıda, JavaScript kullanarak basit bir yapılacaklar listesi uygulaması nasıl oluşturacağınızı adım adım açıklayacağım. Bu uygulama, HTML, CSS ve temel JavaScript bilginizi geliştirmenize yardımcı olacaktır. Öncelikle projemizin temel yapısını oluşturacağız. Ardından, yapılacaklar listesine öğe ekleme, silme ve işaretleme gibi fonksiyonları ekleyeceğiz. Hazırsanız başlayalım!

HTML Yapısı: Temelleri Oluşturma

İlk adımımız, HTML yapısını oluşturmak. Bu yapı, yapılacaklar listesini görüntüleyeceğimiz temel iskeleti oluşturacaktır. Aşağıdaki kodu kullanarak başlayabiliriz:

<!DOCTYPE html>
<html>
<head>
  <title>Yapılacaklar Listesi</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Yapılacaklarım</h2>
    <input type="text" id="newTask" placeholder="Yeni görev ekle...">
    <button id="addTask">Ekle</button>
    <ul id="taskList">
    </ul>
  </div>
  <script src="script.js"</script>
</body>
</html>

Bu HTML kodunda, yapılacaklar listesini görüntülemek için bir ul elementi ve yeni görev eklemek için bir input alanı ile buton kullanıyoruz. Sonrasında, JavaScript kodunu bağlamak için bir script etiketi ekliyoruz. Şimdi, CSS dosyamızı oluşturalım ve uygulamamıza biraz stil verelim.

CSS Stili: Görünümü Güzelleştirme

Şimdi, uygulamamıza görsel bir çekicilik katmak için CSS kullanacağız. Bu, kullanıcı deneyimini iyileştirecektir. style.css dosyasına aşağıdaki kodu ekleyebilirsiniz:

.container {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

#taskList li {
  list-style: none;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

Bu basit CSS kodu, uygulamamıza düzenli bir görünüm kazandıracaktır. Daha sonra, JavaScript’i kullanarak uygulamanın işlevselliğini ekleyeceğiz. Öncelikle, JavaScript dosyasını oluşturmalıyız.

JavaScript İşlevselliği: Uygulamayı Canlandırma

Uygulamamızın kalbi olan JavaScript kodunu yazma zamanı geldi. script.js dosyasına aşağıdaki kodu ekleyin:

const taskInput = document.getElementById('newTask');
const addTaskButton = document.getElementById('addTask');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', () => {
  const newTask = taskInput.value;
  if (newTask !== '') {
    const listItem = document.createElement('li');
    listItem.textContent = newTask;
    taskList.appendChild(listItem);
    taskInput.value = '';
  }
});

Bu kod, yeni bir görev eklemek için bir event listener kullanır. Kullanıcı bir görev girdiğinde ve butona tıkladığında, görev listeye eklenir. Ancak şu anda, görevleri silme veya işaretleme gibi özellikleri henüz eklemedik. Bunları sonraki adımlarda ekleyeceğiz. Daha gelişmiş özellikler için, fatihsoysal.com adresindeki diğer yazılarıma göz atabilirsiniz.

Gelişmiş Özellikler: Silme ve İşaretleme

Uygulamamıza silme ve işaretleme fonksiyonlarını ekleyelim. Bunun için JavaScript kodumuza aşağıdaki satırları eklemeliyiz:

// ... (önceki kodlar) ...

taskList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('completed');
  }
});

//Silme fonksiyonu için ekleme yapılması gerekebilir.

Bu kod, liste öğelerine tıklandığında “completed” sınıfını ekleyip kaldırarak görevleri işaretleme özelliğini sağlar. Silme fonksiyonu ise daha karmaşıktır ve ayrı bir event listener gerektirebilir. Daha detaylı bilgi için, bu kaynak faydalı olabilir.

İşte bu kadar! Basit bir yapılacaklar listesi uygulaması oluşturduk. Bu uygulama, JavaScript öğrenmek için harika bir başlangıç noktasıdır. Daha gelişmiş özellikler ekleyerek uygulamanızı geliştirebilirsiniz. Başarılar!

#Etiketler: javascript, yapılacaklar listesi, todo app, web geliştirme, programlama, adım adım, kodlama, html, css, javascript tutorial