Güncel Projeler

Tek tıkla kopyalayabileceğiniz premium araçlar.

Kutu Oyunu

Dinamik Kızma Birader

3 ile 8 kişi arası matematiksel olarak kusursuz, A4 baskıya hazır harita yapıcı.

Web App

Tombala V3 Premium

Ses paketleri, kasa yönetimi ve mqtt ile cep telefonu kumandası entegre dev sistem.

Mini Araç • DEMO

Süper Yaş Hesaplayıcı

Açık kaynaklı, tek sayfa tıkır tıkır çalışan mini yaş analiz aracı. (Tıkla ve İncele)

Nasıl Yaptık? (Kamera Arkası)

Poligon Zinciri algoritmasını nasıl yazdık?

▶ 124 B İzlenme

Telefondan Tombala Yönetmek (IoT)

▶ 89 B İzlenme

⏳

Yaş Hesaplayıcı

HikmeLabs Mini Araçlar

Doğum Tarihiniz

Açık Kaynak Kodları

Bu aracı kendi projelerinize entegre etmek için aşağıdaki blokları kullanın.

tek_dosya_app.html (Kopyala & Masaüstünde Çalıştır)

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Mini Yaş Hesaplayıcı</title>
  <style>
    body { font-family: sans-serif; background: #f8fafc; display: flex; justify-content: center; padding-top: 50px; }
    .card { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 300px; }
    input { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; }
    button { width: 100%; padding: 12px; background: #0f172a; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
    #result { margin-top: 15px; display: none; background: #e0e7ff; padding: 10px; border-radius: 8px; text-align: center; color: #3730a3; font-weight: bold; }
  </style>
</head>
<body>

  <div class="card">
    <h3 style="margin-top:0;">Yaş Hesaplayıcı</h3>
    <input type="date" id="bday">
    <button onclick="calc()">Hesapla</button>
    <div id="result"></div>
  </div>

  <script>
    function calc() {
      const input = document.getElementById('bday').value;
      if(!input) return alert("Tarih seçin!");
      const bday = new Date(input);
      const today = new Date();
      let y = today.getFullYear() - bday.getFullYear();
      let m = today.getMonth() - bday.getMonth();
      let d = today.getDate() - bday.getDate();
      if (d < 0) { m--; const temp = new Date(today.getFullYear(), today.getMonth(), 0); d += temp.getDate(); }
      if (m < 0) { y--; m += 12; }
      document.getElementById('result').innerText = y + " Yıl, " + m + " Ay, " + d + " Gün";
      document.getElementById('result').style.display = 'block';
    }
  </script>
</body>
</html>

index.html

<div class="age-calculator">
  <h2>Yaş Hesapla</h2>
  <input type="date" id="bday">
  <button onclick="calc()">Hesapla</button>
  
  <div id="result" class="hidden">
    <span id="y"></span> Yıl
    <span id="m"></span> Ay
    <span id="d"></span> Gün
  </div>
</div>

<!-- Not: Tailwind sınıfları 
prototipte gösterilmemiştir. -->

style.css

.age-calculator {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hidden {
  display: none;
}

input[type="date"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

button {
  width: 100%;
  background: #0f172a;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  cursor: pointer;
}

app.js

function calc() {
  const input = document.getElementById('bday').value;
  if(!input) return alert("Tarih seçin!");

  const bday = new Date(input);
  const today = new Date();
  
  let y = today.getFullYear() - bday.getFullYear();
  let m = today.getMonth() - bday.getMonth();
  let d = today.getDate() - bday.getDate();

  if (d < 0) {
    m--;
    const temp = new Date(today.getFullYear(), today.getMonth(), 0);
    d += temp.getDate();
  }
  if (m < 0) {
    y--;
    m += 12;
  }

  document.getElementById('y').innerText = y;
  document.getElementById('m').innerText = m;
  document.getElementById('d').innerText = d;
  document.getElementById('result').classList.remove('hidden');
}