Build a Todo App using Local Storage - Step 35

hi, totally blind, using a screen reader jaws 2026. windows 11 pro, google chrome. now i have moved the dataArrIndex function to the function for this step 35, move the dataArrIndex into the update or add function, but fcc is very picky, and cannot see, so dont know if extra hidden characters, etc. so have tried trouble shooting, reset the lesson, done a hard refresh, and also rewrote the function and the code. the variable is moved into that funciton, but still failing, and also did research on google. so can any one help me out, and in australia. so dont want to spend hours waiting for a reply or help. have tried trying to get this to pass the last 24 hours and totally frustrated. so can any one help? will paste my java script code, error and step to the link project. and please dont complain if the code does not look the same as the example, as cannot see and not get access to the example project layout. so pasting below. please help. hate fcc and could be more screen reader and accessibility friendly. as dealing with accessibility challenges, and this is one of the more challenging and frustrating projects from a accessibility challenges and taking me weeks to do, as more accessibility roadblocks and learning. want to learn, but just frustrated. and going to take me a month or more to get this project done. so just ranting.

rant over.

marvin.

ps: pasting below.

javascript:

// 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 = {};



// Reset form

const reset = () => {

  titleInput.value = "";

  dateInput.value = "";

  descriptionInput.value = "";

  taskForm.classList.add("hidden");

  addOrUpdateTaskBtn.innerText = "Add Task";

  currentTask = {};

};



// Add or update task (Step 35)

const addOrUpdateTask = () => {

  const dataArrIndex = taskData.findIndex(task => task.id === currentTask.id);



  const taskObj = {

    id: currentTask.id || \`${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}\`,

    title: titleInput.value,

    date: dateInput.value,

    description: descriptionInput.value

  };



  if (dataArrIndex === -1) {

    taskData.unshift(taskObj); // add new task

  } else {

    taskData\[dataArrIndex\] = taskObj; // update existing

  }



  return taskObj;

};



// Render a single task

const renderTask = (taskObj) => {

  const existingEl = document.getElementById(taskObj.id);

  const taskHTML = \`

    <div class="task" id="${taskObj.id}">

      <p><strong>Title:</strong> ${taskObj.title}</p>

      <p><strong>Date:</strong> ${taskObj.date}</p>

      <p><strong>Description:</strong> ${taskObj.description}</p>

      <button type="button" class="btn">Edit</button>

      <button type="button" class="btn">Delete</button>

    </div>

  \`;

  if (existingEl) {

    existingEl.outerHTML = taskHTML;

  } else {

    tasksContainer.innerHTML += taskHTML;

  }

};



// Open form

openTaskFormBtn.addEventListener("click", () => taskForm.classList.remove("hidden"));



// Close form

closeTaskFormBtn.addEventListener("click", () => {

  if (titleInput.value || dateInput.value || descriptionInput.value) {

    confirmCloseDialog.showModal();

  } else {

    reset();

  }

});



// Cancel/Discard

cancelBtn.addEventListener("click", () => confirmCloseDialog.close());



discardBtn.addEventListener("click", () => {

  confirmCloseDialog.close();

  reset();

});



// Submit form

taskForm.addEventListener("submit", (e) => {

  e.preventDefault();

  const taskObj = addOrUpdateTask(); // Add/update task

  renderTask(taskObj);                // Render task

  reset();                             // Reset form

});

errors:

Sorry, your code does not pass. You’re getting there.

You should move the dataArrIndex variable into the addOrUpdateTask function.

link to step 35:

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

hi, sorry, did try using control e for the preformatted. so do you have a answer for me or a solution?

marvin.

Hi @BlindVisionMan

The code you posted appears to contain back slashes \.

It looks like the code you placed in the addOrUpdateTask function was modified.

I was able to copy the original code and paste it into the new function for the first two tasks.

For the third and final task, the pasted code would not pass.

Please reset the step to restore the seed code.

You correctly defined the AddOrUpdateTask function.

Just cut and paste the required code into the new function.

Happy coding