ToDo App addOrUpdateTaskBtn text is not properly updating after editing task

[Only-Czesio]

Describe the Issue

About the Todo App —> When updating a task we are changing the innerText :
addOrUpdateTaskBtn.innerText = “Update Task”;
addOrUpdateTaskBtn.ariaLabel = “Update Task”;

and then when we are creating new task the button stay with text "Update Task".

So for future coders it would be nice to create somewhere in the way step to change back when creating task to

addOrUpdateTaskBtn.innerText = “Create Task”;
addOrUpdateTaskBtn.ariaLabel = “Create Task”;

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-localstorage-by-building-a-todo-app/step-57

Your code

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”;
addOrUpdateTaskBtn.ariaLabel = “Update Task”;

taskForm.classList.toggle(“hidden”);
}

Expected behavior

const addOrUpdateTask = () => {
addOrUpdateTaskBtn.innerText = "Add Task";
addOrUpdateTaskBtn.ariaLabel = "Add Task";
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);
} else {
taskData[dataArrIndex] = taskObj;
}

localStorage.setItem("data", JSON.stringify(taskData));
updateTaskContainer()
reset()
};

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

Adding this two lines of code to function addOrUpdateTask fix the problem
const addOrUpdateTask = () => {
addOrUpdateTaskBtn.innerText = "Add Task";
addOrUpdateTaskBtn.ariaLabel = "Add Task";

[shivam-0510]

Can you suggest me the file name for this issue?

[jdwilkin4]

Hi @shivam-0510 !

I am above to post a reply on the fixes needed for this change because it affects multiple files since all of the seed code will need to be updated too

[jdwilkin4]

HI @Only-Czesio !

Thank you for opening this issue.

We will open this up for contribution soon for contributors interested in working on this. I will post a reply on the changes needed.
But your proposed solution works for me.
The only change that is not needed is this one

addOrUpdateTaskBtn.ariaLabel = “Add Task”;

we recently had PR to remove the ariaLabel for that button. It just hasn't shown up in production yet.

[jdwilkin4]

After reviewing the project, it would be best to introduce a new step after step 45 here.

We should insert a new step 46 that has the following instructions

# --description--

If you try to add a new task, edit that task, and then click on the `"Add New task"` button, you will notice a bug.

The form button will display the incorrect text of `"Update Task"` instead of `"Add Task"`. To fix this, you will need to update your `addOrUpdateTask` function to update the `innerText` of the `addOrUpdateTaskBtn` to `"Add Task"`.

This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.

If you would like to contribute and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/

If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum

Files that need to be changed

This fix requires you to create a new step 46
You can read about how to add new steps here
https://contribute.freecodecamp.org/#/how-to-work-on-practice-projects?id=how-to-work-on-practice-projects

Please use the description made above and add the appropriate tests.

Then for steps 47 through to the end, you will need to add the solution of the correct answer addOrUpdateTaskBtn.innerText = "Add Task"; to the top of the addOrUpdateTask function.
You will also need to make sure to update the final solution code found in step 58 in the --solutions section.

[shivam-0510]

I have added the PR, please review it #53094