🙂To Do List

✏️기능개발

01. HTML 작성하기

<header class="head">
  <p class="title en">To Do List</p>
  <button class="clear en" onclick="clearDiv()">Clear</button>
</header>
<div class="inner">
  <div class="todo-wrap">
    
    <input type="text" id="todo" class="ipBox en" placeholder="New Memo" 
           onfocus="this.placeholder=''" onblur="this.placeholder='New Memo'">
    
    <button id="summit" class="ipBox en" onclick="addTodo()">Enter</button>
  </div>
  <ul id="list-box"></ul>
</div>

• placeholder="" : input에 예시 텍스트 보여줄 수 있다.
• onfocus="this.placeholder=''" : input에 포커스 됬을때 this.placeholder='' 즉 빈 칸으로 만들어 주는것이다.
• onblur="this.placeholder='New Memo'" : input에 포커스가 아웃됬을때 보여주는 텍스트를 설정할 수 있다.

02-1 js작성하기

먼저 button을 클릭했을때 input에 입력된값을 ul안에 html요소로 받아와 삽입해주는 코드를 작성한다.

// button onclick 이벤트 발생시 
function addTodo(){
      const todo = document.getElementById('todo');
      const listBox = document.getElementById('list-box');
  
      // input이 공백일때 경고창 띄우기
      if(todo.value == ''){ 
        alert('할 일을 등록해주세요.');
      }
      // 공백란이 아닐때 아래의 html 요소를 listBox 뒤로 삽입
      else{ 
        let list = `<div id="appendDiv" class="div">
                    <div class="inputCover">
                    <input type="checkbox" id="checkBox" class="checked">
                    <p class="text">${todo.value}</p>
                    </div>
                    <button class="delete en">Delete</button>
                    </div>`;

        // list 추가
        listBox.insertAdjacentHTML('beforeend', list);
      }
};

02-2 js작성하기

ul안에 삽입된 html요소에는 checkbox 와 delete버튼이 있기때문에 그 기능을 만들어준다.
여기서 주의 할 것은 생성되는 html요소 == list 가 한개가 아니기 때문에 for 반복문을 통해서
생성된 list의 길이만큼 이벤트 리스너를 부착시켜줘야 기능이 정상적으로 작동한다.

// 체크박스
let checked = document.querySelectorAll('.checked');

for(let i = 0; i < checked.length; i++){
  checked[i].addEventListener('change', (event) =>{

    let text = document.querySelectorAll('.text')[i];

    if(event.currentTarget.checked){
      text.style.textDecoration = 'line-through';
      text.style.color = '#7c7c7c';
    }
    else{
      text.style.textDecoration = 'none';
      text.style.color = '#000'
    }
  });
};

// 삭제기능
let del = document.querySelectorAll('.delete');
for(let i = 0; i<del.length; i++){
  del[i].addEventListener('click', listDel);
}
todo.value = null; //input내용 리셋하기
};

// 삭제버튼 기능
function listDel(e){
      //클릭한 요소의 부모요소를 찾아 삭제
      let target = e.target.parentNode; 
      target.remove();
};

02-3 js작성하기

초기화 버튼을 기능하게 하기 위한 코드도 작성해준다. ul

// clear 버튼 기능
function clearDiv(){
    let a = document.getElementById('list-box');
    if(a !== null){
      a.innerHTML = '';
    }
};