Need help with Todo List Javascript portion

JavaScript
1

I am trying to build a ToDO list using Javascipt. I’m at the part where I need to create the list of things after you hit the enter button, but I don’t think my Javascript is right. This is what I have so far on my Codepen

`// User clicked on the enter button

// If there is any text on the input text field, then add that text to list 

document.getElementById('enter').addEventListener('click', function(){
  var value = document.getElementById('userInput').value;
  if(value !== " ") {
    return addItemTodo(value);
  }
} );

function addItemTodo(text) {
  var list = document.getElementById('todo');
  
  var item = document.createElement('li');
  item.innerText = text;
  
  var buttons = document.createElement('div'); 
  buttons.classList.add('buttons')
  
  var remove = document.createElement('buttons')
  remove.classList.add('Remove')
  
  var complete = document.createElement('buttons')
  remove.classList.add('Complete')
  
  buttons.appendChild(remove);
  buttons.appendChild(complete);
  buttons.appendChild(buttons);
  list.appendChild(item);
}`
2

Let’s go over the simple mistakes first.

You’re accessing an element with the ID of todo. You don’t even have any element in your HTML markup with the corresponding ID. You have an item with the class of todo. You can fix this by adding the id="todo" to the respective element OR access the same element with its class. If you don’t know how to access the element with a class, then google it.

buttons is not a valid HTML attribute, you must have meant to write button there, right?

Same issue for the complete button.

Here, you create a variable named complete, but on the next line, you add the class to remove variable instead, you must have meant to write complete there, right?

What sorcery is that? haha :slight_smile: You’re appending buttons to buttons. I’ll leave this up to you to figure out what you need to do there.

One thing you’re missing is that you’re not creating <i class="fa fa-trash" aria-hidden="true"></i> and <i class="fa fa-check" aria-hidden="true"></i> that you have defined in your original HTML markup, so if you skip this, buttons will be invisible because you’re not even adding any text (An empty button like this: <button></button> will show nothing on the screen), so take care of that too.

And lastly,

This logic is flawed. (Although the current code will work with the current logic) You are checking here that if this the input value is on NOT equal to only ONE space, then add the todo to the list.
What if the input value is nothing? or two more spaces? The todo will still get added, although the text will be invisible.

Don’t worry about the edge cases at first. Just try to make code work first, then tweak it slowly.

3

Thanks for helping. I was following a video on this project, hence, why my code is all over the place. I put in the corrections you pointed out, but I still can’t get it to create anything