Cara membuat simulasi KPR Calculator Dengan Ajax html

proyek yang bagus untuk memahami bagaimana logika keuangan bekerja dalam pemrograman. Saya akan membuatkan simulasi Kalkulator KPR yang interaktif menggunakan HTML, CSS, dan JavaScript (menggunakan Fetch/Logic internal sebagai simulasi AJAX agar bisa berjalan langsung tanpa perlu backend terpisah).

Fitur Kalkulator:

DP Minimal 5%: Input akan divalidasi agar tidak kurang dari batas minimum.
Suku Bunga Tetap: Diset pada 5.3% per tahun.
Pilihan Tenor: Pengguna bisa memilih jangka waktu kredit (5 hingga 30 tahun).
Update Otomatis: Hasil perhitungan muncul seketika tanpa reload halaman.

Kode Lengkap (HTML, CSS, JS)

Anda bisa menyimpan kode di bawah ini dalam satu file berformat .html.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulasi KPR Calculator</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --accent-color: #27ae60;
            --bg-color: #f4f7f6;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .container {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 450px;
        }

        h2 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #555;
        }

        input, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        input:focus {
            border-color: var(--accent-color);
            outline: none;
        }

        .result-box {
            margin-top: 2rem;
            padding: 1.5rem;
            background: #e8f5e9;
            border-radius: 8px;
            border-left: 5px solid var(--accent-color);
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.8rem;
        }

        .result-item span:last-child {
            font-weight: bold;
            color: var(--primary-color);
        }

        .monthly-payment {
            font-size: 1.4rem;
            color: var(--accent-color) !important;
        }

        .error-msg {
            color: #e74c3c;
            font-size: 0.85rem;
            margin-top: 0.3rem;
            display: none;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Kalkulator KPR</h2>
    
    <div class="form-group">
        <label>Harga Properti (Rp)</label>
        <input type="number" id="homePrice" placeholder="Contoh: 500000000" value="500000000">
    </div>

    <div class="form-group">
        <label>Uang Muka / DP (Min 5%)</label>
        <input type="number" id="downPayment" placeholder="Minimal 5% dari harga">
        <div id="dpError" class="error-msg">DP minimal adalah 5% dari harga jual!</div>
    </div>

    <div class="form-group">
        <label>Jangka Waktu (Tenor)</label>
        <select id="tenure">
            <option value="5">5 Tahun</option>
            <option value="10" selected>10 Tahun</option>
            <option value="15">15 Tahun</option>
            <option value="20">20 Tahun</option>
            <option value="25">25 Tahun</option>
            <option value="30">30 Tahun</option>
        </select>
    </div>

    <div class="form-group">
        <label>Suku Bunga (% per Tahun)</label>
        <input type="text" value="5.3%" disabled>
    </div>

    <div class="result-box">
        <div class="result-item">
            <span>Pinjaman Pokok:</span>
            <span id="loanAmountDisplay">Rp 0</span>
        </div>
        <div class="result-item">
            <span>Angsuran / Bulan:</span>
            <span id="monthlyPaymentDisplay" class="monthly-payment">Rp 0</span>
        </div>
    </div>
</div>

<script>
    const homePriceInput = document.getElementById('homePrice');
    const dpInput = document.getElementById('downPayment');
    const tenureInput = document.getElementById('tenure');
    const dpError = document.getElementById('dpError');

    // Suku bunga tetap 5.3%
    const annualInterest = 0.053;

    function formatRupiah(number) {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            maximumFractionDigits: 0
        }).format(number);
    }

    function calculateKPR() {
        const price = parseFloat(homePriceInput.value) || 0;
        const dp = parseFloat(dpInput.value) || 0;
        const years = parseInt(tenureInput.value);
        
        const minDP = price * 0.05;

        // Validasi DP 5%
        if (dp < minDP && price > 0) {
            dpError.style.display = 'block';
            document.getElementById('monthlyPaymentDisplay').innerText = "DP Kurang";
            return;
        } else {
            dpError.style.display = 'none';
        }

        const loanPrincipal = price - dp;
        const monthlyInterest = annualInterest / 12;
        const numberOfPayments = years * 12;

        // Rumus Anuitas: P * (i * (1 + i)^n) / ((1 + i)^n - 1)
        let monthlyPayment = 0;
        if (loanPrincipal > 0) {
            monthlyPayment = loanPrincipal * (monthlyInterest * Math.pow(1 + monthlyInterest, numberOfPayments)) / 
                (Math.pow(1 + monthlyInterest, numberOfPayments) - 1);
        }

        // Tampilkan Hasil
        document.getElementById('loanAmountDisplay').innerText = formatRupiah(loanPrincipal);
        document.getElementById('monthlyPaymentDisplay').innerText = formatRupiah(monthlyPayment);
    }

    // Event Listeners untuk simulasi "Real-time/AJAX" feel
    [homePriceInput, dpInput, tenureInput].forEach(input => {
        input.addEventListener('input', calculateKPR);
    });

    // Inisialisasi DP default 5% saat halaman dimuat
    window.onload = () => {
        dpInput.value = homePriceInput.value * 0.05;
        calculateKPR();
    };
</script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

<!DOCTYPE html>

<head>

<title>Simulasi KPR Calculator</title>

<style>

