Trying to make my ToDo list <li> tags display as a column but can't make it work

web-dev-jr :

I'm building the obligatory todo list app and running into a weird issue with styling. When I create my li's I want them to display inline-flex and column, stacked on top of one another. However, they currently display lined up in a row as you create them.

I've played around with this for quite awhile and still can't figure out how I can't get this to work. I've target every element I have trying to make it work but it won't display properly.

Does anyone have an idea of what I'm missing?

https://codepen.io/constequalsexcel/pen/ZEGGoLq

function addTodo() {
  let node = document.createElement('li');
  node.setAttribute('class', 'list-item');
  let text = document.getElementById('todo-input').value;
  let textnode = document.createTextNode(text);
  node.appendChild(textnode);

  let deleteButton = document.createElement('button');
  let deleteButtonX = document.createTextNode('X');
  deleteButton.appendChild(deleteButtonX);

  let StrikeThroughRadio = document.createElement('input');
  StrikeThroughRadio.setAttribute('type', 'checkbox');
  StrikeThroughRadio.addEventListener('click', function(e) {
    if (StrikeThroughRadio.checked === true) {
      e.target.nextElementSibling.style.textDecoration = 'line-through';
      e.target.nextElementSibling.style.color = 'red';
    } else {
      e.target.nextElementSibling.style.textDecoration = 'none';
      e.target.nextElementSibling.style.color = 'black';
    }
  });

  deleteButton.addEventListener('click', function() {
    let deleteLI = document.getElementById('display');
    deleteLI.removeChild(node);
    let RemoveDeleteButton = document.getElementById('display');
    RemoveDeleteButton.removeChild(deleteButton);
    let RemoveStrikeThroughRadio = document.getElementById('display');
    RemoveStrikeThroughRadio.removeChild(StrikeThroughRadio);
  });

  document.getElementById('display').appendChild(StrikeThroughRadio);
  document.getElementById('display').appendChild(node);
  document.getElementById('display').appendChild(deleteButton);
}

function ClearInputOnSubmit() {
  document.getElementById('todo-input').value = '';
}

#header {
  display: flex;
  justify-content: center;
  margin-right: 160px;
}

enter code here ul {
  display: inline-flex;
  list-style: none;
}

.main {
  width: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
}

#display>li {
  display: inline-flex;
  flex-direction: column;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />

  <title>To-Do App</title>

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

<body>
  <h1 id="header">TO DO LIST</h1>
  <div class="main">
    <div class="todo-container">
      <ul id="display"></ul>
    </div>
    <div class="container">
      <div>
        <input type="text" id="todo-input" />
        <input type="button" value="Add ToDo" id="todo-button" onclick="addTodo(); ClearInputOnSubmit()" />
      </div>
    </div>
  </div>
  <script src="scripts.js"></script>
</body>

</html>

Akhil Aravind :

According to html standards, only li is allowed inside ul, other elements as a child of ul is invalid. Check the doc.

So I have made a good change in your code, please check the snippet.

function addTodo() {
  let node = document.createElement('li');
  node.setAttribute('class', 'list-item');
  let text = document.getElementById('todo-input').value;
  let textnode = document.createElement('span');
  textnode.innerText = text;
  //node.appendChild(textnode);

  let deleteButton = document.createElement('button');
  let deleteButtonX = document.createTextNode('X');
  deleteButton.appendChild(deleteButtonX);
  deleteButton.addEventListener('click', removeNode);

  let StrikeThroughRadio = document.createElement('input');
  StrikeThroughRadio.setAttribute('type', 'checkbox');
  StrikeThroughRadio.addEventListener('click', function(e) {
    StrikeThroughRadio.checked ? e.target.nextElementSibling.classList.add('strike-text') :
      e.target.nextElementSibling.classList.remove('strike-text')
  });


  node.appendChild(StrikeThroughRadio)
  node.appendChild(textnode);
  node.appendChild(deleteButton)


  //document.getElementById('display').appendChild(StrikeThroughRadio);
  document.getElementById('display').appendChild(node);
  //document.getElementById('display').appendChild(deleteButton);

}

function removeNode(e) {
  e.target.parentElement.remove()
}

function ClearInputOnSubmit() {
  document.getElementById('todo-input').value = '';
}

#header {
  display: flex;
  justify-content: center;
  margin-right: 160px;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.main {
  width: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
}

#display>li {
  display: flex;
  flex-direction: row;
}

.strike-text {
  text-decoration: line-through;
  color: red
}

<h1 id="header">TO DO LIST</h1>
<div class="main">
  <div class="todo-container">
    <ul id="display"></ul>
  </div>
  <div class="container">
    <div>
      <input type="text" id="todo-input" />
      <input type="button" value="Add ToDo" id="todo-button" onclick="addTodo(); ClearInputOnSubmit()" />
    </div>
  </div>
</div>

Trying to make my ToDo list <li> tags display as a column but can't make it work

Guess you like