develope_kkyu

[HTML] 카페 주문 관리 페이지 만들기 본문

FrontEnd

[HTML] 카페 주문 관리 페이지 만들기

developekkyu37 2022. 12. 23. 12:31
728x90

JQUERY, CSS 등을 활용하여 카페 주문 관리 페이지 만들기

  •  기능
    • 메뉴목록에서 메뉴명과 수량, 가격 입력 후 추가 버튼 클릭 시 주문 내역으로 넘어감
    • 주문 내역에 뜨면 총액을 보여주고 모바일 번호를 입력
    • 여러개의 주문을 완료하고 주문완료 버튼을 누르면
    • 매출 내역에서 매출 총액과 함께 주문내역들이 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafe</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        

        $(document)
        // 메뉴목록에 메뉴 선택 시 메뉴명과 가격 표시
        .on('click','#selMenu',function(){
            let str = $('#selMenu option:selected').text();
            let ar = str.split(', ')
            
            $('#menu').val(ar[0]);
            $('#price').val(ar[1]);
        })
        // 수량 옆 플러스 버튼 클릭 시
        // 수량 +1, 그만큼 가격 +
        .on('click','#plus',function(){
            let str = $('#selMenu option:selected').text();
            let ar = str.split(', ');
            let qty = $('#inp').val();
            qty = parseInt(qty)+1;
            $('#inp').val(qty);
            let a = ar[1]*qty;
            $('#price').val(a);
        })
        // 수량 옆 마이너스 버튼 클릭 시
        // 수량 -1, 그만큼 가격 -
        // 수량은 1 밑으로 떨어지지 않는다.
        .on('click','#minus',function(){
            let str = $('#selMenu option:selected').text();
            let ar = str.split(', ');
            let qty = $('#inp').val();
            qty = parseInt(qty)-1;
            $('#inp').val(qty);
            let a = ar[1]*qty;
            $('#price').val(a);
            if(parseInt(qty) == 0){
                $('#inp').val(1); }
        })
        // 메뉴목록 추가 버튼 클릭 시 
        // 메뉴목록에 있는 메뉴의 수량과 가격만큼
        // 주문내역으로 값이 옮겨간다.
        .on('click', '#add', function(){
            let str = $('#selMenu option:selected').text();
            let ar = str.split(', ');
            let qty = $('#inp').val();
            let a = ar[1]*qty;
            
            $('#selOrder').append("<option>"+ar[0]+" "+"x"+" "+qty+" "+ar[1]*qty+"."+"</option>");
            let sum =  parseInt($('#sum').val()) + parseInt(a);
            $('#sum').val(sum);
            $('#inp').val(1);
            $('#menu').val("");
            $('#price').val("");
        })   
        // 메뉴목록 지우기 버튼 클릭 시 
        // 메뉴명과 가격 초기화   
        .on('click', '#delete', function(){
            $('#menu').val("");
            $('#price').val("");
        })
        // 주문내역 주문완료 버튼 클릭시
        // 매출내역에 모바일번호, 주문내역을 보여준다.
        // 매출총액도 보여준다.
        .on('click','#order',function(){
            let str = $('#selOrder option').text();
            let ar = str.split('.');
            let qty = $('#inp').val();
            let mobile = $('#mobile').val();
            let sum = $('#sum').val();
            $('#sales').val(0);
            
            for(i=0; i<ar.length-1; i++){
            $('#selSales').append("<option>"+mobile+" "+ar[i]+"</option>");
            }
            $('#selSales option').each(function(){
                let str2 = $(this).text();
                let ar2 = str2.split(' ');
                let a = parseInt($('#sales').val()) + parseInt(ar2[4]);
                $('#sales').val(a);
            })
        })
        // 주문내역 주문삭제 버튼 클릭 시
        // 주문내역의 한 옵션이 삭제되고
        // 총액이 그만큼 줄어든다.
        .on('click','#orderDel',function(){
            let str = $('#selOrder option:selected').text();
            let ar = str.split(' ');
            $('#selOrder option:selected').remove();
            let a = $('#sum').val() - parseInt(ar[3]);
            $('#sum').val(a);
        })
    </script>
    <style>
        select {width: 400px; height: 450px; margin-top: 5px;}
        tr {display: flex;}
        td {flex: 1;}
        div{text-align: center; margin-top: 10px;}
        .count > button.minus {right: 0; bottom: 0;}
        .count> button.plus {right: 0;}
        .sel > label {font-size: 20px;}
        option {font-size: 20px; text-align: justify;}
    </style>

</head>
<body>
   <table>
        <tr>
            <td>
                <label>메뉴목록</label>
                <select class="sel" id="selMenu" multiple>
                    <option>Americano, 2500</option>
                    <option>Mocca, 3200</option>
                    <option>Espresso, 2300</option>
                    <option>Cappuccino, 3500</option>
                    <option>Latte, 3000</option>
                    <option>Greentea, 2700</option>

                </select>
                <div>
                <label>메뉴명</label>
                <input id="menu" type="text" readonly>
                </div>
                <div>
                    <div class="count">
                    <label id="qty">수량</label>
                    <input type="text" id="inp" value="1"/>
                    <label>잔</label>
                    <button type="button" id="plus">△</button>
                    <button type="button" id="minus">▽</button>
                </div>
                </div>
                <div>
                <label>가격</label>
                <input id="price" type="text" readonly>
                <label>원</label>
                </div>
                <div>
                <button id="add">추가</button>
                <button id="delete">지우기</button>
                </div>
            </td>
            <td>
                <label>주문내역</label>
                <select id="selOrder" multiple>
                </select>
                <div>
                <label>총액</label>
                <input id="sum" type="text" value="0" readonly>
                <label>원</label>
            </div>
            <div>
                <label>모바일번호</label>
                <input id="mobile" type="text">
            </div>
            <div style="margin-top: 40px;">
                <button id="order">주문완료</button>
                <button id="orderDel">주문삭제</button>
                </div>
            </td>
            <td>
                <label>매출내역</label>
                <select id="selSales" multiple>
                </select>
                <div>
                <label>매출총액</label>
                <input id="sales" type="text" value="0" readonly>
                <label>원</label>
                </div>
            </td>
        </tr>
   </table>
</body>
</html>

--

실행 화면

 

728x90

'FrontEnd' 카테고리의 다른 글

[HTML] 나만의 음원 차트 웹사이트 만들기  (0) 2022.12.22
'FrontEnd' Related Articles more