? Create Dynamic Quotes Website with One Click To Tweet Btn In HTML, CSS, JavaScript & API in Hindi

Introduction

इस आर्टिकल में हम एक डाइनैमिक कोट्स वेबसाइट बनाने के बारे में चर्चा करेंगे, जिसमें एक क्लिक पर ट्वीट करने का बटन भी होगा। इसे बनाने के लिए हम HTML, CSS, और JavaScript का उपयोग करेंगे। साथ ही, हम एक रियल-टाइम API का प्रयोग करेंगे जो हमें प्रेरणादायक उद्धरण प्रदान करेगा।

चरण 1: फोल्डर स्टруктर और फाइलें बनाना

सबसे पहले, हमें अपने प्रोजेक्ट के लिए एक मुख्य फोल्डर बनाना होगा। इसके अंदर, हमें निम्नलिखित फाइलें बनानी होंगी:

index.html: इस फाइल में हमारी HTML संरचना होगी।
style.css: इस फाइल में हमारी CSS स्टाइल होगी।
script.js: इस फाइल में हमारा JavaScript कोड होगा।

चरण 2: HTML संरचना

HTML फाइल बनाने के बाद, हमें उसमें कोट्स दिखाने के लिए एक डिव और एक बटन जोड़ना होगा। HTML में एक नई कोट्स प्राप्त करने के लिए एक बटन भी होना चाहिए।

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Dynamic Quotes</title>
</head>
<body>
    <div id="quote-container">
        <p id="quote">तुम्हारा उद्धरण यहाँ होगा।</p>
        <h3 id="author">लेखक का नाम</h3>
    </div>
    <button id="new-quote">नया उद्धरण</button>
    <button id="tweet">ट्वीट करें!</button>
    <script src="script.js"></script>
</body>
</html>

चरण 3: CSS स्टाइल

हम CSS का उपयोग कर सकते हैं ताकि हमारी वेबसाइट दिखने में अच्छी लगे।

body (
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 50px;
)

#quote-container (
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
)

button (
    padding: 10px 15px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
)

चरण 4: JavaScript कोड

हम JavaScript में एक ऐसा फंक्शन बनाएंगे जो API से डेटा लाएगा। इसे असिंक्रोनस फंक्शन के माध्यम से किया जाएगा।

document.getElementById('new-quote').addEventListener('click', getQuote);
document.getElementById('tweet').addEventListener('click', tweetQuote);

async function getQuote() (
    const response = await fetch('https://api.quotable.io/random');
    const data = await response.json();
    document.getElementById('quote').innerText = data.content;
    document.getElementById('author').innerText = data.author;
)

function tweetQuote() (
    const quote = document.getElementById('quote').innerText;
    const author = document.getElementById('author').innerText;
    const tweetURL = `https://twitter.com/intent/tweet?text=${encodeURIComponent(quote + " - " + author))`;
    window.open(tweetURL);
}

निष्कर्ष

आपकी डाइनैमिक कोट्स वेबसाइट तैयार है! अब आप नए उद्धरण प्राप्त कर सकते हैं और एक क्लिक के साथ उन्हें ट्वीट कर सकते हैं।

Keywords

Dynamic Quotes
API
HTML
CSS
JavaScript
Tweet Button
Asynchronous Function

FAQ

Q1: क्या मैं इस प्रोजेक्ट को अपने हिसाब से कस्टमाइज़ कर सकता हूँ?
हाँ, आप CSS और HTML को अपने हिसाब से कस्टमाइज़ कर सकते हैं।

Q2: क्या मुझे API का उपयोग करने के लिए किसी विशेष ज्ञान की आवश्यकता है?
नहीं, बस आपको JavaScript में HTTP रीक्वेस्ट कैसे कार्य करता है, इसका बुनियादी ज्ञान होना चाहिए।

Q3: क्या मैं इस कोड को किसी भी वेबसाइट पर लागू कर सकता हूँ?
हाँ, अगर आपके पास राइट API है, तो आप इसे कहीं भी उपयोग कर सकते हैं।

Q4: क्या इस प्रोजेक्ट का कोई वीडियो ट्यूटोरियल доступ में है?
हाँ, इस प्रोजेक्ट से संबंधित वीडियो ट्यूटोरियल्स कई ऑनलाइन प्लेटफार्मों पर उपलब्ध हैं।