Step 26 not passing

JavaScript
1

hi, doing the build a to do list and up to step 26, using a screen reader jaws 2026. and windows 11 pro, google chrome. now it is not passing my code. and wondering if a bug with the fcc test. have reset the lesson, have reset and a hard refresh. so will paste my java scode the error and then the link below. if it is not formatted correct, i am sorry, the forum is not the eaisest to use with a screen reader and formatted code. so will try my best. can any one let me know why it is not passing and any tips or help to get it to pass. tearing my hair out.

marvin.

ps: pasting the javascript and html below.

html:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Todo App - Steps 1-26</title>

  <link rel="stylesheet" href="styles.css" />

</head>

<body>

  <main>

    <h1>Todo App</h1>

    <div class="todo-app">

      <button id="open-task-form-btn" class="btn large-btn">Add New Task</button>



      <form class="task-form hidden" id="task-form">

        <div class="task-form-header">

          <button id="close-task-form-btn" type="button" aria-label="close">X</button>

        </div>

        <div class="task-form-body">

          <label for="title-input">Title</label>

          <input required type="text" id="title-input" />



          <label for="date-input">Date</label>

          <input type="date" id="date-input" />



          <label for="description-input">Description</label>

          <textarea id="description-input" cols="30" rows="5"></textarea>

        </div>

        <div class="task-form-footer">

          <button type="submit" id="add-or-update-task-btn" class="btn large-btn">Add Task</button>

        </div>

      </form>



      <dialog id="confirm-close-dialog">

        <form method="dialog">

          <p>Discard unsaved changes?</p>

          <button id="cancel-btn" class="btn">Cancel</button>

          <button id="discard-btn" class="btn">Discard</button>

        </form>

      </dialog>



      <div id="tasks-container">

        <div class="task" id="example-task">

          <p><strong>Title:</strong> Example Task</p>

          <p><strong>Date:</strong> 2025-01-01</p>

          <p><strong>Description:</strong> Example description</p>

        </div>

      </div>

    </div>

  </main>

  <script src="script.js"></script>

</body>

</html>

javascript:

// script.js

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.add("hidden");

});



// Function to render tasks

function renderTasks() {

  tasksContainer.innerHTML = "";



  taskData.forEach(({ id, title, date, description }) => {

    const taskDiv = document.createElement("div");

    taskDiv.classList.add("task");

    taskDiv.id = id;



    // Title

    const titleP = document.createElement("p");

    titleP.innerHTML = \`<strong>Title:</strong> ${title}\`;



    // Date

    const dateP = document.createElement("p");

    dateP.innerHTML = \`<strong>Date:</strong> ${date}\`;



    // Description

    const descP = document.createElement("p");

    descP.innerHTML = \`<strong>Description:</strong> ${description}\`;



    taskDiv.appendChild(titleP);

    taskDiv.appendChild(dateP);

    taskDiv.appendChild(descP);



    tasksContainer.appendChild(taskDiv);

  });

}

errors:

You should create a p element and interpolate ${date} as the text.

link:

.

2

It’s ok, I’ve edited your post to improve the readability of the code.
But I suggest to try using Help button, in this case it will add your code automatically to the topic, it may be helpful for you

3

This step did not ask you to add a Description. You should not add anything that the step did not ask for. You really need to stop including code from later steps in your answers. You should only start with the code you are given on each step and only add what the instructions ask for.