const $toDoInput = document.querySelector('.toDoInput');
const $addBtn = document.querySelector('.addBtn');
const $deleteBtn = document.querySelector('.delete');
const $ulList = document.querySelector('ul');
const $liItem = document.querySelector('li');
let $newTask;
const $toDoInfo = document.querySelector('.toDoInfo');


const addNewTask = () =>{

    if($toDoInput.value !== ''){
        $newTask = document.createElement('li');
    $newTask.innerText = $toDoInput.value;
    $ulList.appendChild($newTask);
    createToolArea();
    $toDoInput.value = '';
    $toDoInfo.innerText = '';
}
    else{
        $toDoInfo.innerText = 'Podaj treść';
    }

}

// const checkEnter = () =>{
//     if(event.keyCode === 13){
//         addNewTask();
//     }
// }
// $toDoInput.addEventListener('keyup', checkEnter);

const createToolArea = () =>{
    const toolsArea = document.createElement('div');
    toolsArea.classList.add('tools');
    $newTask.appendChild(toolsArea);

    const deleteArea = document.createElement('button');
    deleteArea.innerHTML = '<i class="fas fa-times"></i>';
    deleteArea.classList.add('delete');
    toolsArea.appendChild(deleteArea);}

const deleteTask = (e)=>{
    const deleteToDo = e.target.closest('li');
    deleteToDo.remove();
}


$addBtn.addEventListener('click', addNewTask);
$deleteBtn.addEventListener('click', deleteTask);