JavaScript 상품 수량 계산기

2021년 09월 16일

javascript

상품 수량 계산기

쇼핑몰에 보면 상품 수량 계산하는건 꼭 있다.
HTML,CSS,JS로 간단하게 구현이 가능하다.
codepen으로도 올려놓았으니 확인해보고 입맛대로 바꿔서 쓰면 되겠다.
상세 코드도 따로 올려놓았으니 확인

See the Pen 상품 가격 계산기 by yoonbitnara (@yoonbitnara) on CodePen.

상세코드

HTML

<!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">
    <link rel="stylesheet" href="style/style.css">
    <title>상품가격계산</title>
  </head>
<body>
    <div id="wrap">
        <h1>상품 가격 계산</h1>

        <fieldset>
            <div id="goodsPriceArea">
                상품가격
                <span id="goodsPrice">12000</span>
            </div>
            <div id="goodsCntArea">
                <span onclick="fnCntChange('0')">-</span>
                <input type="text" name="goodsCnt" id="goodsCnt" value="1" maxlength="2" onkeyup="fnCalc()">
                <span onclick="fnCntChange('1')">+</span>
            </div>
        </fieldset>

        <div id="resArea">
            총액 : <span id="res">0</span>
        </div>
    </div>
    <!-- div#wrap -->
    <script src="script/script.js"></script>
  </body>
</html>

CSS

* {

    box-sizing: border-box;
}

div#wrap {

    border: 1px solid #000;
    width: 600px;
    padding: 10px 20px;
    margin: 20px auto;
}

#wrap fieldset {
    font-size: 28px;
    display: flex;
    padding-top: 16px;
    user-select: none;
}

#wrap fieldset div {

    margin-right: 60px;
}

#wrap fieldset input {

    width: 60px;
    text-align: center;
    font-size: 25px;
    
}

#wrap fieldset div#goodsCntArea span {

    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 28px;
    font-size: 24px;
    border: 1px solid #000;
    display: inline-block;
    transform: translateY(2px);
    cursor: pointer;
}

#wrap fieldset div#goodsPriceArea::after {

    content: "원"
}

#wrap fieldset div#goodsCntArea span:hover {    

    text-shadow: 0.5px 0.5px rgba(0, 0, 0, 0.616);
    background-color: rgba(0, 0, 0, 0.05);
}

#wrap fieldset div#goodsCntArea span:active {

    border-width: 1.1px;
}

#wrap div#resArea {

    font-size: 30px;
    margin: 30px 0;

}

#wrap div#resArea::after {

    content: "원";
}

JS

function fnCalc() {

    let domInput = document.querySelector('#goodsCnt'); 
    let nowCnt = domInput.value;
    
    if(nowCnt == "") {
        
        return;
    }
    nowCnt = Number(nowCnt.trim()); //공백제거 후 숫자형으로 변환

    if(nowCnt <=1 || nowCnt >= 20) {
        alert("상품수량은 1~20에서 선택하실수있습니다.");
        domInput.value = 1;
        document.querySelector('#res').innerText = 0;
        return;
    }


    // 총액 계산
    
    let goodsPrice = Number(document.querySelector('#goodsPrice').innerText);

    let priceSum = 0;

    priceSum = goodsPrice * nowCnt;

    document.querySelector('#res').innerText = priceSum;
}

function fnCntChange(param) { // 상품수량 변경

    let domInput = document.querySelector('#goodsCnt'); 
    let nowCnt = domInput.value;
    nowCnt = Number(nowCnt.trim()); //공백제거 후 숫자형으로 변환

    let min = 1; // 최소 구매수량

    let max = 20; //최대 구매수량


    if(param == "0") {
        
        if(nowCnt == min) {
            alert("최소 " + min +"개 이상 선택필수 입니다.");
            
        } else {
            
            domInput.value = --nowCnt;
        }
        
    }
    if(param == "1") {
        
        if(nowCnt == max) {
            
            alert("최대 구매수량은 " + max + "20개입니다.");
        } else {
            
            domInput.value = ++nowCnt;
        }
        console.log(param);

    }
    // 총액 계산
    
    let goodsPrice = Number(document.querySelector('#goodsPrice').innerText);

    let priceSum = 0;

    priceSum = goodsPrice * nowCnt;

    document.querySelector('#res').innerText = priceSum;
}