Takip Edin

JAVASCRIPT

ToDo Uygulaması

featured To Do Uygulaması - Öne Çıkan Görsel

Bu uygulamada input’tan eklediğimiz item’lar, Task List ‘te listenecektir.

Eklediğimiz/sildiğimiz item’lar, Local Storage ‘a kaydedildiğinden sayfayı yenilesek dahi son bırakılan haliyle kalacaktır.

// UI vars

const form = document.querySelector('form');
const input = document.querySelector('#txtTaskName');
const btnDeleteAll = document.querySelector('#btnDeleteAll');
const taskList = document.querySelector('#task-list');
let items;

// load items
loadItems();

// call event listeners
eventListeners();


function eventListeners() {
    // submit event
    form.addEventListener('submit', addNewItem);

    // delete an item
    taskList.addEventListener('click', deleteItem);

    // delete all items
    btnDeleteAll.addEventListener('click', deleteAllItems);
}

function loadItems() {
    items = getItemsFromLS();
    items.forEach(function (item) {
        createItem(item);
    })
}

// set item to Local Storage
function setItemToLS(text) {
    items = getItemsFromLS();
    items.push(text);
    localStorage.setItem('items',JSON.stringify(items));
}

// delete item from LS
function deleteItemFromLS(text) {
    items = getItemsFromLS();
    items.forEach(function(item,index){
        if(item === text) {
            items.splice(index,1);
        }
    });
    localStorage.setItem('items',JSON.stringify(items));
}

// get items from local storage
function getItemsFromLS() {
    if(localStorage.getItem('items') === null)
    {
        items = [];
    }
    else{
        items = JSON.parse(localStorage.getItem('items'));
    }
    return items;
}

function createItem(text) {
    // create li

    const li = document.createElement('li');
    li.className = 'list-group-item list-group-item-secondary';
    li.appendChild(document.createTextNode(text));

    // create a

    const a = document.createElement('a');
    a.classList = 'delete-item float-right';
    a.setAttribute('href', '#');
    a.innerHTML = '<i class="fas fa-times"></i>';

    // add a to li

    li.appendChild(a);

    // add li to ul

    taskList.appendChild(li);
}

// add new item
function addNewItem(e) {
    if (input.value === '' || input.value.trim() === "") {
        alert('add new item');
    }
    else {
        // create item

        createItem(input.value);
    }

    // save to LS

    setItemToLS(input.value);

    // clear input

    input.value = '';

    e.preventDefault();
}

// delete an item
function deleteItem(e) {
    if (e.target.className === 'fas fa-times') {
        if (confirm('Silmek istediğinize emin misiniz?')) {
            e.target.parentElement.parentElement.remove();

            // delete item from LS
            deleteItemFromLS(e.target.parentElement.parentElement.textContent);
        }
    }
    e.preventDefault();
}

// deleteAllItems
function deleteAllItems(e) {

    // taskList.innerHTML = '';
    if (confirm('Hepsini silmek istediğinizden emin misiniz?')) {        
        while(taskList.firstChild){  
            taskList.removeChild(taskList.firstChild);
        }

        localStorage.clear();
    }
    e.preventDefault();
}
Devamını oku

Popüler

error: Content is protected !!