티스토리 뷰

HTML&CSS&Javscript&Jquery

190822 장바구니 / 장바구니 비우기 구현

猫猫 2019. 8. 23. 17:21
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    function Product(_name, _price){
        const name =_name;
        const price=_price;
        this.getName = function (){ //상품이름 getter
            return name;
        }
        this.getPrice =function (){ //가격 getter
            return price;
        }
    }

    function Basket(){//바구니
        var products = []; //빈 배열(멤버변수)
        this.addProduct = function(amount, product){ 
            products.push(...Array(amount).fill(product)); //디게 희한하다. amount만큼 계속 fill로 객체 배열을 넣는다. 
        }
        this.calcTotal = function(){//메서드
            console.log("당신이 산 수량은: "+products.length);
            return products
                .map(product=>product.getPrice())
                .reduce((a,b)=>a+b,0);
        }
        this.printShoppingInfo=function(){ //메서드
            console.log("당신이 지불 할 금액은: "+this.calcTotal());            
        }
        this.restoreProduct = function(){
            
            products.splice(0,products.length);//0부터 products.length 까지 돌면서 삭제한다. 

        }        
    }
    var p ="";
    var am = 0;
    var pr =0;
    var a = new Product("bread",6); //객체생성
    var b = new Product("bread",9); //객체생성
    var basket = new Basket(); //바구니 객체 생성
    basket.addProduct(3,a); //3,"bread",6
    basket.addProduct(6,b); //6,"bread",9
    basket.addProduct(7, new Product("bread",29));
    //result : 갯수 16 가격 275
    // reduce(((3*6)+6*9)+7*29) = 275다. 
    basket.printShoppingInfo();

    $(document).ready(function(){
        $("#cal").click(function(){
            p = $("#product").val();
            am = parseInt($("#amount").val());
            pr = parseInt($("#price").val());        
            var c = new Product(p,pr);
            basket.addProduct(am,c);
            basket.printShoppingInfo();
        });

        $("#restore").click(function(){
            basket.restoreProduct();
            console.log("Basket is empty");
        });
    });
    </script>
</head>
<body>
    상품명 : <input type ="text" id ="product">
    갯수 : <input type="text" id="amount">
    가격 : <input type="text" id="price">
    <input type="button" id="cal" value="계산!">
    <input type="button" id="restore" value="장바구니 비우기">
</body>
</html>

원래는 장바구니 채우기만 알려주셨으나

채우기가 있는데 비우기가 없어서 비우기도 만들어 보았다. 

반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190819 map 예제  (0) 2019.08.23
190822 회원가입/로그인 Javascript로 구현하기  (0) 2019.08.23
190822 select 이벤트, textarea 연습  (0) 2019.08.23
190823 두번째 문제-회원가입/로그인 구현  (0) 2019.08.23
190823 첫번째 문제  (0) 2019.08.23