triplexlab
Version:
프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻💻🧑🏻💻
66 lines (57 loc) • 2.27 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dist/build.min.css">
<link rel="stylesheet" href="./style.css">
<title>comma</title>
</head>
<body>
<div class="content">
<div class="l_wrapper">
<ul class="list-inner">
<li class="list">
<div> 총 주문 금액 </div>
<div> 총 배송비 </div>
<div> 총 결제금액 </div>
</li>
<li class="list bor">
<div class="js-item"> 0원 </div>
<div class="js-show"> 0원 </div>
<div class="js-total"> 0원 </div>
</li>
</ul>
</div>
</div>
<div class="tka-inner">
<input class="tka tka1" type="text" placeholder="총 주문 금액">
<input class="tka tka2" type="text" placeholder="총 배송비">
<a href="#0" class="btn">총 결제금액</a>
</div>
<script src="/dist/all.min.js"></script>
<script>
(function() {
console.log(tr)
const btn = document.querySelector('.btn');
const item = document.querySelector('.js-item');
const show = document.querySelector('.js-show');
const total = document.querySelector('.js-total');
const tka = document.querySelector('.tka-inner');
const values1 = document.querySelector('.tka1');
const values2 = document.querySelector('.tka2');
const app = document.querySelector('.app');
tka.addEventListener('keyup', function(e) {
e.target.value = tr.inputCommaSet(e.target.value)
});
btn.addEventListener('click', function(){
item.innerHTML = tr.comma(values1.value + '원' )
show.innerHTML = tr.comma(values2.value + '원' )
const num1 = Number(tr.unComma(values1.value))
const num2 = Number(tr.unComma(values2.value))
total.innerHTML = tr.comma(num1 + num2)
});
})();
</script>
</body>
</html>