dom.js

let body = document.getElementById("body");

export function updateScreenwithTasks(tasks, onDelete, onUpdate) {
  body.innerHTML = "";

  tasks.map((task) => {
    let div = document.createElement("div");

    let p = document.createElement("h2");
    let ul = document.createElement("ul");

    p.textContent = task.name;

    // Split the description into multiple bullet points
    const descriptions = task.description.split(","); // split by comma

    descriptions.forEach((descItem) => {
      let descLi = document.createElement("li");
      descLi.textContent = descItem.trim(); // remove any extra spaces
      ul.appendChild(descLi);
    });

    let deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.onclick = () => onDelete(task.id);

    let updateBtn = document.createElement("button");
    updateBtn.textContent = "Update";
    updateBtn.onclick = () => {
      // Enter Edit Mode
      div.innerHTML = "";

      let nameInput = document.createElement("input");
      nameInput.value = task.name;
      nameInput.style.marginBottom = "10px";
      nameInput.style.display = "block";

      let descInput = document.createElement("input");
      descInput.value = task.description;
      descInput.style.marginBottom = "10px";
      descInput.style.display = "block";

      let saveBtn = document.createElement("button");
      saveBtn.textContent = "Save";
      saveBtn.style.marginRight = "10px";
      saveBtn.onclick = () => {
        onUpdate(task.id, nameInput.value, descInput.value);
      };

      let cancelBtn = document.createElement("button");
      cancelBtn.textContent = "Cancel";
      cancelBtn.onclick = () => {
        updateScreenwithTasks(tasks, onDelete, onUpdate);
      };

      div.append(nameInput, descInput, saveBtn, cancelBtn);
    };

    div.append(p, ul, deleteBtn, updateBtn);
    body.append(div);
  });
}