본문 바로가기

Dev.Project/Todolist_project

[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 태그를 생성하는 코드 밑에 다음과 같은 코드를 삽입한다.
1
var checkBox = document.createElement(‘input’);
cs

그리고 input type을 checkbox로 바꿔준다.
1
checkBox.type = ‘checkbox’;
cs

그리고 이벤트를 추가해준다.
1
checkBox.onclick = updateItemStatus;
cs

updateItemStatus 함수를 만들어주기 전에 한 가지 addNewItem 함수에서 해야할 것이 있다.
추가되는 li 태그마다 번호를 매겨줘야 하는 것이다.
그래야 item 들의 상태를 업데이트 할 때, 
해당 번호에 해당하는 li 태그에 style을 적용해줄 수 있기 때문이다.

우선 변수를 하나 할당하자.
var totalItems = 0;
item 개수를 셀 때 사용할 변수이다.
그리고 addNewItem 함수가 호출될 때 마다 1씩 증가할 수 있도록,
addNewItem 함수 최상단에 totalItems++ 코드를 추가해준다.

그리고 checkbox 마다 id 값을 추가해주자.
1
checkBox.id = ‘cb_’ + totalitems;
cs

그리고 li 태그에 들어갈 Text를 감싸줄 span 태그를 생성해서 span 태그 안에 Text가 생성될 수 있도록 하자.
1
var span = document.createElement(‘span’);
cs

그리고 span 마다 id 값을 추가한다.
1
span.id = ‘span_’ + totalItems;
cs

그리고 span 안에 itemText를 넣어준다.
1
span.innerText = itemText;
cs

최종적으로 listItem 에 append 해준다.
1
2
3
listItem.appendChild(checkBox);
listItem.appendChild(span);
list.appendChild(listItem);
cs


이제 updateItemStatus 함수를 만들자.
checked 된 itemText를 선별해야 한다.
그러기 위해서는 checkBox의 id 값 중 숫자만 가져와서,
span id 값으로 접근하여, style을 적용해줘야 한다.

숫자 값만 추출하기 위해 replace 메소드를 사용한다.
var chId = this.id.replace(‘cb_’,””);
여기서 this 는 무엇을 가리키는가?
this 에 대한 이해가 아직 부족하다면 다음 포스팅을 읽어보면 좋을 것 같다.

this는 자신을 호출한 것을 가리킨다.
이 상황에서는 checkbox 를 가리키게 된다.
코드를 해석해보면, checkbox의 id 값 중에 cb_ 대신에 공백을 추가하겠다,
즉 id 값에서 cb_ 삭제한 값을 chId에 저장한다는 코드이다.
숫자만 추출한 것이다.

이제 span의 id 값을 통해 checked li 태그로 접근하자.
1
var itemText = document.getElementById(‘item_’ + chId);
cs
위 코드의 itemText는 지역변수 itemText이다.
헷갈리면 자바스크립트의 변수 스코프에 대한 학습이 부족한 것이므로
다음 포스팅을 읽어보면 좋을 것 같다.

check를 다시 해제할 수도 있으므로 if 를 통해서 조건적으로 style을 적용하면 될 것 같다.
1
2
if(this.checked) { itemText.className = ‘checked’; }
else { itemText.className = ‘’; }
cs
스타일을 클래스 이름을 통해 적용할 수 있다.
.css 파일이나 html 코드 중 <style></style> 안에
.checked{ }에 해당하는 속성들을 추가하기 바란다.
필자는 다음과 같은 효과를 주었다.
1
2
3
4
5
.checked{
   text-decoration: line-through;
   color: #c00;
   font-weight: bold;
}
cs
참고로 line-through는 가운데 줄을 긋는 것이다.


완성된 코드이다. 
main.js code>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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);
 
}
cs

아직까지는 코드가 짧다.


- Step 4. The end -



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