Todo리스트_JavaScript/HTML/CSSProject2023. 8. 31. 10:15
목차
📂파일구조
├─📂assets - 사용할 이미지들 │ └─📂icons │ └─🖼️images(svg) │ ├─📂styles - 적용한 스타일 │ └─🖌️main.css │ └─🖌️general.css │ └─🖌️header.css │ └─🗒️index.html └─🚀app.js |
기대 결과
최종 결과
주요 기능
editTodo(할 일 수정) 함수
function editTodo(index) {
const $todoText = $todoList.children[index].querySelector('.todo');
const $paragraph = $todoText.querySelector('p');
const $input = document.createElement('input');
$input.type = 'text';
$input.className = 'todo-input';
$input.value = $paragraph.textContent;
$todoText.removeChild($paragraph);
$todoText.appendChild($input);
$input.focus();
$input.addEventListener('blur', () => {
todoList[index].content = $input.value;
saveTodoList();
renderTodoList();
console.log("[update] " + index + " element edited to " + $input.value);
});
}
- $paragraph.textContent값을 input.value로 넘기고, $paragraph 삭제 후 바로 input 태그 추가, input에 focus를 잡아줌
- blur 시 입력을 마친 것으로 판단하고 input.value를 해당 content에 저장
- 텍스트를 입력 칸으로 바꾸고 다시 텍스트로 바꾸는 과정 구현
checkbox 체크표시가 새로고침 시 유지되지 않는 이슈 해결
function renderTodoList() {
$todoList.innerHTML = '';
todoList.forEach((todo, index) => {
const $newTodo = createTodoItem(todo.content, index);
$todoList.appendChild($newTodo);
const $checkbox = document.getElementById('checkbox-' + index);
$checkbox.checked = todoList[index].completed;
});
console.log("[system] todolist rendered");
}
...
function toggleComplete(index) {
if (index >= 0 && index < todoList.length) {
todoList[index].completed = !todoList[index].completed;
saveTodoList();
const $checkbox = document.getElementById('checkbox-' + index);
$checkbox.checked = todoList[index].completed;
}
console.log("[update] " + index + " element completed toggle changed");
}
- 렌더될 때 저장되어 있는 체크박스 값을 한 번 검사해서 그 값으로 체크박스 활성화
Github
728x90
반응형
LIST
'Project' 카테고리의 다른 글
넷플릭스 화면 디자인_HTML/CSS (0) | 2023.08.30 |
---|---|
혼밥러 탈출을 위한 매칭 & 키오스크 서비스 (0) | 2023.08.22 |
Java swing kiosk project (4) | 2022.01.09 |
[Bricks Run] 벽돌 피하기_C언어 게임 (0) | 2021.08.22 |
@kdj :: Childev'note
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!