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>
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>