자바스크립트 할일 목록 (to-do list) for SAPUI5 기초

자바스크립트 입력 양식 제어(이글 참고) 정도의 기능만 적용하여 자바스크립트 할일 목록 (to-do list)을 만들어 봄으로써 기능을 익혀보고자 하였습니다.

복잡한 기능은 생략하고 텍스트 input방식에 입력한 사항을 버튼을 눌러 체크박스-입력한 텍스트-삭제 버튼 그룹을 추가하고, 체크박스 및 삭제 정도의 단순한 기능만을 구현한 to-do list 기초 입니다.

자바스크립트 할일 목록 에 필요한 요소 배치 – 입력 요소 및 추가 버튼

아래와 같이, 텍스트 입력, 버튼 객체, 제목 객체를 생성합니다.

...

<body>
  <H1> 할 일 목록 관리</H1>
  <input type="text" placeholder="할일 목록을 입력하세요.">
  <button>할일 추가</button>
</body>
...

자바스크립트 할일 목록 관리 화면 구성

 

할일 추가 버튼을 눌렀을 때 할일 아이템을 추가하기

[체크박스 – 할일 내역 – 삭제 버튼] 으로 구성됩니다.

우선, 추가 버튼을 클릭했을 때 구성할 태그 집합을 생성합니다.

먼저 div 태그를 생성하고 차례대로 체크박스, span 태그, 삭제 버튼을 만듭니다.

<script>
      const inputText = document.querySelector("#input1");
      const buttonAdd = document.querySelector("#buttonAdd");
 
      buttonAdd.addEventListener( "click", () => {
        const divTag = document.createElement( "div" );
        // div 태그 안으로 체크박스, 텍스트 input,, 삭제 버튼 동적 생성
        const chk1 = document.createElement( "input" );
// 결과를 보여줄 text input 태그
        const spanTag = document.createElement( "span" );
        const btnDelete = document.createElement( "button" );
 
      })
    </script>

그런 다음, body에 appendChild를 통해서 추가 해주는 로직을 작성합니다. div 태그는 body에 appendChild를 통해서 추가를 하고, 그 하위의 버튼 span 태그와 삭제 버픈 등은 div 태그 하위로 appendChild 합니다.

  
<script>
      const inputText = document.querySelector("#input1");
      const buttonAdd = document.querySelector("#buttonAdd");
 
      buttonAdd.addEventListener( "click", () => {
        const divTag = document.createElement( "div" );
        // div 태그 안으로 체크박스, 텍스트 input,, 삭제 버튼 동적 생성
        const chk1 = document.createElement( "input" );
        const spanTag = document.createElement( "span" );
        const btnDelete = document.createElement( "button" );
        
        //div 태그는 body에 appendChild
        document.body.appendChild( divTag );
        //체크박스 및 텍스트 , 삭제 버튼은 div 태그에 위치시킴
 
        divTag.appendChild( chk1 );
        divTag.appendChild( spanTag );
        divTag.appendChild( btnDelete );
      })
    </script>

할일 추가 버튼을 클릭했을 때

입력 텍스트의 값을 span 테그로 복사해주는 내용과, 체크박스를 체크박스 형태로, 그리고 삭제 버튼에 “삭제하기” 텍스트를 추가하였습니다.

<script>
...

spanTag.textContent = inputText.value;
        chk1.type = 'checkbox';
        btnDelete.textContent = "삭제하기";
...

      })
    </script>

실행 후 할일을 입력한 수 할일 추가 버튼을 눌러주면 다음과 같이 결과가 나오게 됩니다.

체크박스 형태 삭제하기 텍스트 추가

이제 큰 틀이 만들어졌으므로 이벤트 처리를 해보도록 하겠습니다.

 

자바스크립트 할일 목록 취소시 span 태그 텍스트에 취소선 효과 주기

체크 박스 객체를 읽어 이벤트가 값이 변경(change = checked ) 시, 경우 span 태그 텍스트에 style을 바꾸어 주면 됩니다.

...

//change이벤트에서 체크박스의 체크 여부 확인
        chk1.addEventListener("change", () => {
          if (chk1.checked === true) {
            // textDecoration 의 속성을 line-through로 변경
            spanTag.style.textDecoration = "line-through";
          } else {
            spanTag.style.textDecoration = "";
          }
        });
...

해당 추가된 리스트에 체크박스를 클릭하면 아래와 같이 span 태그의 글자에 취소선이 표현되며, 다시 한번 눌렀을 때에는 일반 텍스트로 변경됩니다.

체크박스의 상태가 checked인 경우 다음과 같이 textDecoration이 처리됨

 

삭제하기 클릭시 div 태그 및 하위 객체 모두 지우기

삭제하기 버튼을 클릭시에는 div 태그를 포함하여, div 태그 내의 객체를 모두 지워주면 됩니다. 또, 해당 삭제하기 버튼이 속한 div만을 지워야 하므로 div의 부모 객체를 찾아서 removeChild를 통해 div를 지우면 될 것입니다.

...

btnDelete.addEventListener( "click", () => {
          // divTag 상위의 부모를 찾아서 해당 부모의 child인 divTag 삭제
          divTag.parentNode.removeChild( divTag );
} )
...

자바스크립트 할일 목록-첫번째 할일을 입력한 후 삭제하기 버튼을 누르면 삭제가 이루어짐

 

입력사항이 없을 때에는 to-do 추가 하지 않기

할 일이 입력되지 않은 경우에는 아무일도 일어나지 않도록, input text의 값을 읽어 공백인 경우에는 할일 추가 버튼을 눌러도 처리되지 않도록 다음의 로직을 추가할 수 있습니다.

<script>
      const inputText = document.querySelector("#input1");
      const buttonAdd = document.querySelector("#buttonAdd");
 
// 버튼 추가 이벤트에서 입력 여부를 체크하여
      buttonAdd.addEventListener("click", () => {
        //입력된 값이 없으면 함수를 나가기
        if ( inputText.value === "" ){
          return;
        }
...

 

할일이 추가된 이후에는 기존 입력값을 클리어 해주기

할일을 입력한 후 to-do 리스트에 반영이 되었을 때에는 입력값을 초기화해 줍니다. 할일 추가 버튼 이벤트 내에서 내역을 추가한 이후 처리하면 됩니다.

<script>
...

        divTag.appendChild(chk1);
        divTag.appendChild(spanTag);
        divTag.appendChild(btnDelete);
 
        spanTag.textContent = inputText.value;
        chk1.type = "checkbox";
        btnDelete.textContent = "삭제하기";
// 입력이 완료되면 입력했던 값은 지워주기
        inputText.value = "";
...

기본적은 to-do를 작성해 보았고 이후 입력 여부 등의 유효성 체크를 추가하면 될 것으로 보입니다.

모질라 자바스크립트 문서 객체 편을 참고하였습니다.