.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 30%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: white;
color: black;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li {
flex: 1;
}
.trash-btn,
.complete-btn {
background: #182491;
color: white;
border: none;
padding: 1rem;
cursor: pointer;
font-size: 1rem;
}
.complete-btn {
background: rebeccapurple;
}
위와 같이 스타일링을 하게 되면 아래와 같이 렌더링된다.
그러면 임시로 적어놓은 hey를 지우고 실제 입력한대로 나타나게 해보자.
간단하다. newTodo.innerText = todoInput.value;로 수정해주면 된다.
newTodo.innerText = todoInput.value;
그런데 Todo List를 입력하고 나서 입력창에 적은 내용이 그대로 남아있다.
이를 없애려면 어떻게 해야할까?
function에 todoInput.value = ''; 를 추가하면 된다.
.todo-item {
padding: 0rem 0.5rem;
}
작성하고 보니 padding이 필요할 것 같아 todo-item 즉 li 태그에 위 아래로 패딩을 주었다.