ऑनलाइन एज कैलकुलेटर: HTML, CSS, और JavaScript से अपना टूल बनाएं

एज कैलकुलेटर टूल बनाने की प्रक्रिया

आज के समय में एज कैलकुलेटर एक उपयोगी टूल है जो किसी की उम्र को सटीक रूप से गणना करने में मदद करता है। इस लेख में, हम आपको HTML, CSS, और JavaScript का उपयोग करके एक साधारण एज कैलकुलेटर बनाने की प्रक्रिया बताएंगे। इसे समझने और लागू करने के लिए आपको केवल बेसिक वेब डेवलपमेंट नॉलेज की आवश्यकता है।

स्टेप 1: HTML कोड लिखना

HTML कोड वह संरचना है जो आपके वेबपेज को बनाता है। यहां पर हम एक फॉर्म बनाएंगे जहां उपयोगकर्ता अपनी जन्मतिथि डाल सकें।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Age Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Age Calculator</h1>
        <form id="ageForm">
            <label for="dob">Enter your Date of Birth:</label>
            <input type="date" id="dob" required>
            <button type="button" id="calculateBtn">Calculate Age</button>
        </form>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

स्टेप 2: CSS कोड लिखना

CSS का उपयोग वेबपेज को सुंदर और आकर्षक बनाने के लिए किया जाता है।

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

form {
    margin: 20px 0;
}

input {
    padding: 10px;
    font-size: 16px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

#result {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
}

स्टेप 3: JavaScript कोड लिखना

JavaScript का उपयोग उपयोगकर्ता की जन्मतिथि से उम्र की गणना करने के लिए किया जाता है।

// script.js
document.getElementById('calculateBtn').addEventListener('click', function() {
    const dob = document.getElementById('dob').value;
    const resultDiv = document.getElementById('result');

    if (!dob) {
        resultDiv.textContent = 'Please enter your date of birth.';
        return;
    }

    const dobDate = new Date(dob);
    const today = new Date();

    let ageYears = today.getFullYear() - dobDate.getFullYear();
    let ageMonths = today.getMonth() - dobDate.getMonth();
    let ageDays = today.getDate() - dobDate.getDate();

    if (ageDays < 0) {
        ageMonths--;
        ageDays += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
    }

    if (ageMonths < 0) {
        ageYears--;
        ageMonths += 12;
    }

    resultDiv.textContent = `Your age is: ${ageYears} years, ${ageMonths} months, and ${ageDays} days.`;
});

कोड का उपयोग कैसे करें

तीनों फाइलों (HTML, CSS, और JavaScript) को अलग-अलग फाइलों में सेव करें।
- index.html
- style.css
- script.js
इन फाइलों को एक ही फोल्डर में रखें।
HTML फाइल को ब्राउज़र में खोलें।
अपनी जन्मतिथि दर्ज करें और “उम्र की गणना करें” बटन पर क्लिक करें।
आपकी उम्र स्क्रीन पर दिखाई देगी।

पोस्ट का अंत

यह एज कैलकुलेटर टूल एक बेसिक प्रोजेक्ट है जो आपको HTML, CSS, और JavaScript का उपयोग करना सिखाएगा। इसे आप अपनी वेबसाइट पर जोड़ सकते हैं या इसे और अधिक फंक्शनल बना सकते हैं। यदि आपको कोड समझ में नहीं आ रहा है या इसे कस्टमाइज करना चाहते हैं या इस पोस्ट से संबंधित कुछ और हमसे पूछना चाहते हैं तो नीचे कमेंट बॉक्स में लिखें हम आपके सवालों का जवाब जल्द से जल्द देने की कोशिश करेंगे।

ये भी पढ़ें

Digital Ocean पर HTML , CSS और JavaScript से बनी Static वेबसाइट को होस्ट करना सीखें

X (Twitter) Trends – Worldwide टूल बनाना सीखे ये API के द्वारा रियल टाइम डाटा देता है