Javascript İle Kredi Hesaplama İşlemi

Javascript ile kredi hesaplama işlemini gerçekleştireceğiz. Bu işlem için ilk olarak bir html formu oluşturacağız. Sonrasında bu formun daha güzel görünümde olması için css kodlarını ekleyeceğiz. Ardından javascript kodlarını ekleyip, kredi hesaplama işlemini sağlayacağız.

Hazırlayacağımız uygulamada, Kredi Hesaplama Formu ve Kredi Ödeme Tablosu bölümleri olacaktır. Bu bölümlerin son haline aşağıdaki görsellerden ulaşabilirsiniz.

HTML Kodları

Bu bölümde, kullanıcıdan alınacak olan bilgilerin yer aldığı formu oluşturacağız. Buna ek olarak, ödeme tablosunun da oluşturulması için bir table tanımlaması da yapacağız.

<div class="kredi">

    <h1>Kredi Hesaplama Formu</h1>

    <label>Kredi Miktarı:</label>
    <input type="number" id="kredi-miktari" />

    <label>Yıllık Faiz Oranı:</label>
    <input type="number" id="faiz-orani" />

    <label>Vade:</label>
    <input type="number" id="vade" />

    <button type="button" onclick="hesapla()">Hesapla</button>

    <div class="sonuc">
        <h1>Kredi Ödeme Tablosu</h1>
        <table>
            <thead>
                <tr>
                    <th>Taksit</th>
                    <th>Ödeme Tarihi</th>
                    <th>Ana Para</th>
                    <th>Faiz</th>
                    <th>Taksit Tutarı</th>
                </tr>
            </thead>
            <tbody id="odeme-tablosu"></tbody>
        </table>
    </div>
</div>

Bu kodlarla birlikte, kullanıcıdan kredi miktarını, yıllık faiz oranını ve vade değerlerini alıyoruz. Aldığımız bu bilgileri hesapla() fonksiyonuna gönderip gerekli işlemleri yaparak kredi ödeme tablosuna yazdırılmasını sağlıyoruz. Tabi hemen hesap kitap işlemine geçmiyoruz. Öncelikle css kodlarıyla formun daha güzel görünmesini sağlayalım.

CSS Kodları

Bu bölümde, form bilgilerini ve table yapısını daha iyi bir görünüme getiriyoruz. Hemen kodlara geçelim.

