스타벅스 주문 시스템 만들기 (난이도 상) (1)

대략 이런 화면을 만들어야한다.

 

기본 제공된 화면

구현해야할 것.

1. 메뉴 항목 아래에 들어가야할 메뉴 리스트. 아메리카노, 카페라떼, 카푸치노, 등등. 

2. 메뉴 항목과 아래 주문 내역의 테두리.

3. 주문 추가 버튼이 눌렸을 때, 주문 내역에 항목 추가.

4. 추가된 항목의 삭제 기능.

5. 주문 제출 버튼을 눌렀을 때 alert와 더불어 페이지 초기화 

 

메뉴 항목과 주문 내역의 테두리. 

body {

    font-family: Arial, sans-serif;

    padding: 20px;

    max-width: 600px;

    margin: 0 auto;

}

h1 {

    text-align: center;

}

#menu {

    border: solid 1.5px gray;

    border-radius: 5px;

}

#order-summary {

    border: solid 1.5px gray;

    border-radius: 5px;

}

/* 여기에 #menu와 #order-summary의 스타일을 추가하세요. */

/* 버튼과 관련된 스타일은 아래의 예시를 참고하여 완성하세요. */

button {

    background-color: #00704a;

    color: white;

    padding: 10px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

button:hover {

    background-color: #005936;

}

#submit-order {

    display: block;

    /* block 요소로 변경 */

    margin: 20px auto;

    /* 중앙 정렬 */

    width: 90%;

    /* 부모의 80% 너비를 차지 */

    background-color: #00704a;

    color: white;

    /* 버튼을 크게 보이게 하기 위한 패딩 */

    border: none;

    border-radius: 5px;            

    /* 글씨 크기 조정 */

    cursor: pointer;

}

 

메뉴 항목 아래에 들어가야할 메뉴 리스트. 아메리카노, 카페라떼, 카푸치노, 등등. 

// TODO-1: 메뉴 아이템을 화면에 표시하는 코드를 작성하세요.

    // 힌트: menu 배열을 반복문(forEach)을 사용해 순회하며,

    // 각 메뉴 아이템을 div 요소로 생성한 후 menuContainer에 추가하세요.

    // div 요소 안에는 메뉴 이름과 가격을 표시하는 span 태그,

    // 그리고 '주문 추가' 버튼을 추가해야 합니다.

    // '주문 추가' 버튼에는 각 메뉴 아이템의 인덱스를 data-index 속성으로 저장하여,

    // 클릭 시 해당 메뉴를 식별할 수 있게 만드세요.

 

    menu.forEach((item, index) => {

        let div = document.createElement('div');

        let span = document.createElement('span');

        span.id = 'price';

       

        let button = document.createElement('button');

        button.id= 'addbtn';

        button.innerText = '주문 추가.';

        div.appendChild(span);  // span 추가

        div.appendChild(button);     // button 추가

        document.getElementById('menu').appendChild(div) // 오더 리스트에 추가.

    });

 

절반의 성공

 

이... 일단은 6개의 항목을 만드는 건 성공했다. 주문 추가 버튼만 달려있는 게 함정이긴 하지만. 이제 옆에 딕셔너리로부터 메뉴의 항목을 불러올 필요가 있을 거 같다. 

 

항목 표시에 성공했는데... 문제가 생겼다.

 

menu.forEach((item, index) => {

        let div1 = document.createElement('div');

        div1.classList.add('cofname');

        let span1 = document.createElement('span');

        span1.textContent = `${item.name}`;

        div1.appendChild(span1)

        let div2 = document.createElement('div')

        div2.classList.add('price-btn');

        let span2 = document.createElement('span');

        span2.id = 'cofprice';

        span2.textContent = `₩${item.price}`;

        let button = document.createElement('button');

        button.id= 'addbtn';

        button.innerText = '주문 추가.';

        div2.appendChild(span2)

        div2.appendChild(button)

        document.getElementById('menu').appendChild(div1) // 오더 리스트에 추가.

        document.getElementById('menu').appendChild(div2) // 오더 리스트에 추가.

    });

 

문제 리뷰

스타일에서 문제가 생겼다.

 

커피 이름 - 커피의 가격과 버튼이 같은 줄에 있어야 하는데, 같은 줄에 안 있고 따로 놀고 있다. 

주문 추가 옆에 공간이 조금 있어야할 거 같은데... 마진 값을 조정해봐야겠다.