716 रीडिंग

यह जावास्क्रिप्ट कोड यादृच्छिक उद्धरण उत्पन्न करता है

द्वारा Emmanuel Okolie 6m2024/04/25

बहुत लंबा; पढ़ने के लिए

वेनिला जावास्क्रिप्ट का उपयोग करके एक यादृच्छिक उद्धरण परियोजना कैसे बनाएं।

featured image - यह जावास्क्रिप्ट कोड यादृच्छिक उद्धरण उत्पन्न करता है

जब आप वेनिला जावास्क्रिप्ट का उपयोग करके रैंडम कोट शब्द सुनते हैं तो आपके दिमाग में क्या आता है? जहाँ तक मेरा सवाल है, मामला कुछ भी हो सकता है।

और हो सकता है कि कोई अन्य स्क्रिप्टिंग भाषा भी हो जो यादृच्छिक उद्धरण बना सकती हो, लेकिन उनमें से सबसे विशिष्ट भाषा यादृच्छिक उद्धरण बनाने के लिए जावास्क्रिप्ट का उपयोग करना है।

आपने कुछ सोशल मीडिया ऐप देखे होंगे जो लोगों की पोस्ट दिखाते हैं, लेकिन आपको और पोस्ट देखने के लिए स्क्रॉल करते रहना होगा। लेकिन हम जो बनाने जा रहे हैं उसके अनुसार, आपको नया कोट देखने के लिए एक बटन पर क्लिक करना होगा।

नोट: इस ट्यूटोरियल में हम एक API का उपयोग करेंगे, API का उपयोग वेब पर बेतरतीब ढंग से उद्धरण प्राप्त करने के लिए किया जाता है। बस बटन पर क्लिक करके API एक नया उद्धरण प्राप्त करता है। तो अपना ज़्यादा समय बर्बाद किए बिना, आइए इस गाइड में गोता लगाएँ।

शर्त

आपको HTML का बुनियादी ज्ञान होना चाहिए
आपको CSS का बुनियादी ज्ञान होना चाहिए
आपको जावास्क्रिप्ट का बुनियादी ज्ञान होना चाहिए
इसके अलावा एक कोड संपादक (सब्लाइम या वीएस कोड) आदि भी रखें।

चरण-दर-चरण जावास्क्रिप्ट रैंडम कोट जनरेटर

एक यादृच्छिक उद्धरण API या सरणी से यादृच्छिक रूप से उद्धरण खींचता है। इस लेख में, हम सरणी से उद्धरण बनाने के लिए जावास्क्रिप्ट का उपयोग करेंगे क्योंकि हम HTML, CSS और जावास्क्रिप्ट का उपयोग करके स्क्रैच से एक यादृच्छिक उद्धरण जनरेटर डिज़ाइन करते हैं। नीचे यादृच्छिक उद्धरण कार्य को पूरा करने के लिए चरण-दर-चरण मार्गदर्शिका दी गई है।

चरण 1: क्या नया प्रोजेक्ट बनाना है आप जिस प्रोजेक्ट को बनाने जा रहे हैं, उसमें तीन पेज हैं: HTML, CSS और JavaScript. इसलिए आप विभिन्न पेजों का नाम इस तरह रखेंगे. index.html, style.css, script.js. ऐसा करने के बाद आप अगले चरण पर जाने के लिए तैयार हैं.

चरण 2: फ्रेमवर्क का निर्माण यह चरण आपको कुछ HTML कोड जोड़ने में सक्षम करेगा जो आपकी परियोजना को संरचना प्रदान करेगा।
नोट: जैसा कि ऊपर बताया गया है, यह अनुभाग संभवतः फ़ोल्डर और फ़ाइलें बनाने के बाद किया जाने वाला पहला काम है।

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--META information--> <meta name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic"> <!--End of META information--> <title>Random Quotes</title> <!--LINK CUSTOM CSS FILE--> <link rel="stylesheet" href="style.css"> <!--FONTAWESOME CDN--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="crossorigin="anonymous"> </head> <body> <!-- Quote Container --> <div class="container"> <!-- Quote to be Displayed Here --> <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1> <!-- Author to be Displayed Here --> <p class="author" id="author"></p> <hr /> <div class="button"> <!--Button to tweet the quote --> <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a> <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated--> <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div> <!--LINK CUSTOM JS FILE--> <script src="script.js"></script> </body> </html>

