जावास्क्रिप्ट का उपयोग करके एक सरल शब्दकोश एप्लिकेशन बनाना सीखें

जावास्क्रिप्ट वेब डेवलपर्स के बीच सबसे लोकप्रिय प्रोग्रामिंग भाषाओं में से एक है। जावास्क्रिप्ट सीखते समय, हर कोई मूल बातें शुरू करता है और डोम हेरफेर का उपयोग करके सरल अनुप्रयोगों का निर्माण करता है।

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

एपीआई पर एक नजर

एपीआई का मतलब एप्लीकेशन प्रोग्रामिंग इंटरफेस है । एपीआई आसानी से और सुरक्षित रूप से डेटा और कार्यक्षमता का आदान-प्रदान करने के लिए अनुप्रयोगों को सक्षम करके सॉफ्टवेयर विकास और नवाचार को सरल बनाते हैं।

इस परियोजना का उपयोग करता dictionaryapi.dev एपीआई। यह एक मुफ्त एपीआई है जो आपके द्वारा खोजे जाने वाले शब्दों से संबंधित कई परिभाषाएं, ध्वन्यात्मकता और अन्य व्याकरण संबंधी शब्द प्रदान करता है।

एपीआई का लिंक इस प्रकार है:

 https://api.dictionaryapi.dev/api/v2/entries/en/word

परियोजना का फ्रंटएंड लेआउट

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

 <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet" />

एचटीएमएल पेज में एक इनपुट और एक बटन होता है जहां उपयोगकर्ता खोजे जाने वाले शब्द को दर्ज कर सकता है। भाषण के हिस्से, कई परिभाषाओं और ऑडियो को प्रदर्शित करने के लिए तीन और डिव हैं जो आपको शब्द का सही उच्चारण करने में मदद करते हैं। डिफ़ॉल्ट रूप से, इन तीन divs में डिस्प्ले प्रॉपर्टी नहीं होती है। जब डेटा एपीआई से प्राप्त किया जाता है तो इन divs की डिस्प्ले प्रॉपर्टी को ब्लॉक करने के लिए सेट किया जाएगा।

 
<div class="bg-green-100 min-h-screen pt-10">
<h2 class="text-green-600 text-5xl pt-4 font-semibold text-center">
Dictionary
</h2>
<div class="flex justify-center p-8 items-center">
<input
type="text"
placeholder="Enter the word"
id="word"
class="
py-2
w-1/4
focus:outline-none
border-2 border-green-600
rounded
px-3
"
/>
<button
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search
</button>
</div>
<div class="flex flex-col justify-center items-center">
<div id="partOfSpeechDiv" class="hidden">
<h2 class="text-xl text-gray-500 py-2" id="partOfSpeechHeader"></h2>
<p class="text-md" id="partOfSpeechPara"></p>
</div>
<div class="hidden" id="meaningDiv">
<h2 class="text-4xl py-3 px-3 text-green-500" id="meaningHeader"></h2>
</div>
<div id="audio" class="hidden"></div>
</div>
</div>
<script src="./index.js"></script>

यह फ्रंटएंड इस तरह दिखेगा

जावास्क्रिप्ट का उपयोग करके कार्यक्षमता जोड़ना

एपीआई के माध्यम से डेटा लाने और इसे प्रदर्शित करने से पहले, आपको HTML तत्वों तक उनकी आईडी का उपयोग करने की आवश्यकता है। आप जावास्क्रिप्ट विधि getElementById() का उपयोग करके आईडी तक पहुंच प्राप्त कर सकते हैं।

 const word = document.getElementById("word");
const search = document.getElementById("search");
const display = document.getElementById("display");
const partOfSpeechDiv = document.getElementById("partOfSpeechDiv");
const partOfSpeechHeader = document.getElementById("partOfSpeechHeader");
const partOfSpeechPara = document.getElementById("partOfSpeechPara");
const meaningDiv = document.getElementById("meaningDiv");
const audioDiv = document.getElementById("audio");
const meaningHeader = document.getElementById("meaningHeader");

इवेंट श्रोता जोड़ना

HTML पृष्ठ में इनपुट तत्व में शब्द नाम की एक आईडी है । इनपुट तत्व तक पहुंच प्राप्त करने के बाद, आप .value विशेषता का उपयोग करके इनपुट तत्व में टेक्स्ट के मान को पुनः प्राप्त कर सकते हैं।

खोज बटन में खोज नाम की आईडी होती है। आपको ईवेंट को ट्रिगर करने के लिए एक क्लिक ईवेंट श्रोता जोड़ना होगा और API के माध्यम से डेटा लाने के लिए फ़ंक्शन कॉल करना होगा।

Async और प्रतीक्षा

2017 के बाद से, जावास्क्रिप्ट async की अवधारणा प्रस्तुत की और अतुल्यकालिक अनुरोध पर कार्रवाई करने का इंतजार है। आप तो फिर के बजाय async-का इंतजार है और संकल्प के लिए .catch और वादों अस्वीकार का उपयोग करें।

