JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="wrap">
  <h1>SR 상품 계산기</h1>
  <div class="box">
    <h2>상품</h2>
    <ul class="list">
      <li><input type="checkbox" name="snack" id="snack_01" value="15000"><label for="snack_01">상품1</label></li>
      <li><input type="checkbox" name="snack" id="snack_02" value="17000"><label for="snack_02">상품2</label></li>
      <li><input type="checkbox" name="snack" id="snack_03" value="14000"><label for="snack_03">상품3</label></li>
      <li><input type="checkbox" name="snack" id="snack_04" value="16000"><label for="snack_04">상품4</label></li>
    </ul>
  </div>

  <div class="box">
    <h2>옵션</h2>
    <ul class="list">
      <li><input type="checkbox" name="drink" id="drink_01" value="4000"><label for="drink_01">추가상품1</label></li>
      <li><input type="checkbox" name="drink" id="drink_02" value="4500"><label for="drink_02">추가상품2</label></li>
      <li><input type="checkbox" name="drink" id="drink_03" value="3500"><label for="drink_03">추가상품3</label></li>
      <li><input type="checkbox" name="drink" id="drink_04" value="10000"><label for="drink_04">추가상품4</label></li>
    </ul>
  </div>

  <div class="box">
    <h2>포인트</h2>
    <p class="point">
      <input type="text" name="point" id="point" class="point" /> P</p>
  </div>

  <div class="box">
    <h2>할인</h2>
    <select id="discount">
			<option value="0">선택</option>
			<option value="10">10%</option>
			<option value="20">20%</option>
			<option value="30">30%</option>
			<option value="40">40%</option>
			<option value="50">50%</option>
		</select>
  </div>

  <div class="box">
    <h2>할부</h2>
    <select id="installment">
			<option value="1">일시불</option>
			<option value="2">2개월</option>
			<option value="3">3개월</option>
			<option value="4">4개월</option>
			<option value="5">5개월</option>
		</select>
  </div>

  <div class="box">
    <p>가격 : <em class="price" id="price">0</em>원</p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
  font-size: 14px/1.5 'verdana', sans-serif;
}

.wrap {
  width: 700px;
  margin: 100px auto;
  border: 1px solid #999;
}

h1 {
  margin: 10px;
}

h2 {
  margin: 10px 0;
}

div.box {
  margin: 10px;
}

ul.list:after {
  content: '';
  display: block;
  clear: both;
}

ul.list li {
  float: left;
  margin-right: 20px;
}

p.point input {
  width: 200px;
  height: 23px;
  line-height: 23px;
  border: 1px solid #999;
  text-align: right;
}

select {
  border: 1px solid #999;
  width: 200px;
  height: 23px;
}

em.price {
  font-size: 15px;
  color: #ff9900;
  font-style: normal;
}

JavaScript

$(document).ready(function() {
  var total = $('.box input, .box select').on('change', function() {
    var sum = 0,
      point = parseInt($('#point').val().replace(/,/g, '') || '0'),
      discount = parseInt($('#discount').val());
    installment = $('#installment').val();

    $('.box input:checked').each(function() {
      sum += parseInt($(this).val());
    });

    var _add = sum + point; //총 합계 구하기

    total = (_add * (1 - discount / 100) / installment)

    var _result = Math.ceil(total).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); //소수점 반올림 하고 comma 찍기

    $('#price').text(_result);
  });

  // 포인트 숫자만 입력, comma 찍기
  $(function() {
    $('#point').on('keyup', function() {
      if ($(this).val() != null && $(this).val() != '') {
        var tmps = parseInt($(this).val().replace(/[^0-9]/g, '')) || '0';
        var tmps2 = tmps.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        $(this).val(tmps2);
      }
    });
  });
});