Learn localStorage by Building a Todo App - Step 35

JavaScript
1

Tell us what’s happening:

Hello, I have already tried all the methods that are on the forum, and nothing works.. please help me, I don’t know what to do anymore. (the remaining piece of code, it was copied for the hundredth time from the guy who sent his code earlier with the question.. and I did not change it, help)

Your code so far

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


/* file: styles.css */


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

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

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Challenge Information:

Learn localStorage by Building a Todo App - Step 35

2

would you be able to share the code you have written instead?

3

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

const taskObj = {
id: currentTask.id ?? Date.now(),
title: titleInput.value,
date: dateInput.value,
description: descriptionInput.value,
};

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

4

Hi.

You have changed some of the code. You are only asked to move existing code. I suggest you reset the step and only create the function and move the code as indicated in the instructions. Don’t change it.

5

Now i have this code (FULL), please help, i didn’t change the code that gas written before..

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: currentTask.id ?? Date.now(),

title: titleInput.value,

date: dateInput.value,

description: descriptionInput.value,

};

if (dataArrIndex === -1) {

taskData.push(taskObj);

} else {

taskData\[dataArrIndex\] = 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;

if (formInputsContainValues) {

confirmCloseDialog.showModal();

} else {

reset();

}

});

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

discardBtn.addEventListener(“click”, () => {

confirmCloseDialog.close();

reset()

});

taskForm.addEventListener(“submit”, (e) => {

e.preventDefault();

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);

}

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()

});

6

IT WAS! not clear for me, but it pass! thank..