Todo list 만들기

DOM을 배우고 투두리스트를 만드는 시간이 있었는데
난 엄청 어려워서 만들지도 못했다 ..하하하하
그래도 연습으로 한번 만들어보려했는데
역시나 혼자 만들지 못했다.

그래도 다시 만들어보겠다.
html과 css는 이런 구조로 작업해두고 js만 컨트롤하는 연습을 해보겠다.

완성 이미지 부터 확인해보자

1.To Do List 완성 이미지

만들어야하는 기능은
1. input창에 입력없이 추가 버튼을 누르면 "내용을 추가하라는" 문구 넣기
2. input창에 내용을 작성하고 추가 버튼을 누르면 밑에 리스트들 추가하게 하기
3. 체크박스를 체크하면 리스트를 작업했다는 줄긋게하기
4. 리스트 삭제버튼을 누르면 해당 리스트 삭제하도록 하기

이렇게 필요하다...많다...그래도...똑같이 따라하기라도 해보겠다..

2. Html, css

/* html */
<section>
    <div class="inner">
      <div class="todo-list">
        <h1>To Do List</h1>
        <div class="todo-input">
          <input type="text"/>
          <button class="btn btn--send">추가</button>
        </div>
        <ul class="todo-contents">
        </ul>
      </div>
    </div>
  </section>

/* css */
  <style>
    section{
      margin: 0 auto;
      display: block;
      width: 400px;
      margin-top: 250px;
      background-color: #f7f7f7;
      border-radius: 25px;
      padding: 50px 50px 40px 50px;
    }
    li{
      position: relative;
    }
    h1{
      font-weight: 800;
      margin-bottom:20px;
    }
    .todo-input > input{
      width: 290px;
      padding: 12px 10px;
      margin-right: 5px;
      border: 1px solid #e1e1e1;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    li > input {
      margin-right: 10px;
      border-color: #e1e1e1;
    }
    li > button{
      position: absolute;
      top: 19%;
      right: 18px;
      border-radius: 6px;
      border: 1px solid red;
      background: #fff;
      color: red;
      padding: 4px 10px;
    }
    .btn--send{
      width: 78px;
      padding: 10px 8px;
      border-radius: 8px;
      border-color: transparent;
      background-color: black;
      color: #fff;
    }
    .todo-contents li{
      padding: 12px 10px;
      background-color: #fff;
      margin: 8px 0;
      border-radius: 8px;
    }
  </style>

3. javascript

const inputEl = document.querySelector(".todo-input > input"); //input
const btnEl = document.querySelector(".btn.btn--send"); //button
const ulListEl = document.querySelector(".todo-contents"); //ul

// function deleteTask(t) {
//   t.parentNode.remove();
// }

//텍스트를 입력해주세요 창 띄우기
function todoList (){
  if(inputEl.value === ""){
    inputEl.setAttribute("placeholder","내용을 입력해주세요.")
    return;
  }

  const liItem = document.createElement("li");
  const liDeleteBtn = document.createElement("button");
  const liCheckBox = document.createElement("input");
  const liText = document.createElement("span");

  liCheckBox.type = "checkbox";
  //인풋 체크팍스로 변경 
  liText.textContent = inputEl.value;
  //텍스트 입력값 li span안에 값 넣기

  //체크박스
  liCheckBox.addEventListener("click", function(e){
    if(liCheckBox.checked === true){
      liItem.setAttribute("style","text-decoration:line-through");
    } else {
      liItem.setAttribute("style","text-decoration:none");
    }
  });

  //삭제 버튼
  liDeleteBtn.textContent="삭제"
  liDeleteBtn.addEventListener("click", function(e){
    e.target.parentNode.remove();
  });
  // liDeleteBtn.setAttribute("onclick", "deleteTask(this)");

  //li 아이템 추가
  liItem.append(liCheckBox);
  liItem.append(liText);
  liItem.append(liDeleteBtn);
  // liItem.append(inputEl.value);

  //ul에 최종 추가
  ulListEl.appendChild(liItem);
  inputEl.value = " ";
  inputEl.focus();
}

btnEl.addEventListener("click", todoList);

.
.
.

4. 선택 삭제와 전체 삭제를 추가해보자

갑자기 선택 삭제와 전체 삭제를 추가하고 싶어졌다... 그래서 겨우겨우 찾아서 해봤다.

<section>
      <div class="inner">
        <div class="todo-list">
          <h1>To Do List</h1>
          <div class="todo-input">
            <input type="text" />
            <button class="btn btn--send">추가</button>
          </div>
          <ul class="todo-contents"></ul>
          <div class="todo-delete">
            <button class="delete-btn btn--delete1">선택 삭제</button>
            <button class="delete-btn btn--delete2">전체 삭제</button>
          </div>
        </div>
      </div>
    </section>

todo-delete div를 추가하고, 안쪽에 버튼 2개를 추가로 넣어놨다.

const mainBtn = document.querySelector(".todo-input > button") //버튼
const mainUl = document.querySelector(".todo-contents"); //ul
const mainInput = document.querySelector(".todo-input > input") //플레이스홀더 input
const mainDelete = document.querySelector(".btn--delete2")//전체 삭제 버튼
const selectDelete = document.querySelector(".btn--delete1")//선택 삭제 버튼


let todoList = function () {
  if(mainInput.value === ""){
    mainInput.setAttribute("placeholder","내용을 입력해주세요.");
    return; //else를 안쓰고 리턴으로 종결한다
  }

  const subLi = document.createElement("li");
  const subCheck = document.createElement("input");
  const subText = document.createElement("span");
  const subDelete = document.createElement("button");
  subCheck.setAttribute("type","checkbox");

  //텍스트
  subText.textContent = mainInput.value;

  //버튼
  subDelete.textContent = "삭제";

  //체크박스
  subCheck.addEventListener("click", function(){
    if(subCheck.checked === true){
      subText.setAttribute("style","text-decoration:line-through; color:#999");
      subCheck.classList.add("deleteBtn");
      subLi.classList.add("happy")
    } else {
      subText.setAttribute("style","text-decoration:none; color:000;");
      subCheck.classList.remove("deleteBtn");
    }
  })

  subDelete.addEventListener('click', function(e) {
    e.target.parentNode.remove();
  });

  //전체삭제
  mainDelete.addEventListener("click",function(){
    subLi.remove();
  })
  // 선택삭제
  selectDelete.addEventListener("click", function(){
    const checkList = document.querySelector(".deleteBtn");
    const happyList = document.querySelector(".happy");
    if(checkList.checked === true){
      happyList.remove();
      return;
    }
  })


  // li추가
  subLi.append(subCheck);
  subLi.append(subText);
  subLi.append(subDelete);

  // 최종 ul에 추가
  mainUl.appendChild(subLi);
  mainInput.value = "";
}

mainBtn.addEventListener("click",todoList);
//추가 버튼에 클릭이 일어났을때 todolist함수를 실행하겠다.