Learn localStorage by Building a Todo App - Step 36

JavaScript
1

Tell us what’s happening:

Hello FreeCodeCamp Staff & Friends, I am unable to get this code to pass. Can somebody take a look?

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region


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 (formInputsContainValues) {
    confirmCloseDialog.showModal();

  } else {
    reset();
  }

};

  


// User Editable Region

Your browser information:

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

Challenge Information:

Learn localStorage by Building a Todo App - Step 36

2

what hint are you getting?

3 
You should use const and arrow syntax to create an addOrUpdateTask function.
4

are you doing all those things?

5

Yes I included the dataArrIndex, taskObj and the if statement from the previous exercise.

6

Are you doing all the things mentioned in the hint? read it carefully, think about every word (the first 4 words)

7

if you’re referring to these last 4 words, then I don’t know what to tell you. It’s already in the function right?

into the addOrUpdateTask function.

8

I mean the first four words of the hint (error message if you want) that you posted a few messages above

9

I hear you, I forgot to declare the variable :see_no_evil:
but it’s still not going through

Hint:

You should move the if statement with the condition dataArrIndex === -1 into your addOrUpdateTask function.


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 (formInputsContainValues) {
    confirmCloseDialog.showModal();

  } else {
    reset();
  }

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

};
10

is it still present outside addOrUpdateTask?

11

Don’t think so

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 (formInputsContainValues) {
    confirmCloseDialog.showModal();

  } else {
    reset();
  }

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

};

  


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;

  
});

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

discardBtn.addEventListener("click", () => {
  confirmCloseDialog.close();
  reset()
});

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

  
  

 

 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</button>
          <button type="button" class="btn">Delete</button>
        </div>
      `
    }
  );

  reset()
});
12

was this included in the things to move?

you should reset the step and try again

13

Thanks, that worked.

Honestly, it might be helpful if the question were more specific. I used common sense to interpret it, thinking it was referencing the if statement in the prior step, but clearer guidance would have avoided any confusion. It’s a bit frustrating when the instructions feel vague, especially when you’re trying to follow along and learn effectively.

14

The hint from the tests say

You should move the if statement with the condition dataArrIndex === -1 into your addOrUpdateTask function.

If you think it should be made more clear in the instructions of the tests, can you open an issue on GitHub please?