div.kredi{width: 600px; margin: 50px auto}
label{display: block; font: 16px Arial, Helvetica, sans-serif;margin-bottom:5px}
input{border:1px solid #ddd; padding: 8px;margin-bottom:10px;width: 100%;}
button{display: block; padding: 12px 8px; border:1px solid #ddd;width: 100%;font-weight: bold;font-size:16px;cursor: pointer}
table{border-collapse: collapse;margin-top: 20px;width: 100%;font: 16px Arial, Helvetica, sans-serif;}
th,td{padding: 10px;border: 1px solid #ddd;text-align: center}
thead{background-color: #f2f2f2}
th{font-weight:bold}
.sonuc{display: none;}

Bunuda aradan çıkarttığımıza göre, şimdi asıl kodlama bölümüne geçelim.

JAVASCRIPT Kodları

Burada hesapla() isminde bir fonksiyon oluşturuyoruz. Bu fonksiyon ile kredi miktarını, faiz oranını ve vade değerini alıyoruz. Bu bilgiler kullanıcının formda doldurmuş olduğu değerlerdir. Bilgileri aldıktan sonra hesaplama işlemine geçiyoruz.

Kredi Hesaplama İşlemi

Burada, aylik faiz oranı hesaplanır. Ardından, ayrık taksit durumunun bulunması için bir matematiksel işlem yapılmaktadır. Aylık taksit miktarı, faiz oranına göre hesaplanmaktadır.

Tabloya Aktarılması

Hesaplama değerlerinin tabloya aktarılması için for döngüsüyle birlikte, vade değeri kadar bir işlem yapıyoruz. Burada, kalan borcu, ödenecek faiz oranını ve ödenecek ana para hesaplaması yapıyoruz. Ardından hesaplanan değerleri ilgili sütunlara ekleyerek tabloya ekliyoruz.

function hesapla() {
  // Formdan girdileri alın
  var krediMiktari      = document.getElementById("kredi-miktari").value;
  var faizOrani         = document.getElementById("faiz-orani").value;
  var vade              = document.getElementById("vade").value;
  var sonuc             = document.getElementsByClassName("sonuc")[0];

  // Hesaplama işlemleri
  var aylikFaizOrani    = faizOrani / 100 / 12;
  var aylikTaksit       = (krediMiktari * aylikFaizOrani) / (1 - Math.pow(1 + aylikFaizOrani, -vade));
  var toplamOdeme       = aylikTaksit * vade;

  var toplamSatir                   = document.createElement("tr");
  var toplamHucresi                 = document.createElement("td");
  toplamHucresi.colSpan             = "4";
  toplamHucresi.textContent         = "Toplam";
  var toplamTutarHucresi            = document.createElement("td");
  toplamTutarHucresi.textContent    = toplamOdeme.toFixed(2) + " TL";

  // Sonuçları görüntüleyin
  var odemeTablosu          = document.getElementById("odeme-tablosu");
  odemeTablosu.innerHTML    = "";

  for (var i = 1; i <= vade; i++) {
    var kalanBorc       = krediMiktari - (aylikTaksit * (i - 1));
    var odenecekFaiz    = kalanBorc * aylikFaizOrani;
    var odenecekAnaPara = aylikTaksit - odenecekFaiz;

    var odemeTarihi     = new Date();
    odemeTarihi.setMonth(odemeTarihi.getMonth() + i);

    var tr              = document.createElement("tr");
    var tdTaksitNo      = document.createElement("td");
    var tdOdemeTarihi   = document.createElement("td");
    var tdAnaPara       = document.createElement("td");
    var tdFaiz          = document.createElement("td");
    var tdTaksitTutari  = document.createElement("td");

    tdTaksitNo.textContent      = i;
    tdOdemeTarihi.textContent   = odemeTarihi.toLocaleDateString();
    tdAnaPara.textContent       = odenecekAnaPara.toFixed(2);
    tdFaiz.textContent          = odenecekFaiz.toFixed(2);
    tdTaksitTutari.textContent  = aylikTaksit.toFixed(2);

    tr.appendChild(tdTaksitNo);
    tr.appendChild(tdOdemeTarihi);
    tr.appendChild(tdAnaPara);
    tr.appendChild(tdFaiz);
    tr.appendChild(tdTaksitTutari);

    odemeTablosu.appendChild(tr);
  }

  toplamSatir.appendChild(toplamHucresi);
  toplamSatir.appendChild(toplamTutarHucresi);
  odemeTablosu.appendChild(toplamSatir);
  sonuc.style.display = "block";

}

Hesaplama işlemlerinin sonucunda, yine javascript kullanarak tabloya ekleme işlemini gerçekleştiriyoruz. Oluşturulan tablonun en sonuna da, faizle birlikte toplam geri ödeme tutarını da ekliyoruz. Böylelikle belirlenen tutar, faiz ve vade oranına göre ne kadarlık bir artışta geri ödeme yapılacağını tespit etmiş oluyoruz.

Kodların Tamamı

Aradığım bir koddu bu, hemen kopyalayıp çalıştırmak istiyorum, detaylı bir şekilde anlamak istemiyorum diyorsanız buyurun kodlar,

<div class="kredi">

    <h1>Kredi Hesaplama Formu</h1>

    <label>Kredi Miktarı:</label>
    <input type="number" id="kredi-miktari" />

    <label>Yıllık Faiz Oranı:</label>
    <input type="number" id="faiz-orani" />

    <label>Vade:</label>
    <input type="number" id="vade" />

    <button type="button" onclick="hesapla()">Hesapla</button>

    <div class="sonuc">
        <h1>Kredi Ödeme Tablosu</h1>
        <table>
            <thead>
                <tr>
                    <th>Taksit</th>
                    <th>Ödeme Tarihi</th>
                    <th>Ana Para</th>
                    <th>Faiz</th>
                    <th>Taksit Tutarı</th>
                </tr>
            </thead>
            <tbody id="odeme-tablosu"></tbody>
        </table>
    </div>
</div>

<style>
div.kredi{width: 600px; margin: 50px auto}
label{display: block; font: 16px Arial, Helvetica, sans-serif;margin-bottom:5px}
input{border:1px solid #ddd; padding: 8px;margin-bottom:10px;width: 100%;}
button{display: block; padding: 12px 8px; border:1px solid #ddd;width: 100%;font-weight: bold;font-size:16px;cursor: pointer}
table{border-collapse: collapse;margin-top: 20px;width: 100%;font: 16px Arial, Helvetica, sans-serif;}
th,td{padding: 10px;border: 1px solid #ddd;text-align: center}
thead{background-color: #f2f2f2}
th{font-weight:bold}
.sonuc{display: none;}
</style>

<script>
function hesapla() {
  // Formdan girdileri alın
  var krediMiktari      = document.getElementById("kredi-miktari").value;
  var faizOrani         = document.getElementById("faiz-orani").value;
  var vade              = document.getElementById("vade").value;
  var sonuc             = document.getElementsByClassName("sonuc")[0];

  // Hesaplama işlemleri
  var aylikFaizOrani    = faizOrani / 100 / 12;
  var aylikTaksit       = (krediMiktari * aylikFaizOrani) / (1 - Math.pow(1 + aylikFaizOrani, -vade));
  var toplamOdeme       = aylikTaksit * vade;

  var toplamSatir                   = document.createElement("tr");
  var toplamHucresi                 = document.createElement("td");
  toplamHucresi.colSpan             = "4";
  toplamHucresi.textContent         = "Toplam";
  var toplamTutarHucresi            = document.createElement("td");
  toplamTutarHucresi.textContent    = toplamOdeme.toFixed(2) + " TL";

  // Sonuçları görüntüleyin
  var odemeTablosu          = document.getElementById("odeme-tablosu");
  odemeTablosu.innerHTML    = "";

  for (var i = 1; i <= vade; i++) {
    var kalanBorc       = krediMiktari - (aylikTaksit * (i - 1));
    var odenecekFaiz    = kalanBorc * aylikFaizOrani;
    var odenecekAnaPara = aylikTaksit - odenecekFaiz;

    var odemeTarihi     = new Date();
    odemeTarihi.setMonth(odemeTarihi.getMonth() + i);

    var tr              = document.createElement("tr");
    var tdTaksitNo      = document.createElement("td");
    var tdOdemeTarihi   = document.createElement("td");
    var tdAnaPara       = document.createElement("td");
    var tdFaiz          = document.createElement("td");
    var tdTaksitTutari  = document.createElement("td");

    tdTaksitNo.textContent      = i;
    tdOdemeTarihi.textContent   = odemeTarihi.toLocaleDateString();
    tdAnaPara.textContent       = odenecekAnaPara.toFixed(2);
    tdFaiz.textContent          = odenecekFaiz.toFixed(2);
    tdTaksitTutari.textContent  = aylikTaksit.toFixed(2);

    tr.appendChild(tdTaksitNo);
    tr.appendChild(tdOdemeTarihi);
    tr.appendChild(tdAnaPara);
    tr.appendChild(tdFaiz);
    tr.appendChild(tdTaksitTutari);

    odemeTablosu.appendChild(tr);
  }

  toplamSatir.appendChild(toplamHucresi);
  toplamSatir.appendChild(toplamTutarHucresi);
  odemeTablosu.appendChild(toplamSatir);
  sonuc.style.display = "block";

}
</script>

Bu şekilde örneği tamamlamış oluyoruz. Hesaplama işlemlerinde gerekli düzenlemeler yaparak farklı işlevsellikler kazandırabilirsiniz.