Learn localStorage by Building a Todo App - Step 12

JavaScript
1

i have tired submitting but it doesnt work can u point out specifically what is wrong

Tell us what’s happening:

Your code so far

const taskObj = {
id: ‘${titleInput.value.toLowerCase().split(’ ‘).join(’-‘)}’,
};

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

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 = {};

openTaskFormBtn.addEventListener("click", () =>
  taskForm.classList.toggle("hidden")
);

closeTaskFormBtn.addEventListener("click", () => {
  confirmCloseDialog.showModal();
});

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

discardBtn.addEventListener("click", () => {
  confirmCloseDialog.close();
  taskForm.classList.toggle("hidden");
});


taskForm.addEventListener("submit", (e) => {
  e.preventDefault();

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

Your browser information:

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

Challenge Information:

Learn localStorage by Building a Todo App - Step 12

2

Hi @email2shaheer

id: ‘${titleInput.value.toLowerCase().split(’ ‘).join(’-‘)}’,
};```

The backslashes and quotes in your code do not look quite right.

Happy coding
3

they dont? which ones should i use
im using ’ ’

4

back tick is `
single quote '
double quote "

Code does not seem to render well in posts. I nested the quotes in back ticks.

Try posting your entire code in the following way:

on the first line type three back ticks
on the next line paste your code.
on the last time type three back ticks.

5 
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 = {};

openTaskFormBtn.addEventListener("click", () =>
  taskForm.classList.toggle("hidden")
);

closeTaskFormBtn.addEventListener("click", () => {
  confirmCloseDialog.showModal();
});

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

discardBtn.addEventListener("click", () => {
  confirmCloseDialog.close();
  taskForm.classList.toggle("hidden");
});


taskForm.addEventListener("submit", (e) => {
  e.preventDefault();

  const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
  
  const taskObj = {
    id: '{titleInput.value.toLowerCase().split('-').join('-')}'
  }```
6

Hi @email2shaheer

  1. change the quote marks before and after the curly braces {} into back ticks.
  2. The $ is missing from the start of your code in the code block above.
  3. after the taskObj variable add the following code to close taskForm.addEventListener });

Happy coding

1 Like
7

``` id: ${titleInput.value.toLowerCase().split(' ').join('-')},
};```` i beleive there is some sort of syntax error after the first two changes im getting redline at the end, also where specifically should i add taskForm.addEventListener

8

its working now thank you for ur guidance good sir/mam

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.