Skip to content
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

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
30 changes: 30 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// localStorage에서 todo elements 가져오기, 시간을 Date형식으로 변환하기 위해 map 함수를 사용

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

핵심적인 부문에 주석이 적용되어 이해가 편했습니다 ㅎㅎ

const TODOS = JSON.parse(window.localStorage.getItem('todos')).map((todo) => ({
...todo,
date: new Date(todo.date),
}));

for (const todo of TODOS) {
const ul = document.querySelector('.todoList');
const newLi = document.createElement('li');
const contentDiv = document.createElement('div');
const dateDiv = document.createElement('div');
const doneBtn = document.createElement('button');
const deleteBtn = document.createElement('button');

contentDiv.innerHTML = todo.content;
dateDiv.innerHTML = todo.date.toISOString();
doneBtn.innerHTML = 'done';
doneBtn.classList;
deleteBtn.innerHTML = 'delete';

newLi.appendChild(contentDiv);
newLi.appendChild(dateDiv);
newLi.appendChild(doneBtn);
newLi.appendChild(deleteBtn);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 여러 개 노드들 추가할 때 appendChild를 반복해서 썼었는데, 다른 방법이 없을까 하고 찾아보니까 append() 를 사용하면 문자열을 포함해서 여러 개 요소들을 추가할 수 있는 것 같아서 참고하시면 좋을 것 같습니다 😀
https://choijying21.tistory.com/132

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 새롭게 알게되었네요~~ 다음에 element 추가할 때에는 append를 사용해보겠습니다~~


if (todo.priority === 3) newLi.classList.add = 'high';
else if (todo.priority === 2) newLi.classList.add = 'mid';
else newLi.classList.add = 'low';
ul.appendChild(newLi);
}