संबंधित: सिंक्रोनस बनाम एसिंक्रोनस प्रोग्रामिंग: वे कैसे भिन्न हैं?

 search.addEventListener("click", async () => {
try {
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`;
const res = await fetch(url);
const data = await res.json();
displayData(data);
} catch (error) {
console.log(error);
}
});

async-wait का उपयोग करके वादों के साथ काम करने के लिए , आपको फ़ंक्शन परिभाषा से पहले async कीवर्ड जोड़ना होगा। और जब भी आप कोई रिक्वेस्ट करते हैं या किसी फंक्शन को कॉल करते हैं, तो आपको इसके पहले प्रतीक्षित कीवर्ड जोड़ना होगा।

प्रतीक्षित कीवर्ड फ़ंक्शन के आगे के निष्पादन को तब तक रोक देता है जब तक कि पिछला अनुरोध पूरा नहीं हो जाता।

आपको कोशिश-पकड़ ब्लॉक में संपूर्ण async-प्रतीक्षा वादा क्रिया करने की आवश्यकता है। यदि वादा डेटा लाने में सक्षम नहीं है तो यह कैच ब्लॉक में त्रुटि प्रदर्शित करेगा। एपीआई को शब्द पास करने से पहले, यह सटीक परिणामों के लिए लोअरकेस प्रारूप में होना चाहिए। आप शब्द को बदलने के लिए .lowercase() स्ट्रिंग विधि का उपयोग कर सकते हैं।

फ़ेच विधि एपीआई से डेटा पुनर्प्राप्त करेगी। आपको प्रतीक्षित कीवर्ड जोड़ना होगा ताकि फ़ंक्शन उस समय रुक जाए, जबकि फ़ेच विधि डेटा पुनर्प्राप्त कर रही हो।

डेटा पुनर्प्राप्त करने के बाद, आपको प्रतिक्रिया पर .json() विधि का उपयोग करके इसे JSON प्रारूप में परिवर्तित करने की आवश्यकता है।

वेब पेज पर डेटा प्रदर्शित करना

डेटा को पुनः प्राप्त करने और इसे JSON प्रारूप में परिवर्तित करने के बाद, आपको इसे वेब पेज पर प्रदर्शित करना होगा। आपको डिस्प्लेडेटा() विधि को कॉल करने और डेटा को पास करने की आवश्यकता है।

एपीआई प्रतिक्रिया की संरचना इस प्रकार है:

एपीआई प्रतिक्रिया में भाषण का हिस्सा, कई परिभाषाएं और शब्दों की ध्वन्यात्मकता देता है।

आप दिए गए शब्द की सभी परिभाषाओं का उपयोग करके प्राप्त कर सकते हैं:

 const meanings = data[0].meanings[0].definitions;

परिवर्तनीय अर्थ एक सरणी है जिसमें दिए गए शब्द की सभी परिभाषाएं शामिल हैं।

दिए गए शब्द के भाषण का भाग प्राप्त करने के लिए:

 const partOfSpeech = data[0].meanings[0].partOfSpeech;

आप .innerHTML विशेषता का उपयोग करके शब्द के भाषण का भाग जोड़ सकते हैं। एचटीएमएल कोड में, भाषण div का हिस्सा डिफ़ॉल्ट रूप से प्रदर्शन से कोई भी की संपत्ति थी, लेकिन, जावा स्क्रिप्ट कोड में, डेटा प्राप्त करने में के बाद, आप ब्लॉक करने के लिए प्रदर्शन गुण सेट करने की जरूरत है।

परिभाषाएँ प्रदर्शित करना

आपको meaningList नाम का एक वेरिएबल बनाना होगा । इस वेरिएबल में सभी परिभाषाओं को जोड़ने के बाद, आपको इसे वेब पेज पर प्रदर्शित करने के लिए .innerHTML एट्रिब्यूट असाइन करना होगा।

संबंधित: एचटीएमएल एसेंशियल चीट शीट: टैग, विशेषताएँ, और बहुत कुछ

अर्थ सरणी के माध्यम से लूप करें और एकल परिभाषा और उस सूचकांक का ट्रैक रखें जिस पर यह मौजूद है। HTML के पैराग्राफ एलिमेंट के अंदर सिंगल डेफिनिशन और इंडेक्स को अर्थलिस्ट वेरिएबल में जोड़ें

एक बार जब आप लूप से बाहर हो जाते हैं, तो आपको इसे अर्थडिव के .innerHTML विशेषता में पास करना होगा

वेब पेज पर ऑडियो तत्व प्रदर्शित करें

एपीआई द्वारा प्राप्त प्रतिक्रिया में ध्वन्यात्मकता शामिल है जो उपयोगकर्ताओं को शब्द के उच्चारण को समझने में मदद करती है। इस ध्वनि को वेब पेज पर जोड़ने के लिए, आपको एक ऑडियो तत्व बनाना होगा और उस तत्व की src विशेषता में ध्वन्यात्मकता पास करनी होगी। अंत में, आपको .innerHTML विशेषता का उपयोग करके ऑडियो तत्व को audioDiv में रखना होगा

 const displayData = (data) => {
console.log(data);
const partOfSpeech = data[0].meanings[0].partOfSpeech;
const meanings = data[0].meanings[0].definitions;
partOfSpeechDiv.className =
"bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block";
partOfSpeechHeader.innerHTML = "Part of Speech";
partOfSpeechPara.innerHTML = partOfSpeech;
let meaningList = ``;
meanings.forEach((meaning, ind) => {
meaningList += `<p class='my-3 px-4 py-1 text-md'>${ind + 1}) ${
meaning.definition
} </p>`;
});
meaningDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 rounded block";
meaningHeader.innerText = "Meanings";
meaningDiv.innerHTML = meaningList;
let aud = `<audio src="${data[0].phonetics[0].audio}" controls>`;
audioDiv.className = "block";
audioDiv.innerHTML = aud;
};

अपनी सूची में एक और प्रोजेक्ट जोड़ें

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

जावास्क्रिप्ट और डोम हेरफेर अवधारणाओं पर अधिक अभ्यास की तलाश है? यहां एक और प्रोजेक्ट है जिसे आप अपने कौशल को मजबूत करने के लिए बना सकते हैं।