HTML, CSS और JavaScript की मदद से Digital Clock कैसे बनाएं ?

HTML, CSS और JavaScript की मदद से Digital Clock कैसे बनाएं?

हेलो दोस्तों! आज के इस ट्यूटोरियल में हम सीखेंगे कि कैसे एक शानदार और आधुनिक डिजिटल क्लॉक (Digital Clock) बनाई जाती है। यह घड़ी वास्तविक समय (घंटे, मिनट, सेकंड, AM/PM) और आज की तारीख (Date) दिखाएगी।

इसे बनाने के लिए हम HTML के ढांचे, CSS के आकर्षक डिज़ाइन और JavaScript के 'Date' फंक्शन का उपयोग करेंगे। तो चलिए शुरू करते हैं!

स्टेप 1: HTML कोड

सबसे पहले, अपनी घड़ी का ढांचा तैयार करने के लिए नीचे दिए गए HTML कोड को अपने एडिटर में जोड़ें:

<div class="clock-container">
    <div id="clock">00:00:00</div>
    <div id="ampm">AM</div>
    <div id="date">Date here</div>
</div>

स्टेप 2: CSS कोड

घड़ी को आकर्षक और डिजिटल लुक देने के लिए यह CSS कोड बहुत जरूरी है। इसे अपने स्टाइल सेक्शन में जोड़ें:

.clock-container {
    background-color: #1a2238;
    padding: 30px 50px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    border: 2px solid #00ff88;
    width: fit-content;
    margin: 30px auto;
}

#clock {
    font-size: 4.5rem;
    font-weight: bold;
    color: #00ff88;
    letter-spacing: 2px;
}

#ampm, #date {
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 5px;
    font-family: sans-serif;
}

स्टेप 3: JavaScript कोड

समय को हर सेकंड अपडेट करने के लिए नीचे दिए गए JavaScript कोड का इस्तेमाल करें:

<script>
function updateClock() {
    let now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    let ampm = "AM";

    if (hours >= 12) {
        ampm = "PM";
        if (hours > 12) {
            hours = hours - 12;
        }
    }
    if (hours === 0) {
        hours = 12;
    }

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    let dateString = now.toDateString();

    document.getElementById("clock").innerHTML = `${hours}:${minutes}:${seconds}`;
    document.getElementById("ampm").innerHTML = ampm;
    document.getElementById("date").innerHTML = dateString;
}

setInterval(updateClock, 1000);
updateClock();
</script>

Blogger में इसे कैसे जोड़ें?

अपने Blogger डैशबोर्ड पर जाएं और 'New Post' पर क्लिक करें।
बाईं तरफ दिए गए पेंसिल आइकॉन पर क्लिक करके 'HTML View' मोड चुनें।
इस पूरे कोड को वहां पेस्ट कर दें।
'Publish' बटन दबाएं और अपनी डिजिटल क्लॉक का आनंद लें!
इस code को आप दुनियां की किसी भी वेबसाइट में इस्तेमाल कर सकते है ।

🌐 आप इसे कहाँ-कहां इस्तेमाल कर सकते हैं?

WordPress: आप इसे WordPress के 'Custom HTML' ब्लॉक में डाल सकते हैं।

साधारण HTML वेबसाइट: अगर आपने HTML/CSS की अपनी अलग से वेबसाइट बनाई है, तो यह कोड वहाँ भी चलेगा।

Google Sites या Wix: यहाँ भी आप Custom HTML एम्बेड करने वाले टूल (Embed Code) का इस्तेमाल करके इसे चला सकते हैं।

GitHub Pages या Netlify: फ्रंटएंड प्रोजेक्ट्स को होस्ट करने के लिए यह सबसे बेहतरीन जगह है।

Codepen या JSFiddle: कोडिंग को ऑनलाइन टेस्ट करने के लिए आप इसे यहाँ भी तुरंत चला सकते हैं।

💻 इसे दूसरी वेबसाइट पर कैसे जोड़ें?

यदि आप इसे किसी अन्य वेबसाइट पर लगाना चाहते हैं, तो आप बस दो चीजों का ध्यान रखें:

जहाँ डिज़ाइन या स्टाइल (CSS) लगाना है, वहाँ <style> टैग का इस्तेमाल करें।

जहाँ घड़ी चलानी है, वहाँ <script> टैग का इस्तेमाल करें।

💡 कुछ अतिरिक्त सुझाव (Pro Tips):

कस्टमाइज़ेशन: आप अपनी पसंद के अनुसार CSS में background-color को बदलकर इसे कोई भी नया लुक दे सकते हैं।
फॉन्ट का उपयोग: इसे और भी अधिक डिजिटल लुक देने के लिए आप Google Fonts से 'Orbitron' या 'Courier New' फॉन्ट का इस्तेमाल कर सकते हैं।
शेयर करें: इस पोस्ट को अपने दोस्तों और अन्य डेवलपर्स के साथ जरूर शेयर करें ताकि वे भी कोडिंग की दुनिया में अपनी शुरुआत कर सकें।
नीचे आप live चलती हुई इस तरह की digital clock का इस्तेमाल कर सकेंगे , नीचे इस प्रोजेक्ट का लाइव प्रीव्यू है । आप भी Try करे और छोटे छोटे प्रोजेक्ट बनाकर सीखना जारी रखे । ये HTML,CSS OR JAVASCRIPT की मदद से बनाया एक छोटा प्रोजेक्ट है ।

00:00:00

Date

क्या आपको यह ट्यूटोरियल अच्छा लगा?

कोडिंग सीखना एक यात्रा (Journey) है, और हर एक छोटा प्रोजेक्ट आपको एक बेहतर डेवलपर बनाता है। यदि आपको इस कोड में कोई समस्या आए, तो नीचे कमेंट बॉक्स में बेझिझक पूछें।

निष्कर्ष (Conclusion)

बधाई हो! आज आपने सफलतापूर्वक अपनी डिजिटल क्लॉक (Digital Clock) बना ली है। कोडिंग में छोटे-छोटे प्रोजेक्ट्स बनाना ही आपको एक बेहतरीन डेवलपर बनाता है।

👉 क्या आपने अपने ब्लॉग पर इसे सफलतापूर्वक लगा लिया? साइडबार में चल रही हमारी लाइव घड़ी आपको कैसी लगी?

अगर आपको इस कोड को समझने में या ब्लॉगर में लगाने में कोई भी समस्या आ रही है, तो नीचे कमेंट (Comment) करके जरूर बताएं। मैं आपकी मदद करने के लिए यहाँ हूँ!

इस पोस्ट को अपने दोस्तों के साथ ज़रूर शेयर करें ताकि वे भी कोडिंग सीख सकें! 🚀

HTML, CSS और JavaScript की मदद से Digital Clock कैसे बनाएं ?