문벅스 카페 메뉴 앱 만들기 5. 버튼을 이용한 메뉴 추가

이번에는 입력창 옆의 OK 버튼을 이용하여 메뉴를 추가하는 기능을 구현해 보겠습니다.

버튼의 id를 찾아 addEventListener를 이용하여 입력창에서 Enter 키를 누르는 것과 동일한 기능을 수행합니다.

이전에 addEventListener에 입력용으로 작성한 함수를 그대로 쓰면 중복되는 코드가 많을 것이다.

반복해서 사용할 수 있는 기능을 만듭니다.

const addMenu = () => {
    
    if($("#espresso-menu-name").value === ""){
        alert("메뉴를 입력해주세요.")
        return;
    }

const espressoMenuName = $("#espresso-menu-name").value;
const menuItemTemplate =(espressoMenuName) => {return `<li class="menu-list-item d-flex items-center py-2">
<span class="w-100 pl-2 menu-name">${espressoMenuName}</span>
<button
  type="button"
  class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
>
  수정
</button>
<button
  type="button"
  class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
>
  삭제
</button>
</li>`
}

$("#espresso-menu-list").insertAdjacentHTML("beforeend",menuItemTemplate(espressoMenuName));

// li 태그의 개수를 세서 변수로 선언한다.
const menuCount = $("#espresso-menu-list").querySelectorAll("li").length;
$(".menu-count").innerText = `총 ${menuCount} 개`
$("#espresso-menu-name").value =  "";

}

위와 같이 함수를 만들어 기존 코드를 교체하고 버튼의 id인 espresso-menu-submit-button을 가져와서 이벤트를 추가합니다.

function App() {
    $("#espresso-menu-submit-button").addEventListener("click",addMenu);
    $('#espresso-menu-form').addEventListener("submit",(e)=>{
        e.preventDefault();
    });
   
    $("#espresso-menu-name").addEventListener("keypress",(e)=>{
        if(e.key !=="Enter"){
            return;
        }
            addMenu();
    });
}