[Todolist_Basic] Step 4. 완료된 항목을 표시하기

Step 4. 완료된 항목을 표시하기

Step 들어가기전에,,

자바스크립트에서 CSS 속성을 제어하는 방법은 .style 메소드와 함께,

CSS에서 text-decoration 이라고 되어있는 속성은,

textDecoration 으로 - 뒤에 있는 알파벳을 대문자로 바꿔줘서 제어한다.

itemText.style.textDecoration = ‘ ‘;

이런 방식으로 말이다.

이것을 응용해보면 input 태그의 type 속성도 제어할 수 있다.

input 태그를 잡아서 var에 저장한 다음에,

.type = “”을 통해서 설정할 수 있는 것이다.

우리는 check box를 통해서 완료된 항목을 표시할 것이다.

그런 다음 checked된 item들에 대해서 decoration을 줘서 좀 더 보기 쉽게 할 것이다.

html 코드는 변경할 필요 없다.

이벤트 코드도 변경할 필요 없다.

addNewItem 함수에서 밑에 Item 을 추가하는 과정에서,

checkbox 를 포함해서 Item 을 추가해야 한다.

li 태그를 삽입할 때를 떠올려보자.

그대로 li 대신 input 태그를 추가해주면 된다.

li 태그를 생성하는 코드 밑에 다음과 같은 코드를 삽입한다.

var checkBox = document.createElement(‘input’);

그리고 input type을 checkbox로 바꿔준다.

checkBox.type = ‘checkbox’;

그리고 이벤트를 추가해준다.

checkBox.onclick = updateItemStatus;

updateItemStatus 함수를 만들어주기 전에 한 가지 addNewItem 함수에서 해야할 것이 있다.

추가되는 li 태그마다 번호를 매겨줘야 하는 것이다.

그래야 item 들의 상태를 업데이트 할 때, 

해당 번호에 해당하는 li 태그에 style을 적용해줄 수 있기 때문이다.

우선 변수를 하나 할당하자.

var totalItems = 0;

item 개수를 셀 때 사용할 변수이다.

그리고 addNewItem 함수가 호출될 때 마다 1씩 증가할 수 있도록,

addNewItem 함수 최상단에 totalItems++ 코드를 추가해준다.

그리고 checkbox 마다 id 값을 추가해주자.

checkBox.id = ‘cb_’ + totalitems;

그리고 li 태그에 들어갈 Text를 감싸줄 span 태그를 생성해서 span 태그 안에 Text가 생성될 수 있도록 하자.

var span = document.createElement(‘span’);

그리고 span 마다 id 값을 추가한다.

span.id = ‘span_’ + totalItems;

그리고 span 안에 itemText를 넣어준다.

span.innerText = itemText;

최종적으로 listItem 에 append 해준다.

listItem.appendChild(checkBox);
listItem.appendChild(span);
list.appendChild(listItem);

이제 updateItemStatus 함수를 만들자.

checked 된 itemText를 선별해야 한다.

그러기 위해서는 checkBox의 id 값 중 숫자만 가져와서,

span id 값으로 접근하여, style을 적용해줘야 한다.

숫자 값만 추출하기 위해 replace 메소드를 사용한다.

var chId = this.id.replace(‘cb_’,””);

여기서 this 는 무엇을 가리키는가?

this 에 대한 이해가 아직 부족하다면 다음 포스팅을 읽어보면 좋을 것 같다.

>>자바스크립트의 this>>

this는 자신을 호출한 것을 가리킨다.

이 상황에서는 checkbox 를 가리키게 된다.

코드를 해석해보면, checkbox의 id 값 중에 cb_ 대신에 공백을 추가하겠다,

즉 id 값에서 cb_ 삭제한 값을 chId에 저장한다는 코드이다.

숫자만 추출한 것이다.

이제 span의 id 값을 통해 checked li 태그로 접근하자.

var itemText = document.getElementById(‘item_’ + chId);

위 코드의 itemText는 지역변수 itemText이다.

헷갈리면 자바스크립트의 변수 스코프에 대한 학습이 부족한 것이므로

다음 포스팅을 읽어보면 좋을 것 같다.

>>자바스크립트의 변수 스코프>>

check를 다시 해제할 수도 있으므로 if 를 통해서 조건적으로 style을 적용하면 될 것 같다.

if(this.checked) { itemText.className = ‘checked’; }
else { itemText.className = ‘’; }

스타일을 클래스 이름을 통해 적용할 수 있다.

.css 파일이나 html 코드 중 <style></style> 안에

.checked{ }에 해당하는 속성들을 추가하기 바란다.

필자는 다음과 같은 효과를 주었다.

.checked{
   text-decoration: line-through;
   color: #c00;
   font-weight: bold;
}

참고로 line-through는 가운데 줄을 긋는 것이다.

완성된 코드이다. 

main.js code>

var totalItems = 0;
 
function updateItemStatus(){
  var chId = this.id.replace('cb_', '');
  var itemText = document.getElementById('item_' + chId);
 
  if(this.checked){
    itemText.className = 'checked';
  } else {
    itemText.className = '';
  }
}
 
function addNewItem(list, itemText){
  totalItems++;
 
  var listItem = document.createElement('li');
  var checkBox = document.createElement('input');
  checkBox.type = 'checkBox';
  checkBox.id = 'cb_' + totalItems;
  checkBox.onclick = updateItemStatus;
 
  var span = document.createElement('span');
  span.id = 'item_' + totalItems;
  span.innerText = itemText;
 
  listItem.appendChild(checkBox);
  listItem.appendChild(span);
  list.appendChild(listItem);
 
}

아직까지는 코드가 짧다.

- Step 4. The end -

 Step 5. 수정하고 삭제하기. [이동]