main.js

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

// Validate Other Fields: added validation for due date and description
let formValidation = () => {
  if (textInput.value === "" || dateInput.value === "" || textarea.value === "") {
    msg.innerHTML = "All fields are required";
    msg.style.color = "red";
    return;
  }
  msg.innerHTML = "";
  acceptData();
  add.setAttribute("data-bs-dismiss", "modal");
  add.click();
  (() => {
    add.setAttribute("data-bs-dismiss", "");
  })();
};

//Prevents Storing Empty Initial Object
let data = JSON.parse(localStorage.getItem("data")) || [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
  createTasks();
};

// Toggle Complete Functionality
// This function toggles the completed state of a task when the check icon is clicked.
function toggleComplete(e) {
  e.parentElement.parentElement.classList.toggle("completed");
}

let createTasks = () => {
  tasks.innerHTML = "";
  data.sort((a, b) => new Date(a.date) - new Date(b.date));
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
            <i onClick="toggleComplete(this)" class="fas fa-check-circle text-success me-2"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

let deleteTask = (e) => {
  e.parentElement.parentElement.remove();
  data.splice(e.parentElement.parentElement.id, 1);
  localStorage.setItem("data", JSON.stringify(data));
  console.log(data);
  
};

let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

(() => {
  data = JSON.parse(localStorage.getItem("data")) || []
  console.log(data);
  createTasks();
})();

function clearAll() {
  data = [];
  localStorage.removeItem("data");
  createTasks();
}