Learn localStorage by Building a Todo App - Step 36

JavaScript
1

Tell us what’s happening:

Task is to move object and variable and such into a function.What is wrong?

Your code so far

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


/* file: styles.css */


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

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, } closeTaskFormBtn.addEventListener("click", () => { const formInputsContainValues = titleInput.value || dateInput.value || 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/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Challenge Information:

Learn localStorage by Building a Todo App - Step 36

2

Hi @zm17jaga

image
image736×261 31.7 KB

The red squiggly lines indicate syntax errors.

The addOrUpdateTask arrow function is missing the >

Try placing each block of code on a new line.
You will need to reset the step to restore the seed code, and start again.

Happy coding

3

I tried that and it is still not being accepted.


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, 
} ;

closeTaskFormBtn.addEventListener("click", () => { 
    const formInputsContainValues = titleInput.value || 
        dateInput.value || 
       descriptionInput.value;

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

    if (formInputsContainValues) {
        confirmCloseDialog.showModal(); 
    }  else {
           reset(); 
} ; 
})
4

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

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

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

5

Are you really writing all of your code on a single line like this?

Do you get any hints or errors?

6

Only that I need to move the if dataArrIndex=-1 statement into the function.Which I have done.

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, } ;



closeTaskFormBtn.addEventListener("click", () => { const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;


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


if (formInputsContainValues) {confirmCloseDialog.showModal(); } 

else { reset(); }  })}
7

Hi @zm17jaga

I edited your post so the code correctly formats on the forum.

Try removing the event listener

and the following if condition, plus the else statement after it.

Read the instructions carefully, and do not add anything extra.

Happy coding

8

Didn’t work,I am afraid

9

Hello zm17jaga.

So the task of this step is to create the addOrUpdateTask function for your program, and then move the logic for dataArrIndex , the taskObj and the if statement into this fuction.
Start by creating an empty arrow function for addOrUpdateTask.

Then once you have done that, scroll through the rest of the code to locate the declaration for dataArrIndex, taskObj and the if statement. You will need to cut and paste the code into the function you just created.

The purpose of this task is refactoring your code in order to enhance readability and maintainability .

10

please share your updated code

11 
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) { taskData.unshift(taskObj)}else{taskData[dataArrIndex]=taskObj}
closeTaskFormBtn.addEventListener("click", () => { const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;


 

if (formInputsContainValues) {confirmCloseDialog.showModal(); } 


else { reset(); }  })};

Still not being accepted

12

Please attempt to format your code when posting code on the forum.

13

I highly recommend using conventional formatting instead of sticking everything on as few lines as possible.

Good:

if (condition) {
  run this code;
} else {
  run that code;
}

Bad:

if (condition){runthiscode}else{runthatcode}
14

You are missing a } on your else statement prior to the closeTaskFormBtn event listener.

Mod Edit: SOLUTION REMOVED

15

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
16

I am not missing any brackets there as far as I can see

17

Please format your code conventionally so it is easier to see where you have mismatches.

18 
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) { 
  taskData.unshift(taskObj)}
  else{
    taskData[dataArrIndex]=taskObj}
closeTaskFormBtn.addEventListener("click", () => { const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;


 

if (formInputsContainValues) {
  confirmCloseDialog.showModal(); } 


else { reset(); }  })};
19

Please attempt to format your code when posting

20

You still are using disjointed and confusing formatting.