शुरुआती के लिए 10 जावास्क्रिप्ट परियोजना विचार

जावास्क्रिप्ट आज वेब विकास में उपयोग की जाने वाली सबसे मूल्यवान प्रोग्रामिंग भाषाओं में से एक है। Express.js के आगमन के साथ, जावास्क्रिप्ट के बैकएंड स्टैक के साथ-साथ मौजूदा और विकसित हो रहे फ्रंट-एंड फ्रेमवर्क के ढेर सारे, ऐसा लगता है कि भाषा वेब प्रोग्रामिंग में क्रांति लाती रहेगी।

इसलिए यदि आप एक जावास्क्रिप्ट शुरुआत कर रहे हैं, तो कसकर बैठें। ये जावास्क्रिप्ट परियोजना विचार आपके कौशल को बढ़ावा देंगे और आपको जावास्क्रिप्ट की बुनियादी अवधारणाओं से परिचित कराएंगे। आएँ शुरू करें।

1. एक साधारण टू-डू सूची ऐप

जावास्क्रिप्ट का उपयोग करते हुए एक टू-डू सूची बनाते समय, आप सीआरयूडी क्रियाओं के पीछे के मूल तर्क को जानेंगे और जावास्क्रिप्ट के ईवेंट हैंडलिंग कार्यों का पता लगाएंगे। अनिवार्य रूप से, आप अपनी स्क्रिप्ट को कार्य बनाने, पढ़ने, अपडेट करने और फिर उन्हें हटाने के लिए तैयार करेंगे।

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

जावास्क्रिप्ट सशर्त बयान और तारीख के तरीके।

सम्बंधित: जावास्क्रिप्ट का उपयोग करके एक बेसिक टू-डू लिस्ट ऐप कैसे बनाएं

हालांकि यह अनिवार्य नहीं है, आप स्थानीय डेटाबेस में कार्यों को सहेज कर इसे और आगे ले जा सकते हैं। उदाहरण के लिए, प्रत्येक इनपुट को अपने स्थानीय मशीन पर JSON फ़ाइल में संग्रहीत करना, आपको एक वास्तविक जीवन JSON ऑब्जेक्ट, एक सरणी, या एक NoSQL डेटाबेस से निपटने के दौरान CRUD संचालन करने का एक विचार देता है।

2. एक साधारण टाइमर बनाएं

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

इसे और अधिक विशिष्ट बनाने के लिए, आप एक उलटी गिनती टाइमर बना सकते हैं जो उपयोगकर्ता द्वारा निर्दिष्ट मूल्य पर रुकता है। आपको डेटाबेस या JSON ऑब्जेक्ट में किसी भी प्रविष्टि को संग्रहीत करने की आवश्यकता नहीं है, क्योंकि यह एक ऐसा उदाहरण है जिसे उपयोगकर्ता अपनी इच्छानुसार ट्वीक कर सकता है।

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

3. स्क्रैच से छवि हिंडोला बनाएं

एक हिंडोला एक वेबसाइट के UI में सबसे अधिक आकर्षक दिखने वाला जोड़ है। जब इसे बढ़िया UX के साथ जोड़ा जाता है, तो यह आपके UI में एक आकर्षक प्रभाव डालता है। साथ ही, यह आपको छवियों या वस्तुओं को विशिष्ट रूप से प्रदर्शित करने देता है।

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

हालांकि यह कोई सख्त तरीका नहीं है। आप किसी भी तरीके का उपयोग कर सकते हैं जो आपके लिए सबसे अच्छा काम करता है।

यदि आप उत्सुक हैं और अतिरिक्त मील जाना चाहते हैं, तो आप इसे और अधिक यथार्थवादी और उपयोग में आसान बनाने के लिए अपने प्रदर्शन में एनिमेशन जोड़ सकते हैं।

4. वेब कैलकुलेटर

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

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

सम्बंधित: HTML, CSS और JavaScript का उपयोग करके एक साधारण कैलकुलेटर कैसे बनाएं

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

5. जावास्क्रिप्ट के साथ जनरेटर फिर से शुरू करें

हालाँकि आप इस बारे में थोड़ा भ्रमित हो सकते हैं कि इसे कैसे शुरू किया जाए, वहाँ कुछ फिर से शुरू करने वाले वेब ऐप हैं जहाँ आप अपना विचार प्राप्त कर सकते हैं।

अंतत:, आप एक पुन: प्रयोज्य फिर से शुरू करने वाला निर्माता बनाएंगे जो नई जानकारी को स्वीकार कर सकता है और मौजूदा को छोड़ या अपडेट कर सकता है।

एक बार जब आप मूल तर्क को समझ लेते हैं तो अधिक फिर से शुरू होने वाले टेम्प्लेट के साथ आना मुश्किल नहीं होता है। इसलिए, आप एकल टेम्प्लेट के साथ शुरुआत कर सकते हैं और समय बीतने के साथ अधिक आकर्षक डिज़ाइनों को बढ़ा सकते हैं। बेशक, आप एक डाउनलोड बटन भी जोड़ना चाहते हैं ताकि उपयोगकर्ता पीडीएफ के रूप में अपना बायोडाटा प्राप्त कर सकें।

रिज्यूम-बिल्डिंग प्रोजेक्ट आपको मूल जावास्क्रिप्ट सीआरयूडी संचालन को समझने में मदद करता है। इसके अतिरिक्त, आप सीखेंगे कि लूप, ईवेंट हैंडलर, शर्तों और जावास्क्रिप्ट के कुछ अंतर्निहित कार्यों का उपयोग कैसे करें। आप उपयोगकर्ताओं की जानकारी को JSON ऑब्जेक्ट में भी सहेज सकते हैं ताकि आपका प्रोग्राम बाद में इसका संदर्भ दे सके।

