JavaScript 체크리스트

이번 수업에서는 체크리스트를 구현해 보겠습니다. 체크리스트는 예정된 일들의 목록을 만들고, 일을 완료함에 따라 그 일들을 완료된 것으로 표시할 수 있는 프로그램을 말합니다.

할 일을 추가, 삭제, 편집하고 완료된 것으로 표시할 수 있도록 만들어 보겠습니다.

다음은 우리가 만들어야 할 결과물의 예입니다 (새 할 일을 입력하려면 입력창에 텍스트를 입력하고 Enter를 누르세요, 텍스트 편집은 할 일 텍스트를 더블클릭하세요):

시작하기

자, 이제 설명된 작업을 구현해 봅시다.

먼저 우리 체크리스트의 HTML 코드를 작성해 봅시다. 새 작업은 입력창을 사용해 입력되고 ul 목록에 추가되도록 합시다:

<input id="input">
<ul id="list"></ul>

체크리스트에 약간의 아름다움을 더하는 CSS 코드를 바로 추가해 봅시다:

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

늘 그렇듯이, 복잡한 작업을 간단한 단계로 나누어 보겠습니다.

첫 번째 단계로, 입력창에 텍스트를 입력하고, Enter를 누르면 ul의 끝에 입력된 텍스트가 담긴 li가 추가되도록 만들어 보겠습니다.

다음은 설명된 내용을 구현하는 코드의 틀입니다:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// 여기에 목록에 새로운 li를 추가하는 코드가 들어갈 것입니다
	}
});

설명된 작업을 해결하기 위해 부족한 부분의 코드를 작성해 보세요.

이전 작업을 수정하여 Enter 키를 누른 후 입력창의 텍스트가 지워지도록 하세요.