[Vanilla js] To Do List (할 일 추가기능)

김서윤·2021년 12월 11일
0

To Do List에서 할 일을 입력하여 추가하는 코드부분

요구사항

  • 할 일을 입력받고 엔터키 입력으로 추가 ✔
  • 할 일을 입력받고 확인 버튼 클릭하면 추가 ✔
  • 만약 입력값이 빈값이라면 추가되지 않음 ✔
  • 추가되는 할 일의 마크업은 <ul id="daily-todo-list"></ul>안에 삽입해야 함 ✔
  • 할 일이 추가되면 input은 빈값으로 초기화 ✔
  • 총 할 일 갯수를 count하여 상단에 보여줌 ✔




코드(1)

  • submit 이벤트 발생 시 form태그가 자동으로 전송되는 걸 막고, 엔터키를 눌렀을 때 할 일에 적힌 값 가져오기
  • 할일 입력받고, 엔터키 입력으로 추가 ✔
function App() {
  //submit 이벤트가 발생했을 때 form태그 자동으로 전송되는 것을 막아줌
  document.querySelector('#daily-form').addEventListener('submit', e => {
    e.preventDefault();
  });
  document.querySelector('#daily-todo').addEventListener('keypress', e => {
    console.log(e.key);
    if (e.key === 'Enter') {
      console.log(document.querySelector('#daily-todo').value); //value 속성으로 값 가져올 수 있음
    }
  });
}

App();

querySelector()

  • querySelector는 HTML을 태그를 선택한다.(제일 처음에 있는 태그를 선택함)
    ex document.querySelector('선택자')
    HTML태그를 변수에다가 넣을 때는 변수앞에 $를 붙여서 사용한다.
    특정 연산자를 선택할 때는 너무 길어지는 경우가 많아서 주로 id를 설정한다.
const $input = document.querySelector('input');

document.querySelector('body #target button'); //길다

e.preventDefault()

  • 요즘 대부분 input 태그를 쓸 때 form태그로 감싸서 사용한다. 특히 버튼이 있는 input이 있다면 form으로 감싸주는 것이 표준에 맞다.
    form에는 submit 이벤트가 있다. submit은 form안에 버튼을 눌렀을 때 페이지가 새로고침되는 현상이 있음(기본동작)
    폼 안에 버튼을 누르면 버튼에도 click이벤트가 발생하지만 form에도 submit이벤트가 발생한다. HTML에는 가끔 기본동작되는 것들이 있어서 저런 식으로 따로 막아줘야한다.




코드(2)

  • document.querySelector 반복되는 부분 코드 수정
  • 추가되는 할 일의 마크업은 <ul id="daily-todo-list"></ul>안에 삽입해야 함 ✔
    --> insertAdjacentHTML 엔터 키를 눌렀을 때 li태그 삽입
const $ = selector => document.querySelector(selector); //한줄로 써서 해당 부분을 바로 return💛

function App() {
  //submit 이벤트가 발생했을 때 form태그 자동으로 전송되는 것을 막아줌
  $('#daily-form').addEventListener('submit', e => {
    e.preventDefault();
  });
  $('#daily-todo').addEventListener('keypress', e => {
    console.log(e.key);
    if (e.key === 'Enter') {
      const dailytodo = $('#daily-todo').value;
      const todoItemTemplate = dailytodo => {  //사용자가 입력한 할 일을 인자로 받아와서 li태그에 넣음
        return `
        <li>
          <span>${dailytodo}</span>
          <button
            type="button"
            >
          수정
          </button>
          <button
          type="button"
            >
          삭제
          </button>
        </li>
        `;
      }; 
      $('#daily-todo-list').insertAdjacentHTML(  //💚
        'beforeend',
        todoItemTemplate(dailytodo)
      );
    }
  });
}

App();

innerHTML() vs insertAdjacentHTML()

  • element.innerHTML
    새로 만든 HTML로 덮어씌움
    내용을 추가하기에는 적합하지 않음

  • element.insertAdjacentHTML(position, text)
    태그 시작 전, 태그 시작 직후, 태그 끝나기 전, 태그 끝나고 난 뒤에 HTML을 넣을 수 있음
    position은 아래의 단어만 사용가능
    • 'beforebegin' : element 앞에
    • 'beforebegin' : element 안에 가장 첫 번째 child
    • 'beforeend' : element 안에 가장 마지막 child
    • 'afterend' : element 뒤에





