todo 만들기

 

 

 

0. 클릭이벤트 만들기

1. 요소를 변수에 할당하기

// 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다.
document.getElementById('add-btn').addEventListener('click', function () {
  // 1. index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다.
  let todo_input = document.getElementById('todo-input');
  let add_btn = document.getElementById('add-btn');
  }
});

 

// 1) 
addEventListener(type, listener) // 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.

// 2) 
getElementById(id) // 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 요소 객체를 반환한다.

 

 

 

2. 새로운 요소 생성/텍스트 추가

// 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다.
document.getElementById('add-btn').addEventListener('click', function () {
  // 2. 새로운 li요소를 만들고 input 요소에 입력된 값을 textContent로 갖도록 합니다.
  let li = document.createElement('li');
  let todo_list = document.getElementById('todo-list');
  li.textContent = `${todo_input.value}`;
});

 

// 1)
createElement(tagName) // 지정한 tagName의 HTML 요소를 만들어 반환합니다.

// 2)
textContent // 노드와 그 자손의 텍스트 콘텐츠를 표현한다. (함수가 아니기 때문에 textContent = ''; 형식으로 작성한다.)
<div id="divA">This is <span>some</span> text!</div>

let text = document.getElementById("divA").textContent; //'This is some text!'
document.getElementById("divA").textContent = "This text is different!"; // <div id="divA">This text is different!</div>

 

 

3. 삭제 버튼 생성

// 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다.
document.getElementById('add-btn').addEventListener('click', function () {
  // 3. li 요소는 클릭하면 해당 li 요소가 지워지는 delete 버튼을 가지고 있어야 합니다.
  let delete_btn = document.createElement('span');
  let text = document.createTextNode('삭제');
  li.appendChild(delete_btn);
  delete_btn.appendChild(text);
});

// 1)
createTextNode(data) // 텍스트 노드를 생성합니다.

// 2)
appendChild(aChild) // 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.

 

 

4. 입력창 초기화/미입력 처리

// 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다.
document.getElementById('add-btn').addEventListener('click', function () {
  // 4. 입력창은 초기화되어야 합니다.
  // 5. 만약 입력창에 아무것도 입력하지 않은 경우 alert로 유저에게 입력을 요청해야 합니다.
  if (todo_input.value === '') {
    alert('할일을 입력해주세요.');
  } else {
    todo_list.appendChild(li);
    todo_input.value = ''; // 입력창 초기화. 실행 컨텍스트에 의해 가장 마지막에 위치
  }
});

 

 

완성된 코드!

기능은 거의 없지만 기초 테스트인 것 같다

헷갈렸던 부분은 input의 value를 가져와야하는지, text를 가져와야하는지 와 마지막 줄의 입력창 초기화 태그의 위치가 어려웠다...

 

// 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다.
document.getElementById('add-btn').addEventListener('click', function () {
  // 1. index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다.
  let todo_input = document.getElementById('todo-input');
  let add_btn = document.getElementById('add-btn');
  // 2. 새로운 li요소를 만들고 input 요소에 입력된 값을 textContent로 갖도록 합니다.
  let li = document.createElement('li');
  let todo_list = document.getElementById('todo-list');
  li.textContent = `${todo_input.value}`;
  // 3. li 요소는 클릭하면 해당 li 요소가 지워지는 delete 버튼을 가지고 있어야 합니다.
  let delete_btn = document.createElement('span');
  let text = document.createTextNode('삭제');
  li.appendChild(delete_btn);
  delete_btn.appendChild(text);
  // 4. 입력창은 초기화되어야 합니다.
  // 5. 만약 입력창에 아무것도 입력하지 않은 경우 alert로 유저에게 입력을 요청해야 합니다.
  if (todo_input.value === '') {
    alert('할일을 입력해주세요.');
  } else {
    todo_list.appendChild(li);
    todo_input.value = '';
  }
});