Merhaba arkadaşlar,
Bugün sizlerle doğduğunuz tarihten bugüne kadar kaç gün geçtiğini hesaplayan küçük ve modern bir uygulama paylaşmak istiyorum. HTML, CSS ve JavaScript kullanarak basit ama şık bir tasarımla geliştirdim. Tek yapmanız gereken doğum tarihinizi seçmek ve "Hesapla" butonuna tıklamak. Ardından geçen gün sayısını hemen görebileceksiniz.
Bugün sizlerle doğduğunuz tarihten bugüne kadar kaç gün geçtiğini hesaplayan küçük ve modern bir uygulama paylaşmak istiyorum. HTML, CSS ve JavaScript kullanarak basit ama şık bir tasarımla geliştirdim. Tek yapmanız gereken doğum tarihinizi seçmek ve "Hesapla" butonuna tıklamak. Ardından geçen gün sayısını hemen görebileceksiniz.
Özellikler:
- Modern ve sade bir arayüz
- Kolay kullanım
- HTML, CSS ve JavaScript ile hazırlanmış
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
Telif Hakkı © 2024 Hamza. Tüm hakları saklıdır.
Bu kod Hamza tarafından geliştirilmiştir ve izinsiz kopyalanamaz, dağıtılamaz veya değiştirilemez.
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #6E45E2, #88D3CE);
color: #333;
}
.container {
background-color: #fff;
padding: 40px 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-align: center;
max-width: 340px;
width: 100%;
}
h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
color: #4B4B4B;
}
input[type="date"] {
padding: 12px;
font-size: 16px;
width: 100%;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 15px;
outline: none;
transition: all 0.3s ease;
}
input[type="date"]:focus {
border-color: #6E45E2;
}
button {
padding: 12px;
font-size: 16px;
color: white;
background-color: #6E45E2;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #5A38C4;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: 500;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>Gün Hesaplama</h2>
<input type="date" id="birthdate" />
<button onclick="calculateDays()">Hesapla</button>
<div class="result" id="result"></div>
</div>
<script>
function calculateDays() {
const birthdate = document.getElementById('birthdate').value;
if (!birthdate) {
alert("Lütfen doğum tarihinizi seçin.");
return;
}
const birthDateObj = new Date(birthdate);
const today = new Date();
const timeDifference = today - birthDateObj;
const daysPassed = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
document.getElementById('result').innerText = `Bugüne kadar ${daysPassed} gün geçmiş.`;
}
</script>
</body>
</html>
