[토이프로젝트] 쇼핑리스트: 자바스크립트 작성

[작성해야할 기능]

+버튼을 누르면 input box에 들어간 텍스트를 아이템으로 추가하기

 

[구현]

1. 아이템 추가하기

(1) 일단 add button이 눌리면 이벤트를 호출한다.

(2) 이벤트가 호출되었을 때 만약 item name이 비워져 있으면 아이템 이름을 입력하라고 하고 함수를 종료한다.
   -> item price가 비워져 있으면 자동으로 가격을 0으로 만들고 아이템을 추가한다.

- 아이템 추가시 create element로 div 아이템을 만든 후 클래스를 item으로 설정해준다.

   -> 만들어진 element의 innerhtml을 item name과 item price를 넣어서 만들어준다. 이 때 textcontent가 아니라 inner html을 이용하는 이유는 단순히 텍스트만 추가되는 것이 아니기도 하고 이 내부 컨텐츠가 innerHTML을 바꿈으로 인해 덮어씌어지지 않기 때문이다. (애초에 새로 만든 element이기 때문에)

(3) 이렇게 만든 div element를 item list에 자식으로 추가한다.

const input_name = document.querySelector('.input_name');
const input_price = document.querySelector('.input_price');
const add_button = document.querySelector('.add_button');
const itemList = document.querySelector('.item-list');

add_button.addEventListener('click', () => {
  const itemName = input_name.value;
  let itemPrice = input_price.value;
  if (itemName == '') {
    alert('Please enter the item name.');
    return;
  }
  if (itemPrice == '') {
    itemPrice = 0;
  }

  const item = document.createElement('div');
  item.setAttribute('class', 'item');
  item.innerHTML = `
          <input type="checkbox" class="item_checkbox" />
          <div class="item_name">${itemName}</div>
          <div class="item_price">${itemPrice}</div>
          <i class="item_delete-button far fa-trash-alt"></i>
  `;
  itemList.appendChild(item);
  input_name.value = '';
  input_price.value = '';
});

그 외 소소하게 기능들을 추가하고 삭제한 것도 있는데 일단 메인 기능은 저것이라 이것만 올려둔다.

자세한 코드는 깃헙에서 확인

https://github.com/HZie/shopping-list

 

이 프로젝트로 만든 깃헙 페이지

https://hzie.github.io/shopping-list/

Shopping List