문벅스 커피메뉴 만들기 -(1) 입력시 메뉴판에 이름 추가

[기본설계]

step1 요구사항 구현을 위한 전략
TODO 메뉴 추가
메뉴의 이름을 입력 받고 엔터키 입력으로 추가
추가되는 메뉴의 마크업은 '<ul id=espresso-menu>' 리스트로 넣는다
메뉴가 추가되고 나면 input은 빈 값으로 초기화한다
사용자 입력값이 빈 값이라면 추가되지 않는다.

 

 

 

1.TODO 메뉴 추가 

function App(){

	//form태그가 자동으로 전송되는걸 막아준다
    document.querySelector("#espresso-menu-form")
    .addEventListener("submit",(e)=>{
    e.preventDefault();
    })


//input값 받아오는 곳 
document.querySelector("#espresso-menu-name")
.addEventListner("keypress",(e)=>{
	console.log(e.key); // keypress 이벤트로 받아온 값 
    if(e.key == "Enter"){
    	console.log(document.querySelector(""#espresso-menu-name").value);
       }
	});

}

App() 함수는 input에 값을 입력시 값을 받아올 수 있도록 만드려는 함수이다.

주의할 점은 , form의 경우 입력값을 받으면 값을 바로 서버로 보내버린다. 따라서 페이지가 다시 뜨는 현상이 나타나 console에 적은 결과값이 보이지 않는다. 

따라서 preventDefault() 함수를 줘서 이러한 현상을 막는다.

 

2. document.querySelector() 부분을 변수안에 담아버린다.

코드 길이가 너무 길어져서 반복되는 document.querySelector() 부분을 변수안에 담아준다.

const $ = (selector) => document.querySelector(selector);

요소를 가져올 때 $라는 변수이름을 줘서 그 안에 담아준다.

또한 함수에 {} 블록이 없으면 , 저 상태로 바로 리턴해준다.

 

3. 리스트 부분에 음료 이름 추가 

$("#espresso-menu-name").addEventListener("keypress",(e)=>{
        if(e.key == "Enter"){
            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));
        }

$라는 요소 셀렉터를 줘서 따로 document.querySelector()를 주지 않아도 되며,

insertAdjacentHTML() 속성의 "beforeend" 를 이용하여 값이 추가될 떄마다 </ul>이 시작하기 전에 추가해준다

 

          <ul id="espresso-menu-list" class="mt-3 pl-0"></ul>

완료 

 

 

8부터 gogo