-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[1주차] 오대균 미션 제출합니다. #1
base: master
Are you sure you want to change the base?
Changes from 1 commit
973977e
1d64edf
dd15cd2
8af7471
b292514
3661d25
a41189c
7f149f5
04c806f
be1b69b
ff43d6e
d0b7045
76e5d66
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
// ############################## init ############################## | ||
// localStorage에서 todo elements 가져오기 | ||
const unparsedTODOS = localStorage.getItem('todos'); | ||
const TODOS = unparsedTODOS | ||
|
@@ -12,17 +13,27 @@ const TODOS = unparsedTODOS | |
let nextIdx = TODOS.length; // idx값을 중복되지 않게 설정하도록 초기값 지정 | ||
const ul = document.querySelector('.todoList'); // child node를 추가/제거 하기 위해 변수에 저장 | ||
|
||
// in memory에 저장된 todo list를 view에 display | ||
for (const todo of TODOS) { | ||
addNewTodoLi(todo); | ||
} | ||
|
||
const addBtn = document.querySelector('.addBtn'); | ||
addBtn.addEventListener('click', handleClickAddBtn); | ||
|
||
// ############################## core functions ############################## | ||
// view update | ||
const updateView = () => { | ||
function updateView() { | ||
while (ul.hasChildNodes()) { | ||
ul.removeChild(ul.firstChild); | ||
} | ||
for (const todo of TODOS) { | ||
addNewTodoLi(todo); | ||
} | ||
}; | ||
} | ||
|
||
const addNewTodoLi = (todo) => { | ||
// ul에 list들을 삽입 | ||
function addNewTodoLi(todo) { | ||
const newLi = document.createElement('li'); | ||
const contentDiv = document.createElement('div'); | ||
const fromDateDiv = document.createElement('div'); | ||
|
@@ -41,63 +52,81 @@ const addNewTodoLi = (todo) => { | |
deleteBtn.innerHTML = 'delete'; | ||
deleteBtn.className = 'deleteBtn'; | ||
|
||
doneBtn.addEventListener('click', handleClickDoneBtn); | ||
deleteBtn.addEventListener('click', handleClickDeleteBtn); | ||
|
||
newLi.appendChild(contentDiv); | ||
newLi.appendChild(fromDateDiv); | ||
newLi.appendChild(toDateDiv); | ||
newLi.appendChild(doneBtn); | ||
newLi.appendChild(deleteBtn); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 저도 여러 개 노드들 추가할 때 appendChild를 반복해서 썼었는데, 다른 방법이 없을까 하고 찾아보니까 append() 를 사용하면 문자열을 포함해서 여러 개 요소들을 추가할 수 있는 것 같아서 참고하시면 좋을 것 같습니다 😀 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 오 새롭게 알게되었네요~~ 다음에 element 추가할 때에는 append를 사용해보겠습니다~~ |
||
|
||
doneBtn.addEventListener('click', (e) => { | ||
const idx = e.currentTarget.parentNode.id; | ||
const clickedLi = document.getElementById(idx); | ||
if (clickedLi.classList.contains('done')) | ||
clickedLi.classList.remove('done'); | ||
else clickedLi.classList.add('done'); | ||
|
||
let i; | ||
for (i = 0; i < TODOS.length; i++) { | ||
if (TODOS[i].idx == idx) { | ||
TODOS[i].isDone = !TODOS[i].isDone; | ||
break; | ||
} | ||
} | ||
const todo = TODOS[i]; | ||
TODOS.splice(i, 1); | ||
|
||
pushTodo(todo); | ||
updateView(); | ||
localStorage.setItem('todos', JSON.stringify(TODOS)); | ||
}); | ||
|
||
deleteBtn.addEventListener('click', (e) => { | ||
const idx = e.currentTarget.parentNode.id; | ||
const clickedLi = document.getElementById(idx); | ||
ul.removeChild(clickedLi); | ||
|
||
let i; | ||
for (i = 0; i < TODOS.length; i++) { | ||
if (TODOS[i].idx == idx) break; | ||
} | ||
TODOS.splice(i, 1); | ||
|
||
localStorage.setItem('todos', JSON.stringify(TODOS)); | ||
}); | ||
|
||
newLi.id = todo.idx; | ||
if (todo.priority === 3) newLi.classList.add('high'); | ||
else if (todo.priority === 2) newLi.classList.add('mid'); | ||
else newLi.classList.add('low'); | ||
|
||
if (todo.isDone) newLi.classList.add('done'); | ||
ul.appendChild(newLi); | ||
}; | ||
} | ||
|
||
for (const todo of TODOS) { | ||
addNewTodoLi(todo); | ||
// 기준에 따라 정렬되어 memory에 저장되도록 push | ||
function pushTodo(todo) { | ||
if (todo.isDone) { | ||
TODOS.splice(TODOS.length, 0, todo); | ||
return; | ||
} | ||
let i = 0; | ||
for (; i < TODOS.length; i++) { | ||
if (TODOS[i].isDone) break; | ||
if (TODOS[i].priority < todo.priority) break; | ||
else if (TODOS[i].priority === todo.priority) { | ||
if (TODOS[i].fromDate >= todo.fromDate) break; | ||
} | ||
} | ||
TODOS.splice(i, 0, todo); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 우선순위랑, 시작일에 따라 배치해서 보여주는 거 아이디어 좋은것 같아요!👏 그리고 따로 정렬조건 거치지 않게 push 할때 조건을 주니까 코드가 훨씬 효율적이네요!! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 그러니까요!!! 이런 추가적인 기능까지 짱이네요~!!👍 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. splice 메서드의 두번째 매개변수를 0으로 지정해서 todo 값을 추가한 거 좋은 것 같습니다 ㅎㅎ 기존 배열에서 내가 원하는 값을 특정위치에 삽입할 때 유용하게 쓸 수 있을 것 같아요! |
||
} | ||
|
||
const addBtn = document.querySelector('.addBtn'); | ||
addBtn.addEventListener('click', () => { | ||
// ############################## click handlers ############################## | ||
// done button click event handler | ||
function handleClickDoneBtn(e) { | ||
const idx = e.currentTarget.parentNode.id; | ||
const clickedLi = document.getElementById(idx); | ||
if (clickedLi.classList.contains('done')) clickedLi.classList.remove('done'); | ||
else clickedLi.classList.add('done'); | ||
|
||
let i; | ||
for (i = 0; i < TODOS.length; i++) { | ||
if (TODOS[i].idx == idx) { | ||
TODOS[i].isDone = !TODOS[i].isDone; | ||
break; | ||
} | ||
} | ||
const todo = TODOS[i]; | ||
TODOS.splice(i, 1); | ||
|
||
pushTodo(todo); | ||
updateView(); | ||
localStorage.setItem('todos', JSON.stringify(TODOS)); | ||
} | ||
|
||
// delete button click event handler | ||
function handleClickDeleteBtn(e) { | ||
const idx = e.currentTarget.parentNode.id; | ||
const clickedLi = document.getElementById(idx); | ||
ul.removeChild(clickedLi); | ||
|
||
let i; | ||
for (i = 0; i < TODOS.length; i++) { | ||
if (TODOS[i].idx == idx) break; | ||
} | ||
TODOS.splice(i, 1); | ||
|
||
localStorage.setItem('todos', JSON.stringify(TODOS)); | ||
} | ||
|
||
// add button click event handler | ||
function handleClickAddBtn() { | ||
const newTodo = {}; | ||
const content = document.querySelector('.content'); | ||
const priorities = document.querySelectorAll("input[name='priority']"); | ||
|
@@ -117,27 +146,11 @@ addBtn.addEventListener('click', () => { | |
newTodo.isDone = false; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. isDone으로 todo랑 done 구분하는 방법도 직관적이고 좋은 것 같네요~! |
||
|
||
pushTodo(newTodo); | ||
localStorage.setItem('todos', JSON.stringify(TODOS)); | ||
updateView(); | ||
localStorage.setItem('todos', JSON.stringify(TODOS)); | ||
|
||
content.value = null; | ||
priorities[0].checked = true; | ||
fromDate.value = null; | ||
toDate.value = null; | ||
}); | ||
|
||
const pushTodo = (todo) => { | ||
if (todo.isDone) { | ||
TODOS.splice(TODOS.length, 0, todo); | ||
return; | ||
} | ||
let i = 0; | ||
for (; i < TODOS.length; i++) { | ||
if (TODOS[i].isDone) break; | ||
if (TODOS[i].priority < todo.priority) break; | ||
else if (TODOS[i].priority === todo.priority) { | ||
if (TODOS[i].fromDate >= todo.fromDate) break; | ||
} | ||
} | ||
TODOS.splice(i, 0, todo); | ||
}; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이미 알고 계시겠지만 이부분에 고차함수를 써보는 것도 괜찮을 것 같아요!