:root {

--primary-color: #2c3e50;

--accent-color: #27ae60;

--bg-color: #f4f7f6;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: var(--bg-color);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

}

.container {

background: white;

padding: 2rem;

border-radius: 12px;

box-shadow: 0 10px 25px rgba(0,0,0,0.1);

width: 100%;

max-width: 450px;

}

h2 {

text-align: center;

color: var(--primary-color);

margin-bottom: 1.5rem;

}

.form-group {

margin-bottom: 1.2rem;

}

label {

display: block;

margin-bottom: 0.5rem;

font-weight: 600;

color: #555;

}

input, select {

width: 100%;

padding: 12px;

border: 2px solid #ddd;

border-radius: 6px;

box-sizing: border-box;

font-size: 1rem;

transition: border-color 0.3s;

}

input:focus {

border-color: var(--accent-color);

outline: none;

}

.result-box {

margin-top: 2rem;

padding: 1.5rem;

background: #e8f5e9;

border-radius: 8px;

border-left: 5px solid var(--accent-color);

}

.result-item {

display: flex;

justify-content: space-between;

margin-bottom: 0.8rem;

}

.result-item span:last-child {

font-weight: bold;

color: var(--primary-color);

}

.monthly-payment {

font-size: 1.4rem;

color: var(--accent-color) !important;

}

.error-msg {

color: #e74c3c;

font-size: 0.85rem;

margin-top: 0.3rem;

display: none;

}

</style>

</head>

<body>

<h2>Kalkulator KPR</h2>

<label>Harga Properti (Rp)</label>

</div>

<div id="dpError" class="error-msg">DP minimal adalah 5% dari harga jual!</div>

</div>

<label>Jangka Waktu (Tenor)</label>

<option value="5">5 Tahun</option>

<option value="10" selected>10 Tahun</option>

<option value="15">15 Tahun</option>

<option value="20">20 Tahun</option>

<option value="25">25 Tahun</option>

<option value="30">30 Tahun</option>

</select>

</div>

<label>Suku Bunga (% per Tahun)</label>

</div>

<span>Pinjaman Pokok:</span>

</div>

<span>Angsuran / Bulan:</span>

</div>

const homePriceInput = document.getElementById('homePrice');

const dpInput = document.getElementById('downPayment');

const tenureInput = document.getElementById('tenure');

const dpError = document.getElementById('dpError');

// Suku bunga tetap 5.3%

const annualInterest = 0.053;

function formatRupiah(number) {

return new Intl.NumberFormat('id-ID', {

style: 'currency',

currency: 'IDR',

maximumFractionDigits: 0

}).format(number);

}

function calculateKPR() {

const price = parseFloat(homePriceInput.value) || 0;

const dp = parseFloat(dpInput.value) || 0;

const years = parseInt(tenureInput.value);

const minDP = price * 0.05;

// Validasi DP 5%

if (dp < minDP && price > 0) {

dpError.style.display = 'block';

document.getElementById('monthlyPaymentDisplay').innerText = "DP Kurang";

return;

} else {

dpError.style.display = 'none';

}

const loanPrincipal = price - dp;

const monthlyInterest = annualInterest / 12;

const numberOfPayments = years * 12;

// Rumus Anuitas: P * (i * (1 + i)^n) / ((1 + i)^n - 1)

let monthlyPayment = 0;

if (loanPrincipal > 0) {

monthlyPayment = loanPrincipal * (monthlyInterest * Math.pow(1 + monthlyInterest, numberOfPayments)) /

(Math.pow(1 + monthlyInterest, numberOfPayments) - 1);

}

// Tampilkan Hasil

document.getElementById('loanAmountDisplay').innerText = formatRupiah(loanPrincipal);

document.getElementById('monthlyPaymentDisplay').innerText = formatRupiah(monthlyPayment);

}

// Event Listeners untuk simulasi "Real-time/AJAX" feel

[homePriceInput, dpInput, tenureInput].forEach(input => {

input.addEventListener('input', calculateKPR);

});

// Inisialisasi DP default 5% saat halaman dimuat

window.onload = () => {

dpInput.value = homePriceInput.value * 0.05;

calculateKPR();

};

</script>

</body>

</html>

Penjelasan Logika Matematika

Kalkulator ini menggunakan rumus Anuitas, yaitu sistem pembayaran tetap setiap bulan yang mencakup bunga dan pokok pinjaman.

A = P \times \frac{i(1+i)^n}{(1+i)^n - 1}

Di mana:

$A$ : Angsuran bulanan.
$P$ : Pokok Pinjaman (Harga Jual – DP).
$i$ : Suku bunga bulanan (Bunga Tahunan / 12).
$n$ : Jumlah bulan (Tenor Tahun * 12).

Cara Menggunakan:

Harga Properti: Masukkan total harga rumah.
DP (Down Payment): Masukkan jumlah uang muka. Sistem akan memberikan peringatan jika jumlahnya di bawah 5%.
Tenor: Pilih jangka waktu. Semakin lama jangka waktu, angsuran semakin ringan namun total bunga yang dibayar akan lebih besar.

Dibaca: 83

Fitur Kalkulator:

Kode Lengkap (HTML, CSS, JS)

Penjelasan Logika Matematika

Cara Menggunakan:

Jangan Lewatkan

Komentar

Recent Post