코드(3)

  • 총 할 일 개수를 count하여 상단에 보여줌 ✔
    엔터 키 입력 시, todo 개수 체크하는 부분 코드 추가
    -> li 개수 카운팅
  • 할 일이 추가되면 input은 빈값으로 초기화 ✔
const todoCount = $('#daily-todo-list').querySelectorAll('li').length; //querySelectorAll을 사용해서 모든 li태그를 가져옴
$('.todo-count').innerText = `${todoCount}`;
$('#daily-todo').value = ''; //value값 조정  //$('input').value = '';도 됨

나는 변수를 선언하고 엔터 키를 눌렀을 때 +1해주는 걸 생각했었다(되긴 함)

  • querySelectorAll로 해당 id의 li 태그들을 모두 가져오고 lengthli들의 개수 체크





코드(4) - 할 일 추가 기능 완성

  • 만약 입력값이 빈값이라면 추가되지 않음 ✔
  • 할 일 입력받고 확인 버튼 클릭하면 추가 ✔ -onSubmit 함수로 빼서 사용
const $ = selector => document.querySelector(selector); //한줄로 써서 해당 부분을 바로 return
function App() {
  //submit 이벤트가 발생했을 때 form태그 자동으로 전송되는 것을 막아줌
  $('#daily-form').addEventListener('submit', e => {
    e.preventDefault();
  });

  const onSubmit = function () { //💜💙
    if ($('#daily-todo').value === '') { ////💜💙
      alert('값을 입력해주세요');
      return;
    }
    const dailytodo = $('#daily-todo').value;
    const todoItemTemplate = dailytodo => {
      return `
    <li>
      <span>${dailytodo}</span>
      <button
        type="button"
        >
      수정
      </button>
      <button
      type="button"
        >
      삭제
      </button>
    </li>
    `;
    }; //사용자가 입력한 할 일을 인자로 받아와서 li태그에 넣음
    $('#daily-todo-list').insertAdjacentHTML(
      'beforeend',
      todoItemTemplate(dailytodo)
    );
    const todoCount = $('#daily-todo-list').querySelectorAll('li').length; //querySelectorAll을 사용해서 모든 li태그를 가져옴
    $('.todo-count').innerText = `${todoCount}`;
    $('#daily-todo').value = ''; //value값 조정
  };

  //확인 버튼 클릭 시
  $('#daily-form-submit-button').addEventListener('click', onSubmit);

  //엔터 키 입력 시
  $('#daily-todo').addEventListener('keypress', e => {
    if (e.key !== 'Enter') {
      return;
    }
    onSubmit();
  });
}

App();




HTML 코드

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TodoList</title>
  </head>
  <body>
    <div id="app">
      <div class="display-flex justify-center">
        <header>
          <a href="/" class="text-black">
            <h1 class="text-center font-bold">🍋TO DO LIST🍍</h1>
          </a>
          <nav>
            <button>Daily</button>
            <button>Weekly</button>
            <button>Monthly</button>
            <button>Yearly</button>
          </nav>
        </header>
        <main class="display-flex justify-center">
          <div>
            <div class="display-flex justify-between">
              <h2>오늘 계획</h2>
              <span class="todo-count"></span>
            </div>
            <form id="daily-form">
              <div>
                <label for="daily-todo" class="input-label" hidden>
                  할 일
                </label>
                <input
                  type="text"
                  id="daily-todo"
                  name="dailyTodo"
                  placeholder="할 일"
                  autocomplete="off"
                />
                <button
                  type="button"
                  name="submit"
                  id="daily-form-submit-button"
                >
                  확인
                </button>
              </div>
            </form>
            <ul id="daily-todo-list"></ul>
          </div>
        </main>
      </div>
    </div>
    <script type="module" src="./src/js/index.js"></script>
  </body>
</html>
profile
오늘 못한 일은 내일도 못한다

0개의 댓글