계산기 만들기
<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>