var todos = [];
var addTodoForm = document.querySelector("#new-task-form");
var input = document.querySelector("#new-task-input").value;
var listGroup = document.querySelector("#tasks");
addTodoForm.addEventListener('submit' , function (event) {
event.preventDefault();
var todoValue = addTodoForm.todo.value;
const task = todoValue;
if (task == 0) {
alert("please enter today tasks");
return;
}
todos.push({
value: todoValue,
});
addTodoForm.todo.value = "";
const task_el = document.createElement("div");
task_el.classList.add("task");
const task_content_el = document.createElement("div");
task_content_el.classList.add("content");
task_el.appendChild(task_content_el);
const task_input_el = document.createElement("input");
task_input_el.classList.add("text");
task_input_el.type = "text";
task_input_el.value = task;
task_input_el.setAttribute("readonly", "readonly")
task_content_el.appendChild(task_input_el);
const task_actions_el = document.createElement("div");
task_actions_el.classList.add("actions");
const task_edit_el = document.createElement("button");
task_edit_el.classList.add("edit");
task_edit_el.innerHTML = "Edit"
const task_delete_el = document.createElement("button");
task_delete_el.classList.add("delete");
task_delete_el.innerHTML = "Delete";
task_actions_el.appendChild(task_edit_el);
task_actions_el.appendChild(task_delete_el);
task_el.appendChild(task_actions_el);
listGroup.appendChild(task_el);
task_edit_el.addEventListener('click' , () =>{
if ( task_edit_el.innerText.toLocaleLowerCase() == "edit") {
task_input_el.removeAttribute("readonly");
task_input_el.focus();
task_edit_el.innerText = "Save";
}else{
task_input_el.setAttribute("readonly" , "readonly");
task_edit_el.innerText= "Edit";
}
});
task_delete_el.addEventListener('click' , () =>{
listGroup.removeChild(task_el);
})
});