let todoItemsContainer = document.
getElementById("todoItemsContainer");
let todoList = [
{
text: "Learn HTML",
uniqueId:1
},
{
text: "Learn CSS",
uniqueId:2
},
{
text: "Learn JavaScript",
uniqueId:3
}
];
function ondelete(todoId){
let lableElement=document.getElementById(todoId);
todoItemsContainer.removeChild(lableElement);
function onstatusCheck(checkboxId,lableId){
let lableElement=document.getElementById(lableId);
lableElement.classList.toggle("check");
}
function createAndAppendTodo(todo) {
let checkboxId="checkbox"+todo.uniqueId;
let lableId="label"+todo.uniqueId;
let todoId="todo"+todo.uniqueId;
let todoElement = document.createElement("li");
todoElement.classList.add("todo-item-container", "d-flex", "flex-row");
todoItemsContainer.appendChild(todoElement);
todoElement.id=todoId;
let inputElement = document.createElement("input");
inputElement.type = "checkbox";
inputElement.id =checkboxId;
inputElement.classList.add("checkbox-input");
todoElement.appendChild(inputElement);
inputElement.onclick=function(){
onstatusCheck(checkboxId,lableId);
};
let labelContainer = document.createElement("div");
labelContainer.classList.add("label-container", "d-flex", "flex-row");
todoElement.appendChild(labelContainer);
let labelElement = document.createElement("label");
labelElement.setAttribute("for", checkboxId);
labelElement.classList.add("checkbox-label");
labelElement.textContent = todo.text;
labelElement.id=lableId;
labelContainer.appendChild(labelElement);
let deleteIconContainer = document.createElement("div");
deleteIconContainer.classList.add("delete-icon-container");
labelContainer.appendChild(deleteIconContainer);
let deleteIcon = document.createElement("i");
deleteIcon.classList.add("far", "fa-trash-alt", "delete-icon");
deleteIconContainer.appendChild(deleteIcon);
deleteIcon.onclick=function(){
ondelete(todoId);
};
}
function add(){
let inputValue=document.getElementById("todoUserInput");
let count=todoList.length+1;
if(inputValue.value===""){
alert("enter value");
return;
}
let a={
text:inputValue.value,
uniqueId:count
};
createAndAppendTodo(a);
inputValue.value="";
todoList.push(a);
console.log(todoList);
}
for (let todo of todoList) {
createAndAppendTodo(todo);
}