6. एक ब्राउज़र एक्सटेंशन बनाएँ

प्रारंभकर्ता प्रोजेक्ट के लिए ब्राउज़र एक्सटेंशन बनाना जटिल लग सकता है। लेकिन एक बार जब आप एक कार्यात्मक कोडिंग के लिए आवश्यकताओं को समझते हैं तो यह नहीं होता है।

यह एक सार्थक कार्य है, खासकर यदि आपके पास पहले से ही जावास्क्रिप्ट का बुनियादी ज्ञान है और आप एक चुनौतीपूर्ण परियोजना के साथ खेलना चाहते हैं।

हालाँकि यह आपके एक्सटेंशन को कई ब्राउज़रों में काम करने के लिए थोड़ा थका देने वाला हो सकता है, आप ब्राउज़र-विशिष्ट एक्सटेंशन के साथ शुरुआत कर सकते हैं। और आपको एक जटिल निर्माण करने की आवश्यकता नहीं है। उदाहरण के लिए, आपका एक साधारण फ़ाइल डाउनलोडर या एक छवि पुनर्विक्रेता हो सकता है।

अपना एक्सटेंशन बनाते समय, आपको इसे ब्राउज़र पर इंस्टॉल करने योग्य भी बनाना होगा। यह वह जगह है जहां आप अपने ऐप की जानकारी को "manifest.json" फ़ाइल में निर्दिष्ट करते हैं ताकि ब्राउज़र इसे पहचान सके और स्वीकार कर सके।

7. एक बजट आवेदन बनाएँ

हम सभी निगरानी करना चाहते हैं कि बजट की अधिकता से बचने के लिए हम अपना पैसा कैसे खर्च करते हैं। एक बजट ऐप आपको अपने खर्चों को ट्रैक करने देता है ताकि आप अपने द्वारा किए गए सौदे से अधिक खर्च न करें।

चाहे आप इसे अपने लिए बनाएं या दूसरों के लिए, यह आपके भंडार में रखने लायक खजाना है। JavaScript के साथ एक DIY बजट ऐप बनाने से न केवल DOM रेंडरिंग के आपके ज्ञान में सुधार होता है, बल्कि आप वास्तविक जीवन की समस्याओं को हल करने के लिए JavaScript ऑपरेटरों को लागू करना भी सीखेंगे।

अपना कोड लिखते समय, आप फॉर्म इनपुट एकत्र करेंगे और अपने बजट से खर्च घटाएंगे। जब भी वे अपने बजट से बाहर निकलने वाले हों, तब आप उपयोगकर्ता के लिए ऑटो-अलर्ट सेट करने के लिए कोड लिखकर इसे और आगे ले जा सकते हैं।

8. इकाई कनवर्टर

जावास्क्रिप्ट में बुनियादी ऑपरेटरों और सशर्त बयानों के साथ खेलना चाहते हैं? फिर एक यूनिट कन्वर्टर बनाने से आपको वह लचीलापन मिलता है।

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

तार्किक विवरण तब संभालते हैं कि आपकी स्क्रिप्ट उपयोगकर्ता की पसंद के आधार पर मापदंडों को कैसे परिवर्तित करती है। दरअसल, यूनिट कनवर्टर सूची में सबसे आसान परियोजनाओं में से एक है।

9. एक डायरी बनाएं

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

क्योंकि यह एक नोट लेने वाला ऐप है और आपको गतिविधियों के अनुसार तारीखों को पिन करने की आवश्यकता है, आप अपना स्टोर कर सकते हैं किसी फ़ाइल में JSON ऑब्जेक्ट के रूप में इनपुट करता है और फिर बाद में उनका संदर्भ देता है जब आपको अपने इतिहास को ट्रैक करने और सहेजने की आवश्यकता होती है इनपुट

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

10. ब्रिक ब्रेकर गेम

यदि आप नहीं जानते हैं, तो आप वेनिला जावास्क्रिप्ट का उपयोग करके भी एक साधारण गेम बना सकते हैं। यदि आप 2D गेम से परिचित हैं, तो आपने पहले ब्रेकआउट गेम खेला या देखा होगा।

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

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

जावास्क्रिप्ट: करके सीखते रहें

इनमें से कुछ प्रोजेक्ट आइडिया आपके जावास्क्रिप्ट कौशल को बढ़ावा देंगे और आपको वास्तविक जीवन की परियोजनाओं के लिए तैयार करेंगे। उस ने कहा, जबकि इनमें से अधिकांश परियोजनाओं में स्टाइलिंग आवश्यक है, सावधान रहें कि पहले से विचलित न हों। लेकिन जावास्क्रिप्ट द्वारा प्रदान की जाने वाली कार्यक्षमता पर ध्यान केंद्रित करें, और आप इसे जानने से पहले जावास्क्रिप्ट के साथ उत्तरदायी वेबसाइट बनाना शुरू कर देंगे। हैप्पी कोडिंग!

शुरुआती के लिए उपयुक्त 10 पायथन परियोजना विचार

आप मूल बातें जानते हैं और अब आप उन्हें लागू करने के लिए तैयार हैं। इन पायथन परियोजनाओं के साथ आरंभ करें!

आगे पढ़िए

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