단리 복리 차이점 계산기 코드입니다!
*****
제가 처음으로 쳇지피티를 사용해서
바이브 코딩으로 만든 도구인
단리 / 복리 계산기 코드 입니다!
단순이 말 몇 마디로 쉽게 코딩을 만들어 낼 수 있는 시대가 왔습니다.
여러분들도 도전해 보세요!!
처음엔 익숙하지 않고 어렵지만,
하다보면 실력이 쌓일 거라 생각합니다!!
우선, 도전해보고, 행동해보는 것이 중요하다고 생각합니다!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>복리·단리 계산기</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 480px;
margin: 40px auto;
padding: 0 20px;
}
label { display: block; margin-top: 12px; }
input, select, button {
width: 100%; padding: 8px; font-size: 1rem; box-sizing: border-box;
}
button {
margin-top: 20px; font-weight: bold;
background: #e74c3c; color: #fff; border: none; cursor: pointer;
}
.result {
margin-top: 24px; padding: 12px;
border: 1px solid #ccc; border-radius: 6px; background: #f7f7f7;
line-height: 1.6;
}
canvas{margin-top:24px; width:100% !important; height:280px !important;}
</style>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>복리 · 단리 계산기</h2>
<label for="principal">원금 (₩)</label>
<input type="number" id="principal" min="0" step="any" />
<label for="rate">이자율 (연 %)</label>
<input type="number" id="rate" min="0" step="any" placeholder="예: 5" />
<label for="duration">납입 기간</label>
<div style="display:flex; gap:8px">
<input type="number" id="duration" min="1" step="1" style="flex:2" />
<select id="unit" style="flex:1">
<option value="day">일</option>
<option value="week">주</option>
<option value="month">달</option>
<option value="year">년</option>
</select>
</div>
<button id="calculate">계산하기</button>
<div id="output" class="result"></div>
<canvas id="chart"></canvas>
<script>
let chart = null; // Chart.js 인스턴스 저장
document.getElementById('calculate').addEventListener('click', () => {
const P = parseFloat(document.getElementById('principal').value);
const r = parseFloat(document.getElementById('rate').value) / 100; // 연 이자율
const d = parseInt(document.getElementById('duration').value, 10);
const u = document.getElementById('unit').value;
if (isNaN(P) || isNaN(r) || isNaN(d) || d <= 0) {
document.getElementById('output').textContent = '모든 값을 올바르게 입력하세요.';
if(chart){chart.destroy(); chart=null;}
return;
}
// compounding 주기 n(연간 횟수) & 기간(연 단위) 계산
let n, t;
switch (u) {
case 'day' : n = 365; t = d / 365; break;
case 'week' : n = 52; t = d / 52; break;
case 'month': n = 12; t = d / 12; break;
default : n = 1; t = d; // year
}
// 복리 공식 A = P * (1 + r/n)^(n*t)
const A_comp = P * Math.pow(1 + r / n, n * t);
const interestComp = A_comp - P;
// 단리 공식 A = P * (1 + r * t)
const A_simple = P * (1 + r * t);
const interestSimple = A_simple - P;
// 복리와 단리 이자 차액
const diff = interestComp - interestSimple;
const localeOpts = { maximumFractionDigits: 0 };
document.getElementById('output').innerHTML = `
<strong>결과</strong><br>
원금: ₩${P.toLocaleString()}<br><br>
<u>복리</u><br>
이자: ₩${interestComp.toLocaleString(undefined, localeOpts)}<br>
총금액: ₩${A_comp.toLocaleString(undefined, localeOpts)}<br><br>
<u>단리</u><br>
이자: ₩${interestSimple.toLocaleString(undefined, localeOpts)}<br>
총금액: ₩${A_simple.toLocaleString(undefined, localeOpts)}<br><br>
<u>복리 - 단리 차이</u><br>
이자 차액: ₩${diff.toLocaleString(undefined, localeOpts)}
`;
// 그래프 그리기
const ctx = document.getElementById('chart').getContext('2d');
// 이전 차트가 있으면 제거
if (chart) chart.destroy();
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['복리 총금액', '단리 총금액'],
datasets: [{
label: '총금액 (₩)',
data: [A_comp, A_simple],
backgroundColor: ['rgba(231, 76, 60, 0.7)', 'rgba(52, 152, 219, 0.7)'],
borderWidth: 1
}]
},
options: {
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (context) => `₩${context.parsed.y.toLocaleString(undefined, localeOpts)}`
}
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: (value) => '₩' + Number(value).toLocaleString()
}
}
}
}
});
});
</script>
</body>
</html>
댓글