[JS Challenge] 001

이인송·2021년 2월 27일

There is no formation without repetition

구현

LocalStorage
EventDelegation

Psuedo Code

1. form 태그 안에서 submit 을 통해 입력 내용을 배열에 담기

- value 로 입력값을 가져오기
- 객체의 형태로 만들어서 배열에 넣기 
- submit 이후에 값 초기화하기

2. 배열에 담긴 내용을 HTML 에서 보여주기

- innerHTML 을 통해 동적으로 내용 추가하기
- map 메서드를 활용함으로써 배열 내 요소를 보여주기
- input 의 id 와 label 의 for 값을 같게 만듬으로써 서로가 연결되게 만들기 
- join 을 활용해서 map 메서드의 결과 값을 string 으로 만들기

3. localStorage 활용하기

- localStorage 에 setItem을 활용해서 저장하기
- localStorage 에 getItem을 통해 localStorage 내 저장된 값 가져오기

4. EventDelegation 활용하기

- 체크된 결과 또한 reload 되었을 때 유지되게 만들기 
- 동적으로 추가된 요소에 대해서도 toggle 기능을 할 수 있게 만들기
- 동적으로 추가된 리스트에 대해서 부모요소를 가져오기
- eventtarget 의 matches 기능 활용하여 일치하지 않는 요소는 반환값이 없게하기

Javascript

  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
  const items = JSON.parse(localStorage.getItem('items')) || [];
  
  // 1. 입력 값을 가져와서 출력하기 
  function addItem(e) {
    e.preventDefault();
    const text = this.querySelector('[name=item]').value;
    const item = {
      text,
      done: false
    };
    items.push(item);
    // 즉각 보이게 하는 함수 
    populateList(items, itemsList);
    // 3. localStorage 활용하기 
    localStorage.setItem('items', JSON.stringify(items));
    // form 에서 갖고 있는 method 이다
    this.reset();
  }
  
  // 2. 배열에 담긴 내용을 보여주는 함수
  function populateList(plates = [], platesList) {
    platesList.innerHTML = plates.map((plate, i) => {
      return `
      <li>
        <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 
          'checked' : ''}/>
          <label for="item${i}">${plate.text}</label>
        </li>
        `;
      }).join('');
    }
    
    // 4. EventDelegation 활용하기
  function toggleDone(e) {
    if (!e.target.matches('input')) return;
    const el = e.target;
    const index = el.dataset.index;
    // toggle
    items[index].done = !items[index].done;
    localStorage.setItem('items', JSON.stringify(items));
    populateList(items, itemsList);
  }


  addItems.addEventListener('submit', addItem);
  itemsList.addEventListener('click', toggleDone);
  // localStorage 내에 저장된 item list 를 갖고 온다
  populateList(items, itemsList);

HTML

  <div class="wrapper">
    <h2>LOCAL TAPAS</h2>
    <p></p>
    <ul class="plates">
      <li>Loading Tapas...</li>
    </ul>
    <form class="add-items">
      <input type="text" name="item" placeholder="Item Name" required>
      <input type="submit" value="+ Add Item">
    </form>
  </div>