<!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
htmlden anlayanlar için çok basit bir işlem
6
●172
- 14-04-2023, 00:28:43
Üyeliği durduruldu[B]text-align:right;[/B]
kullanıp denermisiniz - 14-04-2023, 00:29:10jsfiddle ya da codepen linki verir misin hocam, ya da bi demo linki
- 14-04-2023, 00:36:18hocam tam olarak nereye yapıştırıcamgturkmen222 adlı üyeden alıntı: mesajı görüntüle
- 14-04-2023, 00:38:07burda sonuçlar zaten yanda hocam. Ancak css'te main'e flex-direction vererek yerlerini alta ya da yana alabilirsiniz.erentalayy adlı üyeden alıntı: mesajı görüntüle
- 14-04-2023, 00:41:55evet burda bende yanda görüyorum ama wordpress özel html olarak yaptım mı alta alıyorHaktan adlı üyeden alıntı: mesajı görüntüle
