Tell us what’s happening:
Ive added teh function and tried many times but nothing worked
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
// User Editable Region
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 = JSON.parse(localStorage.getItem("data")) || [];
let currentTask = {};
const removeSpecialChars = (val) => {
return val.trim().replace(/[^A-Za-z0-9\-\s]/g, '')
}
const addOrUpdateTask = () => {
if(!titleInput.value.trim()){
alert("Please provide a title");
return;
}
const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
--fcc-editable-region--
const taskObj = {
id: `${removeSpecialChars(titleInput.value).toLowerCase().split(" ").join("-")}-${Date.now()}`,
title: titleInput.value,
date: dateInput.value,
description: descriptionInput.value,
};
--fcc-editable-region--
if (dataArrIndex === -1) {
taskData.unshift(taskObj);
} else {
taskData[dataArrIndex] = taskObj;
}
localStorage.setItem("data", JSON.stringify(taskData));
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);
localStorage.setItem("data", JSON.stringify(taskData));
}
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";
taskForm.classList.toggle("hidden");
}
const reset = () => {
addOrUpdateTaskBtn.innerText = "Add Task";
titleInput.value = "";
dateInput.value = "";
descriptionInput.value = "";
taskForm.classList.toggle("hidden");
currentTask = {};
}
if (taskData.length) {
updateTaskContainer();
}
openTaskFormBtn.addEventListener("click", () =>
taskForm.classList.toggle("hidden")
);
closeTaskFormBtn.addEventListener("click", () => {
const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;
const formInputValuesUpdated = titleInput.value !== currentTask.title || dateInput.value !== currentTask.date || descriptionInput.value !== currentTask.description;
if (formInputsContainValues && formInputValuesUpdated) {
confirmCloseDialog.showModal();
} else {
reset();
}
});
cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
discardBtn.addEventListener("click", () => {
confirmCloseDialog.close();
reset()
});
taskForm.addEventListener("submit", (e) => {
e.preventDefault();
addOrUpdateTask();
});
// 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/150.0.0.0 Safari/537.36
Challenge Information:
Build a Todo App using Local Storage - Step 67