Simulasi Kredit Sederhana dengan HTML dan JavaScript

Table of contents

Simulasi Kredit Sederhana dengan HTML dan JavaScript - Simulasi kredit adalah aplikasi kecil yang memungkinkan pengguna menghitung jumlah cicilan bulanan berdasarkan jumlah pinjaman, suku bunga, dan tenor. Berikut adalah langkah-langkah untuk membuat simulasi kredit sederhana menggunakan HTML dan JavaScript.

Membuat Struktur HTML

HTML digunakan untuk membangun antarmuka pengguna. Berikut adalah contoh struktur sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulasi Kredit</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        .result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Simulasi Kredit</h2>
        <label for="amount">Jumlah Pinjaman (Rp):</label>
        <input type="number" id="amount" placeholder="Contoh: 5000000">

        <label for="rate">Suku Bunga (% per tahun):</label>
        <input type="number" id="rate" placeholder="Contoh: 5">

        <label for="tenor">Tenor (bulan):</label>
        <input type="number" id="tenor" placeholder="Contoh: 12">

        <button onclick="calculateInstallment()">Hitung Cicilan</button>

        <div class="result" id="result"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Menambahkan Logika dengan JavaScript

Logika untuk menghitung cicilan ditambahkan melalui file JavaScript. Berikut adalah kode JavaScript-nya:

function calculateInstallment() {
    // Ambil nilai input dari pengguna
    const amount = parseFloat(document.getElementById("amount").value);
    const rate = parseFloat(document.getElementById("rate").value) / 100 / 12; // Konversi ke per bulan
    const tenor = parseInt(document.getElementById("tenor").value);

    // Validasi input
    if (isNaN(amount) || isNaN(rate) || isNaN(tenor) || amount <= 0 || rate <= 0 || tenor <= 0) {
        document.getElementById("result").innerHTML = "Mohon masukkan nilai yang valid!";
        return;
    }

    // Rumus cicilan bulanan (annuitas)
    const installment = (amount * rate) / (1 - Math.pow(1 + rate, -tenor));

    // Tampilkan hasil
    document.getElementById("result").innerHTML = 
        `Cicilan Bulanan: Rp ${installment.toFixed(2).toLocaleString()}`;
}

Penjelasan Logika

Input Validasi

Pastikan nilai yang dimasukkan adalah angka valid dan lebih besar dari nol.

Rumus Perhitungan

Formula annuitas digunakan untuk menghitung cicilan bulanan:

Rumus Anuitas

Hasil Ditampilkan

Hasil cicilan bulanan akan ditampilkan di bawah tombol "Hitung Cicilan."

Cara Menjalankan

Salin kode di atas ke dalam dua file: index.html dan script.js.

Buka file index.html di browser Anda.

Masukkan jumlah pinjaman, suku bunga, dan tenor, lalu klik tombol Hitung Cicilan untuk melihat hasilnya.

Dengan langkah ini, Anda berhasil membuat simulasi kredit sederhana menggunakan HTML dan JavaScript! Anda dapat mengembangkan lebih lanjut dengan menambahkan validasi lebih kompleks atau desain antarmuka yang lebih menarik.