looking for why list does not display when adding task to the to do-CodePudding

Good day folks,

I am creating a to-do app, and so far when I enter the task in via the input the console shows my object firing but does not display it on the screen. Please look at my code and help me point out the issue, I have been debugging this for some time today.

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">
    <link rel="stylesheet" href="css/to-doStylesheet.css">
    
    <title>To-Do App</title>
</head>
<body>
    
    <div class=container>
        <div class= base>
            <div class = screen>
                <img src="images/WarGreymon_Render.png" alt="Wargreymon">
                <div id ="speach-bubble"> What is on your 
                    agenda for today?
                </div>
                <div class = "dateTime">
                </div>
            </div>
           
    <div class = "nameInput" id = "inputContainer">
        <form class ="form">
            <input type="text" class ="userInput" placeholder="Add Agenda and press enter">
            <input type="submit" value ="Add">   
        </form>
        
    </div>
    </div>

<ul ></ul>

    <script src="js/add-task.js"></script>
</body>
</html>

CSS

.form
{
  margin-left: 400px;
}

.userInput
{
    width: 394px;
    height: 30px;
    background-color: #B62626;
    font-family: Digimon Basic;
    color: #33D61A;
    margin-left: -359px;
}

.userInput ::placeholder
{
    color: #33D61A;
    font-family: Digimon Basic;
}

.list:empty
{
  display: none;
}

.list
{
  list-style: none;
  margin-bottom: 20px;
}

.input[type="checkbox"] {
  display: none;
}

.tick {
  width: 30px;
  height: 30px;
  border: 3px solid #333;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.todo-item {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.todo-item span {
  flex-grow: 1;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 22px;
}

let tasks = [];

const currentdt = new Date()

function todo(text) {
  const todo = {
    text,
    checked: false,
    id: Date.now(),
    timestamp: currentdt
  };

  tasks.push(todo);
  console.log(tasks);
}

// Select the form element
const form = document.querySelector('.form');
// Add a submit event listener
form.addEventListener('submit', event => {
  // prevent page refresh on form submission
  event.preventDefault();
  // select the text input
  const input = document.querySelector('.userInput');

  // Get the value of the input and remove whitespace
  const text = input.value.trim();
  if (text !== '') {
    todo(text);
    input.value = '';
    input.focus();
  }
});

//This function is to display new to do on the screen
function displaytasks(todo)
{
    const list = document.querySelector('list');

    const isChecked = todo.checked ? 'done': '';

    const addedList = document.createElement("li");

    addedList.setAttribute('class', `todo-item ${isChecked}`);

    addedList.setAttribute('data-key', todo.timestamp);

    addedList.innerHTML = `<input id="${todo.timestamp}" type="checkbox"/>
    <label for="${todo.timestamp}" ></label>
    <span>${todo.text}</span>
    <button >
    <img class = "delete" src="images/delete.png" alt="delete icon">
    </button>`;

    list.append(addedList);
}

So I am busy with the js file at the moment, I think it has to do something with the innerHTML, but I am not sure what exactly is wrong there, because when I look in the console on the HTML side I do not see the <ul ></ul> firing at all to bring the new HTML elements.

Your help will be much appreciated

CodePudding user response：

It looks like the code to display the todos is not being called, so I would recommend you add in a function call after reading in a new todo.

  ...
  const text = input.value.trim();
  if (text !== '') {
    todo(text);
    input.value = '';
    input.focus();
    displaytasks(tasks); // Show tasks after submission
  }
});

//This function is to display new to do on the screen
function displaytasks(todo)
{
    const list = document.querySelector('.list');
    ...