Bu yazıda Javascript kullanarak bir To Do listesi oluşturmayı anlatmaya çalışacağım.

HTML ve CSS ile vakit kaybetmemek için, buradan kodları indirebilir veya göz gezdirebilirsiniz.

 Oluşturacağımız To Do list, bir input üzerinden yazıyı alıcak. Ve HTML içerisindeki etiketlere gömecek. Solunda bulunan bir checkbox ile opacity değerini değiştireceğiz. Sağında bulunan bir small etiketi ile de, oluşturulma tarihini ekrana bastıracağız:

  HTML ve CSS kodlarını gözden geçirdiysek, yavaştan başlayalım.. Input elementime ulaşmak için querySelector() ile bir değişkene atıyorum. Input elementinin hemen yanındaki buton ile de aynı işlemi gerçekleştirmek istiyorum:

var add_item = document.querySelector("input");

var button_add_item = document.querySelector("span");

Input içerisinde enter tuşuna basıldığında, fonksiyon çağırıyorum:

add_item.onkeypress = function(add){

}

Klavye girişlerini kontrol etmek için, which methodunu kullanicam:

add_item.onkeypress = function(add){

  if(add == 13){

      }

}

  Şimdi checkbox içerisine girilen değerleri almak için hazırız. HTML kodumuzun içerisine gömülecek etiketleri oluşturalım. Etiket oluşturmak için, createElement methodunu kullanıyorum. Document objesinin altında bulunduğu için, document.createElement(“etiket adı”) şeklinde oluşturuyorum:

//create element

var todo_element = document.createElement("LI");

var in_span = document.createElement("SPAN");

var in_small = document.createElement("SMALL");

//create element input checkbox and value

var in_input = document.createElement("INPUT");

in_input.setAttribute("type", "checkbox");

in_input.setAttribute("value", "x");

  Görevler oluşturulurken, hangi zamanda oluşturuduklarını da yazdırmak istiyorum. Bunun için, date() objesinden faydalanıyorum:

//create date items

var date = new Date();

var now = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();

Şimdi iki farklı değerimi(input’dan gelen ve tarih) bir değişken içerisine kaydedicem. Bunun için createTextNode() methodu yetişiyor. Ayrıca input elementinin içerisinde işlem yaptığım için, this nesnesini de kullanabilicem:

//in input and date value

var create_time_item = document.createTextNode(now);

var item_val = document.createTextNode(this.value);

Neredeyse bitti. Şimdi oluşturduğum bu değerleri, yukarıdaki HTML etiketlerinin içerisine kaydedicem. Değişkenleri kaydedebilmek için, appendChild() methodunu kullanicam:

//paste value

in_small.appendChild(create_time_item);

in_span.appendChild(item_val);

in_span.appendChild(in_small);

//paste value

todo_element.appendChild(in_input);

todo_element.appendChild(in_span);

Buradaki sıralanış, HTML etiketlerinin hiyerarşisine göre düzenlendi. Birden fazla appendChild() kullanmam kafanızı karıştırmasın.

Şimdi bütün bu yaptıklarımızı, HTML içerisindeki class içerisine gönderelim. Ardından da, input içerisini temizleyelim:

document.getElementsByClassName("readyItems")[0].appendChild(todo_element);

//reset input

this.value = "";

Kodların toplu görünümü:

add_item.onkeypress = function(add){

  if(add.which == 13){

    //create element

    var todo_element = document.createElement("LI");

    var in_span = document.createElement("SPAN");

    var in_small = document.createElement("SMALL");

    //create element input checkbox and value

    var in_input = document.createElement("INPUT");

    in_input.setAttribute("type", "checkbox");

    in_input.setAttribute("value", "x");

    //create date items

    var date = new Date();

    var now = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();

    //in input value

    var create_time_item = document.createTextNode(now);

    var item_val = document.createTextNode(this.value);

    in_small.appendChild(create_time_item);

    in_span.appendChild(item_val);

    in_span.appendChild(in_small);

    //pasta values

    todo_element.appendChild(in_input);

    todo_element.appendChild(in_span);

    document.getElementsByClassName("readyItems")[0].appendChild(todo_element);

    //reset input box

    this.value = "";

  }

}

Buton ile değerleri almak için de neredeyse aynı işlemi uyguluyoruz. Github linki üzerinden buton üzerinde kullandığımız işlemleri kontrol edip, denemeler yapabilirsiniz.

Hazırladığımız bu To Do List bir probleme sahip. Aldığı değerler sayfa yeniden yüklendiğinde kayboluyor. Kalın sağlıcakla..