[QUIZ] 상품 가격 계산 프로그램
29 Sep 2021 -
2 minute read
상품 가격 계산 프로그램 만들기
See the Pen 상품 가격 계산 프로그램 by Jinsol (@losuif) on CodePen.
html
<!DOCTYPE html>
<html lang="ko">
<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>상품 가격 계산</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrap">
<h1>상품 가격 계산</h1>
<fieldset>
<!-- fieldset은 테두리선 만들 필요 X -->
<div id="goodsPriceArea">
상품가격
<span id="goodsPrice">12000</span>
</div>
<!-- div#goodsPriceArea -->
<div id="goodsCntArea">
<span onclick="fnCntChange('0')"> - </span>
<input type="text" name="goodsCnt" id="goodsCnt" value="1"
maxlength="2" onkeyup="fnCalc()">
<!-- onchange : 입력 후 커서가 떠났을 때 (바깥쪽 클릭) 적용됨 -->
<!-- onkeyup : 키보드로 숫자 입력하면 바로 적용 -->
<span onclick="fnCntChange('1')"> + </span>
</div>
<!-- div#goodsCntArea -->
</fieldset>
<div id="resArea">
총액 : <span id="res">0</span>
</div>
<!-- div#resArea -->
</div>
<!-- div#wrap -->
<script src="script/script.js"></script>
</body>
</html>
css
div#wrap {
margin: 20px auto;
padding: 20px;
width: 600px;
border: 1px solid #000;
}
#wrap fieldset {
display: flex;
font-size: 28px;
padding-top: 14px;
user-select: none;
/* 클릭 시 선택 안됨 */
}
#wrap fieldset div {
margin-right: 60px;
}
div#goodsPriceArea::after {
content: " 원";
}
#wrap fieldset input#goodsCnt {
width: 60px;
text-align: center;
font-size: 25px;
}
#goodsCntArea span {
font-size: 24px;
border: 1px solid #000;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
transform: translateY(2px);
cursor: pointer;
}
#goodsCntArea span:hover {
background-color: rgba(0, 0, 0, 0.1);
text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}
#goodsCntArea span:active {
border-width: 1.3px;
color: white;
background-color: rgba(0, 0, 0, 0.8);
}
#resArea {
font-size: 34px;
margin: 30px 0;
}
#resArea::after {
content: " 원";
}
javascript
function fnCalc(){
let domInput = document.querySelector("#goodsCnt");
let nowCnt = domInput.value;
if (nowCnt == "") {
return;
// 공백 시 함수 아래 코드 실행되지 않고 즉시 종료
}
nowCnt = Number(nowCnt.trim()); //trim : 공백제거
if (nowCnt < 1 || nowCnt > 20) {
alert("상품수량은 1~20개 중 선택할 수 있습니다.");
nowCnt = 1;
document.querySelector("#res").innerText = 0;
return;
// 범위 초과하면 alert 뜨고 초기값1, 결과값0으로 되돌림
}
// 총액 계산
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 == 1) {
alert(`최소 ${min}개 이상 선택 필수입니다.`);
} else {
domInput.value = --nowCnt;
}
} else if (param == "1") { //상품수량증가
if (nowCnt == 20) {
alert(`최대 구매수량은 ${max}개입니다.`);
} else {
domInput.value = ++nowCnt;
}
}
// 총액 계산
let goodsPrice = Number(document.querySelector("#goodsPrice").innerText); // 상품 가격
let priceSum = 0; //총액
priceSum = goodsPrice * nowCnt;
document.querySelector("#res").innerText = priceSum;
}