level1 - 1일차

🎯 요구사항

todo list에 todoItem을 키보드로 입력하여 추가하기

todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가, input 태그에 checked 속성 추가)

todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제

todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀

todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

기본코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>이벤트 - TODOS</title>
    <link rel="stylesheet" href="css/style.css" />

  </head>
  <body>
    <div class="todoapp">
      <h1>TODOS</h1>
      <input
        id="new-todo-title"
        class="new-todo"
        placeholder="할일을 추가해주세요"
        autofocus
      />
      <main>
        <input class="toggle-all" type="checkbox" />
        <ul id="todo-list" class="todo-list"></ul>
        <div class="count-container">
          <span class="todo-count">총 <strong>0</strong> 개</span>
          <ul class="filters">
            <li>
              <a class="all selected" href="src/all_see.html">전체보기</a>
            </li>
            <li>
              <a class="active" href="src/need_To_Do.html">해야할 일</a>
            </li>
            <li>
              <a class="completed" href="src/complete_To_Do.html">완료한 일</a>
            </li>
          </ul>
        </div>
      </main>
    </div>
  </body>
</html>

구현하기

todo list에 todoItem을 키보드로 입력하여 추가하기

let new_todo = document.getElementById('new-todo-title');
new_todo.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
       confirm('등록 하시겠습니까?') == true ? admin(new_todo.value) : false;
    }
});         // 내용을 입력하고 'Enter'를 누르면 comfirm이 나오고 맞다면 admin함수 실행

todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가, input 태그에 checked 속성 추가)

// 체크박스 클릭시 li태그에 class속성 추가 및 text에 중간작대기 생성 (클릭 취소하면 class속성 completed 추가 및 text원래대로)
    input.addEventListener('click',function(event){
        if(input.checked == true) {
            event.target.closest('li').classList.add('completed');
           event.target.parentNode.childNodes[1].style.textDecoration = 'line-through';
        }
        else {
            event.target.closest('li').classList.remove('completed');
            event.target.parentNode.childNodes[1].style.textDecoration = 'none';
        }
    })

todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제

//버튼 클릭시 가장가까운 li태그 삭제 및, 해야할 count 값 줄이기
    button.addEventListener('click',function(event){
        event.target.closest('li').remove();
        todo_count.childNodes[1].innerHTML = --count;
    })

아직

todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

    //strong태그 안에 있는 count 값 적용시키기
    todo_count.childNodes[1].innerHTML = count;

위 내용과 포함하여 버튼 클릭시 삭제에도 count가 연관되어있음

아직

전체코드

<ul id="todo" class="todo">
</ul>

기본코드에서 이 내용 추가

index.js

let new_todo = document.getElementById('new-todo-title');
new_todo.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
       confirm('등록 하시겠습니까?') == true ? admin(new_todo.value) : false;
    }
});         // 내용을 입력하고 'Enter'를 누르면 comfirm이 나오고 맞다면 admin함수 실행

let count = 0 ;     //할 일 갯수 세는 용
let todo_count = document.querySelector('.todo-count');

function admin(value){
    //태그들과 class 속성 부여 후 연결
    let ul = document.getElementById('todo');
    let li = document.createElement('li');
    let div = document.createElement('div');
    let input = document.createElement('input');
    let button = document.createElement('button');
    let label= document.createElement('label');

    div.classList.add('view');
    input.classList.add('toggle');
    input.setAttribute('type','checkbox');
    label.classList.add(`label`);
    button.classList.add(`destroy${count++}`);

    ul.append(li);
    li.append(div);
    div.append(input);
    div.append(label);
    div.append(button);

    //li앞에 문자 생략
    li.style.listStyleType = "None";
    //입력 값을 label에 추가 및 버튼에 X 추가
    label.innerHTML = value;
    button.innerHTML = 'X';

    //버튼 클릭시 가장가까운 li태그 삭제 및, 해야할 count 값 줄이기
    button.addEventListener('click',function(event){
        event.target.closest('li').remove();
        todo_count.childNodes[1].innerHTML = --count;
    })

    // 체크박스 클릭시 li태그에 class속성 추가 및 text에 중간작대기 생성 (클릭 취소하면 class속성 completed 추가 및 text원래대로)
    input.addEventListener('click',function(event){
        if(input.checked == true) {
            event.target.closest('li').classList.add('completed');
           event.target.parentNode.childNodes[1].style.textDecoration = 'line-through';
        }
        else {
            event.target.closest('li').classList.remove('completed');
            event.target.parentNode.childNodes[1].style.textDecoration = 'none';
        }
    })

    //strong태그 안에 있는 count 값 적용시키기
    todo_count.childNodes[1].innerHTML = count;
}

현재결과

등록시 confirm

추가결과

체크박스 클릭

추가

삭제

Author And Source

이 문제에 관하여(level1 - 1일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/블랙커피스터디-1일차

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)