<button onclick="handleCalculate()">診断する</button>
<div id="result"></div> <script> function calculateMonthsLeft(balance, annualRate, monthlyPayment) { const r = annualRate / 12 / 100; if (r === 0) return Math.ceil(balance / monthlyPayment); const n = -Math.log(1 - r * balance / monthlyPayment) / Math.log(1 + r); return Math.ceil(n); } function calculateWithPrepayment(balance, annualRate, monthlyPayment, prepayment, monthsUntilPrepay) { const r = annualRate / 12 / 100; const futureBalance = balance * Math.pow(1 + r, monthsUntilPrepay) - monthlyPayment * ((Math.pow(1 + r, monthsUntilPrepay) - 1) / r); const newBalance = futureBalance - prepayment; if (newBalance <= 0) return monthsUntilPrepay; return monthsUntilPrepay + calculateMonthsLeft(newBalance, annualRate, monthlyPayment); } function handleCalculate() { const balance = parseFloat(document.getElementById('balance').value); const rate = parseFloat(document.getElementById('rate').value); const monthlyPayment = parseFloat(document.getElementById('monthlyPayment').value); const prepayment = parseFloat(document.getElementById('prepayment').value) || 0; const monthsUntilPrepay = parseInt(document.getElementById('prepayTiming').value); const originalMonths = calculateMonthsLeft(balance, rate, monthlyPayment); let resultHTML = `<p>完済まで：${Math.floor(originalMonths / 12)}年${originalMonths % 12}ヶ月</p>`; if (prepayment > 0) { const newMonths = calculateWithPrepayment(balance, rate, monthlyPayment, prepayment, monthsUntilPrepay); const savedMonths = originalMonths - newMonths; const interestSaved = savedMonths * monthlyPayment; resultHTML += `<p>繰上返済後の完済まで：${Math.floor(newMonths / 12)}年${newMonths % 12}ヶ月</p>`; resultHTML += `<p>返済期間の短縮：${savedMonths}ヶ月</p>`; resultHTML += `<p>節約できる利息の目安：約${Math.round(interestSaved / 10000)}万円</p>`; } document.getElementById('result').innerHTML = resultHTML; } </script> </body> </html>I'll recreate this mortgage loan calculator as a modern Next.js application with improved UI while maintaining all the functionality in Japanese.
I've recreated your mortgage loan calculator as a modern Next.js application with the following improvements:
When they click "診断する" (Diagnose), the app calculates:
The calculator uses the same mathematical formulas as your original HTML version but with a more modern interface.
Would you like me to make any adjustments to the design or functionality?