let resa = document.querySelector('.todo_ul');
let addLi = document.querySelector('.todo_add');
let inputLi = document.querySelector('.todo_input');
// Событие на кнопку "Добавить"
addLi.addEventListener('click',function(e){
//Отключает перезагрузку страниц
e.preventDefault();
let ul = document.querySelector('.todo_ul');
//В список при нажатии на кнопку "Добавить" добавляется новый элемент списка со значением из инпута
ul.appendChild(addNewLi(inputLi.value))
//Очищаем инпут
inputLi.value = '';
});
//Функция для создания элемента списка
function addNewLi(value){
if(value === ''){
return false
};
let li = createElem('li',{class:'todo_li'})
let divInLi = createElem('div',{class:'todo_check'})
let changeButton = createElem('input',{type:'button',value:'Изменить',class:'todo_li_change li_button'});
let deleteButton = createElem('input',{type:'button',value:'Удалить',class:'todo_li_delete li_button'});
let saveButton = createElem('input',{type:'button',value:'Сохранить',class:'save_change_item li_button'});
let saveInput = createElem('input',{type:'text',class:'change_item'});
let p = createElem('p',{class:'li_text'});
p.innerHTML = value;
li = appendChilds(li,p,divInLi,changeButton,deleteButton,saveButton,saveInput)
//Выполняить функцию, а качестве аргумента - нвоый созданый элемент списка
//doEvent(li);
return li
};
function createElem(tag,props){
let div = document.createElement(tag);
for( let key in props){
div.setAttribute(key, props[key])
}
return div
};
function appendChilds(obj,...arg){
for(let i = 0; i < arg.length; i++){
obj.appendChild(arg[i]);
}
return obj
};
resa.addEventListener('click', function(e){
console.log(e.target.className)
if(e.target.tagName === 'P'){
let check = e.target.parentNode.querySelector('.todo_check');
check.classList.toggle('check');
e.target.parentNode.classList.toggle('checked');
}else if(e.target.tagName === 'LI'){
let check = e.target.querySelector('.todo_check');
check.classList.toggle('check');
e.target.classList.toggle('checked');
}else if(e.target.classList.contains("todo_li_change")){
let qSelector = e.target.parentNode;
let save = qSelector.querySelector('.save_change_item');
let saveInput = qSelector.querySelector('.change_item');
let deleteButton = qSelector.querySelector('.todo_li_delete');
let litext = qSelector.querySelector('.li_text');
saveInput.value = litext.innerHTML;
save.style.visibility = 'visible';
saveInput.style.visibility = 'visible';
e.target.className += ' disp_none';
deleteButton.className += ' disp_none';
}else if(e.target.classList.contains('save_change_item')){
let saveInput = e.target.parentNode.querySelector('.change_item');
let litext = e.target.parentNode.querySelector('.li_text');
let save = e.target.parentNode.querySelector('.save_change_item');
let deleteButton = e.target.parentNode.querySelector('.todo_li_delete');
let chandeButton = e.target.parentNode.querySelector('.todo_li_change');
litext.innerText = saveInput.value;
save.style.visibility = 'hidden';
saveInput.style.visibility = 'hidden';
deleteButton.classList.remove('disp_none')
chandeButton.classList.remove('disp_none')
}else if(e.target.classList.contains('todo_li_delete')){
e.target.parentNode.remove()
}else if(e.target.classList.contains('todo_check')){
e.target.classList.toggle('check');
e.target.parentNode.classList.toggle('checked')
}
})