HTML Code के साथ खुद का Age Calculator App बनाएं – पूरी जानकारी और Live Tool

TechCraft4u जुलाई 10, 2025

खुद का Age Calculator 

Application

 बनाएं – HTML Code के साथ



यह पोस्ट क्यों खास है?

अगर आप भी चाहते हैं कि आपकी खुद की एक छोटी वेब एप्लिकेशन या टूल हो, जिसे आप अपनी वेबसाइट, ब्लॉग या प्रोजेक्ट में जोड़ सकें —
तो इस पोस्ट में मैं आपको वही Code दे रहा हूँ, जो मैंने खुद तैयार किया है।

इस HTML Code की मदद से आप एक ऐसा Age Calculator बना सकते हैं, जो किसी भी इंसान की उम्र को साल, महीने, हफ्ते, दिन, घंटे, मिनट और सेकंड में दिखाता है।


यह Code आपके लिए क्या करेगा?

यह कोई copied या ready-made code नहीं है — यह original HTML, CSS और JavaScript का एक सिंपल लेकिन पावरफुल टुकड़ा है।
इस code से आप:

अपनी खुद की Age Calculator Website बना सकते हैं

Blogger या WordPress ब्लॉग में एक इंटरैक्टिव टूल जोड़ सकते हैं

एक अच्छा सा Frontend project तैयार कर सकते हैं

या इसे अपने Resume में एक Web Project के रूप में दिखा सकते हैं

Code को Blogger Post में कैसे Paste करें?


✍️ Step-by-Step तरीका:

1. Blogger में अपनी पोस्ट लिखते समय ऊपर से "✏️ HTML" पर क्लिक करें


2. अब जहाँ आप code दिखाना चाहते हैं, वहाँ नीचे दिए गए code को paste करें


3. HTML View से वापस "Compose" मोड में जाएँ — आप देखेंगे कि आपका टूल वहाँ दिखाई देगा


4. अब पोस्ट को "Preview" करें और फिर "Publish" कर दें



full code copy 👇👇

 
 
<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>उम्र कैलकुलेटर</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #e0f7fa, #ffffff);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .app-wrapper {
      background: #ffffff;
      padding: 25px 20px;
      border-radius: 16px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 100%;
    }

    .app-wrapper h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #00796b;
      font-size: 22px;
    }

    label {
      display: block;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
      font-size: 16px;
    }

    input[type="date"] {
      width: 100%;
      padding: 12px;
      border: 2px solid #00acc1;
      border-radius: 10px;
      font-size: 16px;
      outline: none;
      margin-bottom: 20px;
    }

    .btn {
      width: 100%;
      padding: 12px;
      background: #00acc1;
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background: #00838f;
    }

    .result-box {
      margin-top: 20px;
      background: #e0f2f1;
      padding: 15px;
      border-radius: 10px;
      font-size: 15px;
      color: #004d40;
      font-weight: 500;
      line-height: 1.6;
      display: none;
    }

    @media (max-width: 480px) {
      .app-wrapper {
        margin: 20px;
        padding: 20px 15px;
      }

      .app-wrapper h2 {
        font-size: 20px;
      }

      input[type="date"],
      .btn {
        font-size: 15px;
      }

      .result-box {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

<div class="app-wrapper">
  <h2>अपनी उम्र जानें</h2>
  <label for="dob">जन्मतिथि चुनें:</label>
  <input type="date" id="dob" max="" />

  <button class="btn" onclick="calculateAge()">गणना करें</button>

  <div class="result-box" id="resultSection"></div>
</div>

<script>
  document.getElementById('dob').max = new Date().toISOString().split('T')[0];

  function calculateAge() {
    const dobInput = document.getElementById('dob').value;
    if (!dobInput) {
      alert('कृपया अपनी जन्मतिथि चुनें।');
      return;
    }

    const dob = new Date(dobInput);
    const now = new Date();

    if (dob > now) {
      alert('भविष्य की जन्मतिथि मान्य नहीं है।');
      return;
    }

    let diffMs = now - dob;

    const years = Math.floor(diffMs / (1000 * 60 * 60 * 24 * 365.25));
    diffMs -= years * (1000 * 60 * 60 * 24 * 365.25);

    const months = Math.floor(diffMs / (1000 * 60 * 60 * 24 * 30.44));
    diffMs -= months * (1000 * 60 * 60 * 24 * 30.44);

    const weeks = Math.floor(diffMs / (1000 * 60 * 60 * 24 * 7));
    diffMs -= weeks * (1000 * 60 * 60 * 24 * 7);

    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    diffMs -= days * (1000 * 60 * 60 * 24);

const hours = Math.floor(diffMs / (1000 * 60 * 60));
    diffMs -= hours * (1000 * 60 * 60);

    const minutes = Math.floor(diffMs / (1000 * 60));
    diffMs -= minutes * (1000 * 60);

    const seconds = Math.floor(diffMs / 1000);

    const result =
      'आपकी उम्र है: ' + years + ' वर्ष, ' + months + ' महीने, ' + weeks + ' हफ्ते, ' +
      days + ' दिन, ' + hours + ' घंटे, ' + minutes + ' मिनट, और ' + seconds + ' सेकंड।';

    const resultBox = document.getElementById('resultSection');
    resultBox.innerHTML = result;
    resultBox.style.display = 'block';
  }
</script>

</body>
</html>

💡इस Code से क्या-क्या बना सकते हैं?


📱 Personal Age Calculator Tool

🧮 किसी वेबसाइट का छोटा Calculator Feature

🎓 School/College Projects

💼 Portfolio में Showcase करने वाला Web Project

🧑‍💻 Web Tool Blogs में Free Utility के रूप में

इस Code का फायदा क्या है?


✔️ No backend required

✔️ Fully mobile responsive

✔️ सारा calculation browser में होता है (100% safe)

✔️ Zero external dependency

✔️ AdSense-friendly page content बनाता है

✅ निष्कर्ष – शुरुआत यहीं से करें

अगर आप एक beginner हैं और चाहते हैं कि आपकी वेबसाइट पर कुछ अलग और काम का हो —
तो यह HTML Code एक शानदार शुरुआत है।

इसे Copy करें, Blogger post में सही जगह paste करें, और visitors को एक नया अनुभव दें।

TechCraft4u

प्रस्तुतकर्ता TechCraft4u

एक टिप्पणी भेजें

0 टिप्पणियाँ