Learn localStorage by Building a Todo App - Step 44

JavaScript
1

Tell us what’s happening:

I don’t get it. What am i doing wrong here? i would appreciate the help

Your code so far

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


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

const deleteTask = (buttonEl) => {
  const dataArrIndex = taskData.findIndex(
    (item) => item.id === buttonEl.parentElement.id
  );
  buttonEl.parentElement.remove();
  taskData.splice(dataArrIndex,1);

// User Editable Region

/* file: styles.css */

Your browser information:

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

Challenge Information:

Learn localStorage by Building a Todo App - Step 44

2

Can you paste all the code please? The code you posted looks okay but maybe there is a mistake somewhere else.

3

sure, here is the entire code:

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 (dataArrIndex === -1) {
taskData.unshift(taskObj);
}

updateTaskContainer()
reset()
};

const updateTaskContainer = () => {
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 onclick="editTask(this)" type="button" class="btn">Edit</button> <button onclick="deleteTask(this)" type="button" class="btn">Delete</button> </div> )
}
);
};

const deleteTask = (buttonEl) => {

  • const dataArrIndex = taskData.findIndex(*
  • (item) => item.id === buttonEl.parentElement.id*
  • );*
  • buttonEl.parentElement.remove();*
  • taskData.splice(dataArrIndex,1);* the block code between “*” belongs to this step(44).

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

addOrUpdateTask();
});

4

i found the solution, a bracket was missing, thank you

1 Like