? Create Dynamic Quotes Website with One Click To Tweet Btn In HTML, CSS, JavaScript & API in Hindi
Introduction
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: क्या इस प्रोजेक्ट का कोई वीडियो ट्यूटोरियल доступ में है?
हाँ, इस प्रोजेक्ट से संबंधित वीडियो ट्यूटोरियल्स कई ऑनलाइन प्लेटफार्मों पर उपलब्ध हैं।
One more thing
In addition to the incredible tools mentioned above, for those looking to elevate their video creation process even further, Topview.ai stands out as a revolutionary online AI video editor.
TopView.ai provides two powerful tools to help you make ads video in one click.
Materials to Video: you can upload your raw footage or pictures, TopView.ai will edit video based on media you uploaded for you.
Link to Video: you can paste an E-Commerce product link, TopView.ai will generate a video for you.
