계산기 만들기

<div style="display: flex; gap: 10px;">

  <!-- 네모 박스 1 - 공급가액 입력 -->

  <div style="padding: 10px; border: 1px solid #ccc; width: 150px;">

    <label>공급가액:</label>

    <input type="number" id="supply" placeholder="금액 입력" style="width: 100%;">

  </div>


  <!-- 네모 박스 2 - 원가 입력 -->

  <div style="padding: 10px; border: 1px solid #ccc; width: 150px;">

    <label>원가:</label>

    <input type="number" id="cost" placeholder="금액 입력" style="width: 100%;">

  </div>


  <!-- 네모 박스 3 - 배송비 입력 -->

  <div style="padding: 10px; border: 1px solid #ccc; width: 150px;">

    <label>배송비:</label>

    <input type="number" id="shipping" placeholder="금액 입력" style="width: 100%;">

  </div>


  <!-- 네모 박스 4 - 부가세 결과 출력 -->

  <div style="padding: 10px; border: 1px solid #ccc; width: 150px;">

    <label>부가세:</label>

    <input type="text" id="vat" readonly style="width: 100%; background-color: #f0f0f0;">

  </div>

</div>


<!-- JavaScript: 부가세 계산 기능 -->

<script>

  function calculateVAT() {

    const supply = parseFloat(document.getElementById("supply").value) || 0;

    const cost = parseFloat(document.getElementById("cost").value) || 0;

    const shipping = parseFloat(document.getElementById("shipping").value) || 0;


    // 부가세율을 10%로 설정

    const vatRate = 0.1;


    // 부가세 계산: (공급가액 + 원가 + 배송비) * 부가세율

    const vat = (supply + cost + shipping) * vatRate;


    // 결과를 부가세 칸에 표시

    document.getElementById("vat").value = vat.toFixed(2) + " 원";

  }


  // 입력 필드의 값이 변경될 때마다 부가세 자동 계산

  document.getElementById("supply").addEventListener("input", calculateVAT);

  document.getElementById("cost").addEventListener("input", calculateVAT);

  document.getElementById("shipping").addEventListener("input", calculateVAT);

</script>




사업자등록번호 806-31-01298   

통신판매업신고번호 2023-서울마포-3036

박영미 대표  이메일 | help@contentsfit.com
주소 서울 마포구 양화로 120, 2층