Notes

var index=0;
var gorev = { /* Görev isminde bir değişken oluşturuldu*/
items: [], /* İtems isminde bir dizi tanımlandı*/
ekle: function ( evt) { /* ekle olayında evt isimli bir nesne oluşturuldu */
evt.preventDefault(); /*Her eleman eklemede sayfa yenilenmesini iptal etmek için preventDefault metodu çağırıldı*/
var baslik = document.getElementById('baslik-ekle').value;
var aciklama = document.getElementById('aciklama-ekle').value;
var tarih = document.getElementById('tarih-ekle').value;
/* urun-ekle id'sine sahip olan eleman ( input alanı ) baslik değerine atandı*/

if(baslik.length===0 || baslik[0] === ' '){ /* Eğer hiçbir değer girilmeden veya boşluk değeri ile başlayan bir değer girildi ise*/
alert("Başlık alanı boş olamaz!"); /* Ekrana bir uyarı mesajı basıldı */
return;
}

gorev.items.push({ /* Eğer bir ürün eklenmiş ise ve bu isim geçerli ise */
baslik: baslik, /* Yazılan metin değeri dizi içerisine atandı*/
aciklama:aciklama,
tarih:tarih,
});

baslik.value = ""; /* Yeni bir değer girişinde hata olmaması için değer sıfırlandı*/
aciklama.value = "";
tarih.value = "";
gorev.yaz(); /* Yaz fonksiyonu çağırıldı*/
gorev.kaydet();
},

yaz: function () {
container = document.getElementById('bekleyen-item'); /* container değişkeni içerisinde div tag'i atıldı */
container.innerHTML = ""; /* Her ekleme butonuna tıklanılması durumunda çoklayan veri olmaması için sıfırlandı*/
if (gorev.items.length > 0) { /* Eğer birden fazla eleman var ise ( Bir eleman eklenmiş ise */
/* Satır ve buton değerleri oluşturuldu */
for (let i in gorev.items) { /* Eklenen eleman sayısı kadar bir foreach döngüsü başlatıldı */
var row = "";
row = document.createElement("div"); /* Her tıklanmada yeni bir div tagi açıldı ve row nesnesine atandı*/
row.innerHTML = "<b>"+gorev.items[i].baslik +"</b>" + gorev.items[i].aciklama + "<br>" + gorev.items[i].tarih; /* Nesne içerisine input alanına yazılan değer atandı*/
row.id = index++;
row.setAttribute("draggable", "true");
row.ondragstart=dragStart;
row.ondrag=dragging;
row.setAttribute("class","item");
container.appendChild(row); /* container nesnesi yani alışveriş listesi div'inin içerisine satır nesnesindeki değer atandı*/
/* Burada atanan ilk değer yazılan metin değerinin kendisi */
}
}
},
kaydet: function () {

localStorage.items = JSON.stringify(gorev.items); /* Dizi içerisine yazılan değer atanır bir diziye atanmak zorundadır */
},

geriGetir: function () { /* Local veritabanınde bulunan verileri sayfa yenilenince veya aynı port üzerinden açılınca geri göstermek için fonksiyon */

if (localStorage.items == undefined) { /* Listeyi temizledikten sonra tekrar eleman eklemek için dizi yeniden tanımlandı */
localStorage.items = "[]";
}

gorev.items = JSON.parse(localStorage.items); /* Eklenen verilerin listesi nesne içerisine atıldı */

gorev.yaz(); /* Atanan veriler ekrana yazdırıldı */
}

};

function allowDrop(ev) {
ev.preventDefault();
ev.dataTransfer.clearData();
}

function dragStart(ev) {
ev.dataTransfer.setData("div", ev.target.id);

}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("div");
ev.target.appendChild(document.getElementById(data));
var container2 = document.getElementById('dragArea');
container2.style.visibility = 'hidden';
ev.dataTransfer.clearData();
}

function dragging() {
var container3 = document.getElementById('dragArea');
container3.style.visibility = 'visible';
}

function herseyiSil() { /* Tüm listedeki elemanları silen fonksiyon */
document.getElementById('devam').innerHTML=''; /* Div tagi tutuldu */
localStorage.clear(); /* Local veritabanı temizlendi */
location.reload(); /* Sayfa yenilendi */
}

window.addEventListener("load", function () { /* Bir işlemi yakalamak amacıyla kullanılan standart metod */
document.getElementById("gorev").addEventListener("submit", gorev.ekle);
gorev.geriGetir();
/* Form içerisindeki submit tiplerine alisveris sınıfının nesne metodunu ekle*/
});