hi, doing the to do list project and up to step 51. it is not liking when i then edit the form and not passing, have done a reset of the lesson, done a hard refresh, and also rewrote the function, but is is not still passing. so pasting my javascript, the errors and a link to the step.
can any one help. no help button on this step. happens with some steps on some lessons, dont know why this is happening. and also pity the editor is not more accessible with a screen reader. rant over.
ps: pasting below.
javascript:
// Step 1–51 JS
// Get DOM elements
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");
// Data
const taskData = [];
let currentTask = {};
// Add or update task
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) {
// Add new task
taskData.unshift(taskObj);
} else {
// Update existing task
taskData[dataArrIndex] = taskObj;
}
updateTaskContainer();
reset();
};
// Update tasks container
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>
`;
});
};
// Delete task
const deleteTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(item => item.id === buttonEl.parentElement.id);
buttonEl.parentElement.remove();
taskData.splice(dataArrIndex, 1);
};
// Edit task
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";
taskForm.classList.remove("hidden");
};
// Reset form
const reset = () => {
titleInput.value = "";
dateInput.value = "";
descriptionInput.value = "";
taskForm.classList.add("hidden");
currentTask = {};
};
// Open task form
openTaskFormBtn.addEventListener("click", () => {
taskForm.classList.toggle("hidden");
});
closeTaskFormBtn.addEventListener("click", () => {
const formInputValuesUpdated =
titleInput.value !== currentTask.title ||
dateInput.value !== currentTask.date ||
descriptionInput.value !== currentTask.description;
if (formInputValuesUpdated) {
confirmCloseDialog.showModal();
} else {
reset();
}
});
// Dialog buttons
cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
discardBtn.addEventListener("click", () => {
confirmCloseDialog.close();
reset();
});
// Form submit
taskForm.addEventListener("submit", (e) => {
e.preventDefault();
addOrUpdateTask();
});
erorrs:
Sorry, your code does not pass. You’re getting there.
Your formInputValuesUpdated variable should check if titleInput.value is not equal to currentTask.title.
link to the step:
