index.js
addEvent() {
this.addBtnEl.addEventListener('click', this.onClickAddBtn.bind(this));
this.todoListEl.addEventListener('click', this.onClickTodoList.bind(this));
}
onClickTodoList(event) {
const { target } = event;
const btn = target.closest('button');
if (btn.matches('#delete-btn')) {
this.deleteTodo(target);
}
}
deleteTodo(target) {
const todoDiv = target.closest('.todo');
if (window.confirm('정말 삭제하시겠습니까?')) {
todoDiv.addEventListener('transitionend', () => {
todoDiv.remove();
});
}
todoDiv.classList.add('delete');
}
style.scss
.todo {
transition: 1s ease;
}
참고
index.js
onClickTodoList(event) {
const { target } = event;
const btn = target.closest('button');
// btn이 null일 때의 조건 추가
// console.log(btn);
if (!btn) return; // = false
...
}
index.js
onClickTodoList(event) {
const { target } = event;
const btn = target.closest('button');
if (!btn) return;
if (btn.matches('#delete-btn')) {
this.deleteTodo(target);
} else if (btn.matches('#edit-btn')) {
this.editTodo(target);
}
}
editTodo(target) {
const todoDiv = target.closest('.todo');
const todoInputEl = todoDiv.querySelector('input');
todoInputEl.readOnly = false;
todoInputEl.focus();
todoDiv.classList.add('edit');
}
index.js
onClickTodoList(event) {
const { target } = event;
const btn = target.closest('button');
if (!btn) return;
if (btn.matches('#delete-btn')) {
this.deleteTodo(target);
} else if (btn.matches('#edit-btn')) {
this.editTodo(target);
} else if (btn.matches('#save-btn')) {
this.saveTodo(target);
}
}
saveTodo(target) {
const todoDiv = target.closest('.todo');
todoDiv.classList.remove('edit');
const todoInputEl = todoDiv.querySelector('input');
todoInputEl.readOnly = true;
}
index.js
onClickTodoList(event) {
const { target } = event;
const btn = target.closest('button');
if (!btn) return;
if (btn.matches('#delete-btn')) {
this.deleteTodo(target);
} else if (btn.matches('#edit-btn')) {
this.editTodo(target);
} else if (btn.matches('#save-btn')) {
this.saveTodo(target);
} else if (btn.matches('#complete-btn')) {
this.completeTodo(target);
}
}
completeTodo(target) {
const todoDiv = target.closest('.todo');
todoDiv.classList.toggle('done');
}
index.html
<div class="radio-area" id="radio-area">
<input type="radio" id="filter1" name="filter" value="ALL" />
<label for="filter1">All</label>
<input type="radio" id="filter2" name="filter" value="TODO" />
<label for="filter2">Todo</label>
<input type="radio" id="filter3" name="filter" value="DONE" />
<label for="filter3">Done</label>
</div>
index.js
addEvent() {
this.addBtnEl.addEventListener('click', this.onClickAddBtn.bind(this));
this.todoListEl.addEventListener('click', this.onClickTodoList.bind(this));
this.addRadioBtnEvent();
}
// 할일 상태별 필터링 이벤트
addRadioBtnEvent() {
for (const filterRadioBtnEl of this.filterRadioBtnEls) {
filterRadioBtnEl.addEventListener(
'click',
this.onClickRadioBtn.bind(this),
);
}
}
// radio btn 이벤트
onClickRadioBtn(event) {
const { value } = event.target;
console.log(value);
this.filterTodo(value);
}
// filtering
filterTodo(status) {
const todoDivEls = this.todoListEl.querySelectorAll('div.todo');
for (const todoDivEl of todoDivEls) {
switch (status) {
case 'ALL':
todoDivEl.style.display = 'flex';
break;
case 'DONE':
todoDivEl.style.display = todoDivEl.classList.contains('done')
? 'flex'
: 'none';
break;
case 'TODO':
todoDivEl.style.display = todoDivEl.classList.contains('done')
? 'none'
: 'flex';
break;
}
}
참고자료
Jira같네..?!