<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Araç Kredisi Hesaplama</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
h1 {
margin: 0;
font-size: 2rem;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1rem;
}
form {
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 1rem;
margin: 1rem;
width: 320px;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input[type="number"],
select {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 1rem;
padding: 0.5rem;
width: 100%;
}
input[type="range"] {
width: 100%;
}
button {
background-color: #333;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
margin-top: 1rem;
width: 100%;
}
table {
border-collapse: collapse;
margin: 1rem;
width: calc(100% - 2rem);
}
th,
td {
border: 1px solid #ccc;
padding: 0.5rem;
text-align: center;
}
th {
background-color: #f1f1f1;
}
#taksitler {
display: none;
margin: 1rem;
}
#taksitler h2 {
margin-top: 0;
}
#taksitler table {
margin: 0;
width: 100%;
}
#taksitler td:last-child {
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Araç Kredisi Hesaplama</h1>
</header>
<main>
<form>
<label for="tutar">Araç Tutarı:</label>
<input type="number" id="tutar" required>
<label for="pesinat">Peşinat Tutarı:</label>
<input type="number" id="pesinat" value="0">
<label for="vade">Vade:</label>
<select id="vade" required>
<option value="12">12 Ay</option>
<option value="24">24 Ay</option>
<option value="36">36 Ay</option>
<option value="48">48 Ay</option>
<option value="60">60 Ay</option>
</select>
<label for="faiz">Faiz Oranı:</label>
<input type="range" id="faiz" min="0" max="10" step="0.01" value="1">
<span id="faiz-deger"></span>
<button type="button" onclick="hesapla()">Hesapla</button>
</form>
<div id="taksitler">
<h2>Aylık Taksitler</h2>
<table>
<thead>
<tr>
<th>Taksit No</th>
<th>Taksit Tutarı</th>
<th>Anapara Tutarı</th>
<th>Faiz Tutarı</th>
<th>Kalan Borç</th>
</tr>
</thead>
<tbody id="taksitler-tablo"></tbody>
<tfoot>
<tr>
<td colspan="5">Toplam Tutar: <span id="toplam-tutar"></span></td>
</tr>
</tfoot>
</table>
</div>
</main>
<script>
const tutarInput = document.getElementById("tutar");
const pesinatInput = document.getElementById("pesinat");
const vadeSelect = document.getElementById("vade");
const faizRange = document.getElementById("faiz");
const faizDeger = document.getElementById("faiz-deger");
const taksitlerDiv = document.getElementById("taksitler");
const taksitlerTablo = document.getElementById("taksitler-tablo");
const toplamTutarSpan = document.getElementById("toplam-tutar");

// Faiz değeri slider'ı değiştiğinde güncelleniyor
faizRange.addEventListener("input", () => {
faizDeger.textContent = faizRange.value + " %";
});

function hesapla() {
// Girdiler alınıyor
const tutar = parseFloat(tutarInput.value);
const pesinat = parseFloat(pesinatInput.value);
const vade = parseInt(vadeSelect.value);
const faizOrani = parseFloat(faizRange.value);

// Kredi tutarı hesaplanıyor
const krediTutari = tutar - pesinat;

// Aylık faiz oranı hesaplanıyor
const aylikFaizOrani = faizOrani / 100 / 12;

// Aylık taksit tutarı hesaplanıyor
const aylikTaksitTutari = krediTutari * aylikFaizOrani * Math.pow(1 + aylikFaizOrani, vade) / (Math.pow(1 + aylikFaizOrani, vade) - 1);

// Toplam geri ödeme hesaplanıyor
const toplamTutar = aylikTaksitTutari * vade;

// Taksit tablosu oluşturuluyor
let kalanBorc = krediTutari;
taksitlerTablo.innerHTML = "";
for (let i = 1; i <= vade; i++) {
// Taksit detayları hesaplanıyor
const faizTutari = kalanBorc * aylikFaizOrani;
const anaparaTutari = aylikTaksitTutari - faizTutari;
kalanBorc -= anaparaTutari;
const taksitTutari = aylikTaksitTutari + (i === vade ? kalanBorc : 0);

// Taksit satırı oluşturuluyor
const tr = document.createElement("tr");
const tdNo = document.createElement("td");
tdNo.textContent = i;
tr.appendChild(tdNo);
const tdTaksitTutari = document.createElement("td");
tdTaksitTutari.textContent = taksitTutari.toFixed(2);
tr.appendChild(tdTaksitTutari);
const tdAnaparaTutari = document.createElement("td");
tdAnaparaTutari.textContent = anaparaTutari.toFixed(2);
tr.appendChild(tdAnaparaTutari);
const tdFaizTutari = document.createElement("td");
tdFaizTutari.textContent = faizTutari.toFixed(2);
tr.appendChild(tdFaizTutari);
const tdKalanBorc = document.createElement("td");
tdKalanBorc.textContent = kalanBorc.toFixed(2);
tr.appendChild(tdKalanBorc);
taksitlerTablo.appendChild(tr);
}

// Toplam tutar ve taksitler div'i görünür yapılıyor
toplamTutarSpan.textContent = toplamTutar.toFixed(2);
taksitlerDiv.style.display = "block";
}
</script>
<body>
<!-- Arac Kredisi Hesaplama Formu -->
<div class="form-container">
<form id="krediFormu" onsubmit="hesapla()">
<!-- Form başlığı -->
<h2>Arac Kredisi Hesaplama</h2>
<!-- Kredi tutarı -->
<div class="form-element">
<label for="krediTutari">Kredi Tutarı:</label>
<input type="number" id="krediTutari" name="krediTutari" required>
</div>
<!-- Peşinat tutarı -->
<div class="form-element">
<label for="pesinatTutari">Peşinat Tutarı:</label>
<input type="number" id="pesinatTutari" name="pesinatTutari" required>
</div>
<!-- Vade seçenekleri -->
<div class="form-element">
<label for="vade">Vade:</label>
<select id="vade" name="vade">
<option value="12">12 Ay</option>
<option value="24">24 Ay</option>
<option value="36">36 Ay</option>
<option value="48">48 Ay</option>
<option value="60">60 Ay</option>
</select>
</div>
<!-- Hesapla düğmesi -->
<div class="form-element">
<button type="submit">Hesapla</button>
</div>
</form>
</div>

<!-- Taksitler Tablosu -->
<div class="table-container">
<table id="taksitlerTablosu">
<thead>
<tr>
<th>Taksit No</th>
<th>Taksit Tutarı</th>
<th>Anapara Tutarı</th>
<th>Faiz Tutarı</th>
<th>Kalan Borç</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<!-- Toplam Tutar ve Taksitler -->
<div class="taksitler-container">
<div>
<span>Toplam Tutar:</span>
<span id="toplamTutarSpan"></span>
</div>
<div id="taksitlerDiv2" style="display: none;"></div>
</div>

<!-- JavaScript Kodları -->
<script>
function hesapla() {
// Form verileri alınıyor
const krediTutari = parseFloat(document.getElementById("krediTutari"). value);
const pesinatTutari = parseFloat(document.getElementById("pesinatTutari" ).value);
const vade = parseInt(document.getElementById


</html>



Arkadaşlar bu kodu wordpresste html olarak çalıştırdım mı sıkıntısız çalışıyor ama sonuçları alt tarafta gösteriyor benim isteğim ise yan tarafta göstermesi bilenlerin yardımcı olmasını rica ederim.
İyi Forumlar