Learn localStorage by Building a Todo App - Step 36

JavaScript
1

Tell us what’s happening:

I am really confused on this step for this challenge i have tried everything but nothing seems to be working pls can i get some help?

Your code so far


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 reset = () => {
  titleInput.value = "";
  dateInput.value = "";
  descriptionInput.value = "";
  taskForm.classList.add("hidden");
  currentTask = {};
};

const addOrUpdateTask = () => {
  const taskObj = {
    id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
    title: titleInput.value,
    date: dateInput.value,
    description: descriptionInput.value,
  };

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

  if (dataArrIndex === -1) {
    taskData.unshift(taskObj); 
  } else {
    taskData[dataArrIndex] = taskObj;
  }
};

const renderTasks = () => {
  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 type="button" class="btn edit-btn">Edit</button>
        <button type="button" class="btn delete-btn">Delete</button>
      </div>
    `;
  });
};

openTaskFormBtn.addEventListener("click", () =>
  taskForm.classList.remove("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(); 
  renderTasks();    
  
  reset(); 
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Learn localStorage by Building a Todo App - Step 36

Sorry, your code does not pass. Hang in there.

You should move the dataArrIndex variable into the addOrUpdateTask function. this is the error message i get

2

how many new functions did you add? You were only supposed to add one.
(addOrUpdateTask is the only thing you were supposed to create and then move the 3 things they asked for into it)