चरण 3: क्लास के लिए स्टाइल जोड़ना इस अनुभाग में, हम कोट जनरेटर बनाने के लिए CSS का उपयोग करके कोड में स्टाइल जोड़ेंगे। नोट: यह अनुभाग index.html फ़ाइल बनाने के बाद करने वाली अगली चीज़ है, आप style.css नाम की एक और फ़ाइल बनाएंगे, style.css फ़ाइल HTML फ़ाइल से लिंक होगी।

फिर आपको HTML के लेआउट को स्टाइल करना है। नीचे CSS कोड दिया गया है।

 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); }

चरण 4: जावास्क्रिप्ट कोड की कुछ पंक्तियाँ शामिल करें। इस चरण में, हम कोट जनरेटर बनाने के लिए कुछ जावास्क्रिप्ट कोड शामिल करेंगे। नोट: यह अनुभाग इस ट्यूटोरियल का एक अनिवार्य हिस्सा है, अब आप एक और फ़ाइल बनाएंगे जिसे script.js कहते हैं।

नीचे दिए गए कोड को देखें, आप देखेंगे कि क्या किया गया था, हमने एक लिंक का उपयोग करके और url नामक एक चर के अंदर सहेज कर एक API के साथ बातचीत की। इस गाइड को संक्षिप्त बनाने के लिए, script.js पर जाएँ, आपको प्रत्येक अनुभाग से पहले एक टिप्पणी दिखाई देगी। नीचे जावास्क्रिप्ट कोड दिया गया है।

 const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet"); const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes"; // fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json(); // Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length); //Store the quote present at the randomly generated index const quote = allQuotes[indx].text; //Store the author of the respective quote const auth = allQuotes[indx].author; if (auth == null) { author = "Anonymous"; } //function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth; //tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; }; getNewQuote();

निष्कर्ष

हम इस ट्यूटोरियल के अंत में आ गए हैं, उम्मीद है कि आपको बहुत कुछ सीखने को मिला होगा। वेनिला जावास्क्रिप्ट का उपयोग करके रैंडम कोट्स प्रोजेक्ट बनाने के तरीके के बारे में।

हमने देखा कि एपीआई के साथ कैसे बातचीत की जाती है, हालांकि यह एकमात्र तरीका नहीं है या मुझे कहना चाहिए कि एपीआई के साथ बातचीत करने का सबसे अच्छा तरीका है। और हमारे जेएस कोड से अपने ट्विटर खाते पर उद्धरण कैसे ट्वीट करें।

इस ट्यूटोरियल पर चर्चा करने से ही हमें बहुत कुछ पता चला है। तो बेझिझक एक टिप्पणी छोड़ दें! और अगर आप और अधिक ट्यूटोरियल चाहते हैं, तो कृपया मुझे फ़ॉलो करें।

अगली बार तक, अपने दिन का आनंद लें!

लेखक के बारे में

इमैनुएल ओकोली एक फुल-स्टैक लारवेल डेवलपर हैं, जिन्हें सॉफ्टवेयर डेवलपमेंट इंडस्ट्री में 2+ साल का अनुभव है। उन्होंने सॉफ्टवेयर डेवलपमेंट, लेखन और दूसरों को जो वे करते हैं उसे सिखाकर पूर्ण कौशल विकसित किया है। उनके स्टैक में ReactJs, Laravel, PHP, JavaScript, और बहुत कुछ शामिल हैं।

वह एक फ्रीलांसर के रूप में काम करते हैं, ग्राहकों के लिए वेबसाइट बनाते हैं और दूसरों को अपना काम करने के तरीके बताने के लिए तकनीकी मैनुअल लिखते हैं।

इमैनुएल ओकोली आपसे बात करने के अवसर का स्वागत करेंगे। कृपया लिंक्ड-इन , फेसबुक , गिटहब , ट्विटर या उनकी वेबसाइट पर जाएँ और उनका अनुसरण करें।