This is an understanding question not an coding mistake. In linked program there is something I don’t understand. My understanding is in javaScript it is very easy to change a data type, if can depending on the circumstance, can be as easy as changing a ‘let’ variable’s value.
However in this program in edit task function the currentTask which was defined as a empty object on line 14 is changed to what appears to have a numerical value rather than one or more key value pairs, which I would have assumed changes its data type.
However I assume this is wrong both due the succeeding line of code implying it is still an object and the the fact the code would assumably have done some else, presumably let currentTask; to initially declare the variable instead. Where I am I misunderstanding.
const taskForm = document.getElementById("task-form");
const confirmCloseDialog = document.getElementById("confirm-close-dialog");
const openTaskFormBtn = document.getElementById("open-task-form-btn");
const closeTaskFormBtn = document.getElementById("close-task-form-btn");
const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn");
const cancelBtn = document.getElementById("cancel-btn");
const discardBtn = document.getElementById("discard-btn");
const tasksContainer = document.getElementById("tasks-container");
const titleInput = document.getElementById("title-input");
const dateInput = document.getElementById("date-input");
const descriptionInput = document.getElementById("description-input");
const taskData = [];
let currentTask = {};
const addOrUpdateTask = () => {
const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
const taskObj = {
id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
title: titleInput.value,
date: dateInput.value,
description: descriptionInput.value,
};
if (dataArrIndex === -1) {
taskData.unshift(taskObj);
}
updateTaskContainer()
reset()
};
const updateTaskContainer = () => {
tasksContainer.innerHTML = "";
taskData.forEach(
({ id, title, date, description }) => {
tasksContainer.innerHTML += `
<div class="task" id="${id}">
<p><strong>Title:</strong> ${title}</p>
<p><strong>Date:</strong> ${date}</p>
<p><strong>Description:</strong> ${description}</p>
<button onclick="editTask(this)" type="button" class="btn">Edit</button>
<button onclick="deleteTask(this)" type="button" class="btn">Delete</button>
</div>
`
}
);
};
const deleteTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
buttonEl.parentElement.remove();
taskData.splice(dataArrIndex, 1);
}
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
currentTask = taskData[dataArrIndex];
titleInput.value = currentTask.title;
dateInput.value = currentTask.date;
descriptionInput.value = currentTask.description;
addOrUpdateTaskBtn.innerText = "Update Task";
}
const reset = () => {
titleInput.value = "";
dateInput.value = "";
descriptionInput.value = "";
taskForm.classList.toggle("hidden");
currentTask = {};
}
openTaskFormBtn.addEventListener("click", () =>
taskForm.classList.toggle("hidden")
);
closeTaskFormBtn.addEventListener("click", () => {
const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;
if (formInputsContainValues) {
confirmCloseDialog.showModal();
} else {
reset();
}
});
cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
discardBtn.addEventListener("click", () => {
confirmCloseDialog.close();
reset()
});
taskForm.addEventListener("submit", (e) => {
e.preventDefault();
addOrUpdateTask();
});