Merhaba arkadaşlar,
Sizlere günlük hayatta sıkça ihtiyaç duyulan bir KDV hesaplama aracını paylaşıyorum. Bu araç, hem modern bir tasarıma hem de pratik kullanım özelliklerine sahip. HTML, CSS ve JavaScript kullanılarak geliştirilmiş bu aracı kendi projelerinizde rahatlıkla kullanabilirsiniz.
Özellikler:
- Net Tutar, KDV Oranı ve Brüt Tutar Hesaplama:
- KDV oranı seçim kutusuyla ayarlanabilir (örn. %18, %10, %1).
- Net tutar girişi ile birlikte KDV tutarı ve toplam brüt tutar anında hesaplanır.
- KDV Dahil/Dahil Değil Modları:
- KDV dahil bir fiyat girdiğinizde KDV ve net tutarı hesaplayabilirsiniz.
- Kopyalama Fonksiyonu:
- Hesaplama sonucunda "Net Tutar", "KDV" ve "Brüt Tutar" değerlerinin üzerine tıklayarak ilgili bilgiyi kopyalayabilirsiniz.
- Kopyalama işlemi tamamlandığında ekranın alt kısmında kısa süreli bir "Kopyalandı!" bildirimi görüntülenir.
- Modern ve Duyarlı Tasarım:
- Göz yormayan karanlık tema.
- Tüm cihazlarda uyumlu (mobil, tablet ve masaüstü).
- TL Yazısı Yerine ₺ Simgesi:
- Tüm para birimi değerlerinde "₺" sembolü kullanıldı.
Nasıl Kullanılır?
Aşağıdaki kodu bir HTML dosyasına yapıştırarak tarayıcınızda çalıştırabilirsiniz. Kendi projelerinizde kullanmak için istediğiniz gibi özelleştirebilirsiniz.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KDV Hesaplama</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
background-color: #242424;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 450px;
text-align: center;
}
h1 {
color: #fff;
margin-bottom: 20px;
font-size: 32px;
font-weight: 700;
}
p {
font-size: 16px;
color: #bbb;
margin-bottom: 20px;
}
input[type="text"], select {
padding: 12px;
font-size: 16px;
border: 2px solid #333;
border-radius: 8px;
width: 100%;
background-color: #2d2d2d;
color: #fff;
outline: none;
margin-bottom: 16px;
transition: all 0.3s;
}
input[type="text"]:focus, select:focus {
border-color: #9a5ff4;
}
button {
background-color: #9a5ff4;
color: white;
padding: 14px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
transition: all 0.3s;
}
button:hover {
background-color: #7a4ff4;
}
.checkbox-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.checkbox-container input[type="checkbox"] {
display: none;
}
.checkbox-label {
position: relative;
display: inline-block;
width: 40px;
height: 24px;
background-color: #333;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
}
.checkbox-label:before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
input[type="checkbox"]:checked + .checkbox-label {
background-color: #9a5ff4;
}
input[type="checkbox"]:checked + .checkbox-label:before {
transform: translateX(16px);
}
.checkbox-container span {
color: #bbb;
font-size: 14px;
margin-left: 10px;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #fff;
background-color: #6a3ed7;
padding: 10px;
border-radius: 8px;
text-align: left;
}
.result p {
margin: 5px 0;
cursor: pointer;
}
.notification {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #4caf50;
color: white;
padding: 10px 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
display: none;
z-index: 1000;
}
@media (max-width: 600px) {
.container {
padding: 30px;
}
h1 {
font-size: 28px;
}
.result {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>KDV Hesaplama</h1>
<p>Lütfen aşağıdaki bilgileri girin:</p>
<form id="vatForm">
<input type="text" id="netAmount" placeholder="Net Tutar (TL)" required>
<label for="vatRate">KDV Oranı:</label>
<select id="vatRate" name="vatRate">
<option value="18">Eşya ve Diğer (%18)</option>
<option value="10">Gıda (%10)</option>
<option value="1">Tarım Ürünleri (%1)</option>
</select>
<div class="checkbox-container">
<input type="checkbox" id="isVatIncluded">
<label for="isVatIncluded" class="checkbox-label"></label>
<span>KDV Dahil Fiyat</span>
</div>
<button type="submit">KDV'yi Hesapla</button>
</form>
<div id="result" class="result" style="display: none;"></div>
</div>
<div id="notification" class="notification"></div>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
const notification = document.getElementById("notification");
notification.innerText = "Kopyalandı!";
notification.style.display = "block";
setTimeout(() => {
notification.style.display = "none";
}, 2000);
});
}
document.getElementById("vatForm").addEventListener("submit", function(event) {
event.preventDefault();
let netAmount = parseFloat(document.getElementById("netAmount").value.trim().replace(",", "."));
const vatRate = parseFloat(document.getElementById("vatRate").value);
const isVatIncluded = document.getElementById("isVatIncluded").checked;
if (!isNaN(netAmount) && netAmount > 0) {
let kdvTutar, brutTutar;
if (isVatIncluded) {
brutTutar = netAmount;
kdvTutar = (brutTutar * vatRate) / (100 + vatRate);
netAmount = brutTutar - kdvTutar;
} else {
kdvTutar = (netAmount * vatRate) / 100;
brutTutar = netAmount + kdvTutar;
}
document.getElementById("result").style.display = "block";
document.getElementById("result").innerHTML = `
<p onclick="copyToClipboard('${netAmount.toFixed(2)} ₺')"><strong>Net Tutar:</strong> ${netAmount.toFixed(2)} ₺</p>
<p onclick="copyToClipboard('${kdvTutar.toFixed(2)} ₺')"><strong>KDV (%${vatRate}):</strong> ${kdvTutar.toFixed(2)} ₺</p>
<p onclick="copyToClipboard('${brutTutar.toFixed(2)} ₺')"><strong>Brüt Tutar:</strong> ${brutTutar.toFixed(2)} ₺</p>
`;
} else {
alert("Lütfen geçerli bir net tutar girin.");
}
});
</script>
</body>
</html>