TODO LIST APP PART 4 JAVASCRIPT

 console.log('hello we are in our todo web app');

let addTask = document.getElementById('addTask');

let taskObj;

showTask();

let main = addTask.addEventListener('click', (e) => {

    let head = document.getElementById('head').value;

    let desc = document.getElementById('desc').value;

    let task = localStorage.getItem('task');

    if (task == null) {

        taskObj = []

    }

    else {

        taskObj = JSON.parse(task);

    }

    let myTaskObj = {

        head: head,

        description: desc

    }

    taskObj.push(myTaskObj);

    localStorage.setItem('task', JSON.stringify(taskObj));

    console.log(taskObj);

    showTask();

    head = " ";

    desc = " ";

});

function showTask() {

    let task = localStorage.getItem('task');

    if (task == null) {

        taskObj = []

    }

    else {

        taskObj = JSON.parse(task);

    }

    let html = " "

    taskObj.forEach(function(element,index) {

        html += `<div class="card">

       <h2>${element.head}</h2>

       <p>${element.description}</p>

       <button onclick="deleteTask(${index})">-</button>

       

   </div>`

    });

    let container2 = document.getElementById('container2');

    if (taskObj.length != 0) {

        container2.innerHTML = html;

    }

    else {

        console.log('Nothing Here');

    }

}

function deleteTask(index){

    console.log('I am Deleting',index);

    let task = localStorage.getItem('task');

    if (task == null) {

        taskObj = []

    }

    else {

        taskObj = JSON.parse(task);

    }

    taskObj.splice(index,1);

    localStorage.setItem('task', JSON.stringify(taskObj));

    showTask();

    

}

search.addEventListener('input',()=>{

    console.clear()

    console.log('input event fired');

    let search = document.getElementById('search');

    let input = search.value.toLowerCase();

    let cards = document.getElementsByClassName('card');

    Array.from(cards).forEach(function(element,index){

        let cardtxt1 = document.getElementsByTagName('h2')[index].innerText.toLowerCase();

        let cardtxt2 = document.getElementsByTagName('p')[index].innerText.toLowerCase();

        console.log(cardtxt1,cardtxt2);

        if(cardtxt1.includes(input) || cardtxt2.includes(input)){

            element.style.display = 'block'

        }

        else{

            element.style.display = 'none'

        }

    })

    

})