script.js

const todoList = [];

const todoListElement = document.querySelector("#tasks");

// WITH ENTER WE ADD THE NEW ELEMENT TO THE LIST

document.querySelector("#add_button").addEventListener("click", addTodo);
document.querySelector("#input-button").addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    addTodo()
  }
});

//-------GETTING THE VALUES FROM INPUT TO ARRAY OF OBJECTS AND THE POPUP IF A VALUE IS NOT INSERTED

function addTodo() {
  const todoText = document.querySelector("#input-button").value;

  if (todoText == "") {
    alert("You did not enter any task name");
  } else {
    const todoObject = {
      id: todoList.length,
      todoText: todoText,
      isDone: false,
    };
    todoList.unshift(todoObject);
    displayTodos();
  }
}

//------CHANGING THE isDone VALUE TO TRUE WHEN THE ELEMENT IS CLICKED OR TO FALSE IF IT WAS TRUE BEFORE, SO THAT THE CHECKED ITEM CAN BE SEEN

function doneTodo(todoId) {
  const selectedTodoIndex = todoList.findIndex((item) => item.id == todoId);

  todoList[selectedTodoIndex].isDone
    ? (todoList[selectedTodoIndex].isDone = false)
    : (todoList[selectedTodoIndex].isDone = true);
  displayTodos();
}

function deleteItem(x) {
  todoList.splice(
    todoList.findIndex((item) => item.id == x),
    1
  );
  displayTodos();
}

//---------DISPLAYING THE ENTERED ITEMS ON THE SCREEN------

 function displayTodos() {
  todoListElement.innerHTML = "";
  document.querySelector("#input-button").value = "";

  todoList.forEach((item) => {
    const listElement = document.createElement("li");
    const delBtn = document.createElement("i");

    listElement.innerHTML = item.todoText;
    listElement.setAttribute("data-id", item.id);

    delBtn.setAttribute("data-id", item.id);
    delBtn.classList.add("far");
    delBtn.classList.add("fa-trash-alt");
    delBtn.setAttribute("data-id", item.id);

    if (item.isDone) {
      listElement.classList.add("checked");
    }

    listElement.addEventListener("click", function (e) {
      const selectedId = e.target.getAttribute("data-id");
      doneTodo(selectedId);
    });

    delBtn.addEventListener("click", function (e) {
      const delId = e.target.getAttribute("data-id");
      deleteItem(delId);
    });

    todoListElement.appendChild(listElement);
    listElement.appendChild(delBtn);
  });
 }