Step 24 build a to do lsit not passing

JavaScript
1

hi, theres no help button for this step on the project. totally blind and using a screen reader jaws for windows. using windows 11 2025 latest update, using jaws 2025 latest update. and using google chrome latest update. now doing the to do list and then did create the div inside the task function. have done a reset of the lesson, have done a hard refresh, have logged out of free code camp.org and then logged back in. so will paste my code, the errors and the link to the step. can any one help me out. so not passing, and cannot see if theres any hidden characters or hidden trailling spaces. and dont moan if my code does not look the same as the fcc example. is it my code or a fcc bug? can any one help me out. thanks.

marvin.

ps: pasting the code and errors and the link below.

java script:

// Step 1–24: Task Management JavaScript

// Get DOM elements

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

// Open/close form

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

});

// Render tasks function (Steps 22–24)

function renderTasks() {

tasksContainer.innerHTML = “”; // clear container

taskData.forEach(({ id }) => {

const task = document.createElement("div"); // Step 24: create div

task.classList.add("task");                 // add class

task.id = \`${id}\`;                          // set id

tasksContainer.appendChild(task);           // append to container



// Debug log inside correct scope

console.log("Created task div with id:", id);

});

}

// Submit handler

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()}\`, // Step 18 unique id

title: titleInput.value,

date: dateInput.value,

description: descriptionInput.value

};

if (dataArrIndex === -1) {

taskData.unshift(taskObj); // Step 21: add new task

}

renderTasks(); // Step 22–24: create and append divs

});

errors:

You should create a div element with the class task.

1. You should create a div element with the class task.
2. Your div element should have an id of ${id}.
// tests completed
link to the step:
https://www.freecodecamp.org/learn/full-stack-developer/workshop-todo-app/step-24
.
2

hello marvin, can you please share this step url here directly, cant find it in here in your post, happy coding :slight_smile:

3

nevermind, found it, but keep it in a separate block instead so that its more easily accessible, thanks :slight_smile:

4
  • i suppose best way to solve this step is to reset and try again, you need to make use of ‘template string’ that was given initially
  • you dont have to do it this way for this step, rather make use of “div” elemengt directly into “template string” with “id” and “class” name directly in it as you would for a “html” markup
  • you can pass this step with an one liner

happy coding :slight_smile: