जावास्क्रिप्ट प्रोजेक्ट्स

| | | | | | | | | | | | | |

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

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

साधारण JavaScript प्रोजेक्ट विकल्पों के अलावा और कुछ नहीं देखें। हमने जावास्क्रिप्ट शुरुआती लोगों के लिए सबसे उपयोगी परियोजनाओं की समीक्षा की है और कुछ का चयन किया है जो शैली में आपकी मदद कर सकते हैं। ये प्रोजेक्ट आपको अपने प्रोग्रामिंग करियर की एक ठोस शुरुआत देते हैं और डेवलपर की नौकरी पाने के अपने सपनों को हासिल करने में आपकी मदद करते हैं। और CodePen जैसे कोड साझाकरण केंद्रों के लिए धन्यवाद, आपके पास सहायता का एक तैयार स्रोत है। और आपके प्रोजेक्ट को बनाने में मदद करने के लिए आसान उदाहरण। जब हम आपको इन जावास्क्रिप्ट प्रोजेक्ट विचारों के साथ मूल बातें दिखाएंगे, तो आप एक मुस्कान के साथ अपने हायरिंग मैनेजर पर हमला करने के लिए तैयार होंगे। li>एक गेम बनाएं

  • जावास्क्रिप्ट ग्राफिक्स के साथ खेलें
  • एक प्रश्नोत्तरी बनाएं
  • एक यादृच्छिक संख्या जनरेटर बनाएं
  • < मजबूत>खेल बनाएं

    <वर्ग आंकड़ा = "wp-ब्लॉक छवि"> एक महान मारियो कार्ड खुद।
    " यह मैं, बेबी डेवलपर "

    आइए इसका सामना करते हैं - कंप्यूटर और तकनीक में अधिकांश लोग क्योंकि " वे मनोरंजन के एक निश्चित रूप में मिले। खेल इस विभाग में सर्वश्रेष्ठ उम्मीदवार हैं। वीडियो गेम वह शहद है जो इस प्रक्रिया में युवाओं और कांटों को आकर्षित करता है। वैसे आप अपने दम पर एक खेल विकसित कर सकते हैं और अपने कौशल और आत्मविश्वास को बढ़ा सकते हैं। ". गेम के निर्माण के लिए धैर्य और आवश्यक कौशल की समझ की आवश्यकता होती है। गेम डिज़ाइन एक प्रोग्रामिंग चुनौती है जिसे आप लेने का प्रयास कर सकते हैं स्पिन ऑन करें।

    जावास्क्रिप्ट जल्लाद

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

    • अनुमानों की सीमा निर्धारित करें
    • खिलाड़ियों को अपने अनुमान लगाने के लिए एक इंटरफ़ेस दें
    • दिखाएं कि उन्होंने किन खिलाड़ियों का अनुमान लगाना छोड़ दिया
    • खिलाड़ियों के अनुमान के लिए एक शब्द तैयार करें।

    इस प्रोजेक्ट में कुछ समय लग सकता है, लेकिन यह इसके लायक है। जैसे-जैसे आप अधिक विकसित होते जाते हैं, ग्राफिक्स और ध्वनियों को जोड़कर गहरा होता जाता है।

    जावास्क्रिप्ट टिक टीएसी को पैर की अंगुली

    शुरुआती लोगों के लिए एक और महान जावास्क्रिप्ट परियोजना टिक टीएसी को पैर की अंगुली है। यदि आप मेहनती हैं तो खेल एक दिन में पूरा किया जा सकता है। आप एक ग्रिड 3 और 3 में बनाएंगे जिसे प्रत्येक खिलाड़ी क्रॉस लगाने में बारी-बारी लेता है या एक सर्कल.

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

    इसे आसान बनाने के लिए, अपने कोडिंग प्रोजेक्ट में आपकी मदद करने के लिए गेम को सरल चरणों में विभाजित करें।

    JavaScript Pong गेम

    इससे अधिक क्लासिक पोंग गेम नहीं है। यह एक सरल गेम है जिसमें आपको एक छोटे ब्लॉक को ऊपर और नीचे ले जाने और एक बाउंसिंग बॉल की आवश्यकता नहीं होती है। गेम की प्रोग्रामिंग करते समय कोड करने के लिए कुछ चीजें पोंग की संख्या इस प्रकार है:

    • जब भी गेंद किसी चीज से टकराती है तो उसे तेजी से हिलाएँ
    • कंप्यूटर को तेजी से आगे बढ़ने दें। यादृच्छिक अंतराल।
    • रैकेट से गेंद को उछालें।
    • गेंद के रैकेट से गुजरने के बाद स्कोर दिखाएं।

    Pla y Ja VaScript ग्राफ़िक्स के साथ

    <वर्ग चित्र = "wp-bloc-image">  रंगीन हेक्सागोन्स की एक श्रृंखला। 1000 = "667" src = "https://744025.smushcdn.com/1245953/wp-content/uploads/2020/01/harald-unchlander jpg? हानिपूर्ण = 1 और पट्टी = 1 और वेबप = 1 "alt =" रंगीन हेक्सागोन्स की एक श्रृंखला। "वर्ग =" wp-image-10912 "srcset =" https://744025.smushcdn.com/1245953/wp-content/ अपलोड/ 2020/01 / हाराल्ड-अरलैंडर-XigdchQe41I-unsplash-20x13 .jpg? हानिपूर्ण = 1 और बैंड = 1 और वेब = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020 /01/harald-arlander-XigdchQe41I-unsplash.jpg?size=234x156&lossy = 1 और बैंड = 1 और वेबप = 1234W, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/01/harald -अरलैंडर-XigdchQe41I-unsplash-385x257.jpg?lossy=1& बैंड = 1 और वेबप = 1385w, https: // 744025.smushcdn.com/1245953/wp-content/uploads/2020/01/harald-arlander-XigdchQe41I- unsplash.jpg?size=468x312&lossy=1&strip = 1 और webp = 1468w, https://744025.smushcdn.com/1245953 /wp-content/uploads/2020/01/harald-arlander-XigdchQe4 1I-unsplash.jpg?size=702x468&lossy=1&strip= 1 और webp = 1702W, https: // 744025.smushcdn.com/1245953/wp-content/uploads/ 2020/01 / harald-Arlander-XigdchQe41I-unsplash-768x512। जेपीजी हानिपूर्ण = 1 और पट्टी = 1 और वेबप = 1,768w, https: //744025.smushcdn। कॉम / 124 5953 / wp-सामग्री / अपलोड / 2020/01 / harald- Arlander-XigdchQe41I-unsplash-770x514.jpg? हानिपूर्ण = 1 और बैंड = 1 और वेबप = 1770W, https://744025.smushcdn.com / 1245953 / wp -सामग्री / अपलोड / 2020/01 / harald-Arlander-XigdchQe41I-unsplash.jpg? आकार = 936x624 और हानिपूर्ण = 1 और पट्टी = 1 और वेबपी = 1936w, https://744025.smushcdn.com/1245953/wp- सामग्री / अपलोड / 2020/01 / harald-Arlander-XigdchQe41I-unsplash.jpg? हानिपूर्ण = 1 और बैंड = 1 और वेबप = 1 1000W "आकार =" (अधिकतम चौड़ाई: 1000px) 100vw, 1000px ">
    इंद्रधनुष का उपयोग करना सीखें। figcaption>

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

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

    एक प्रश्नोत्तरी बनाएं

    एक पेज साफ, पेंसिल और टेबल पर शार्पनर से खाली।

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

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

    अपने कौशल को फ्लेक्स करें और एक यादृच्छिक संख्या जनरेटर बनाएं

     अक्षरों और संख्याओं का मिश्रण।  अक्षरों और संख्याओं का मिश्रण इसे रैंडमाइज करें, बेबी

    अगर आपके पास पहले से ही "शुरुआती प्रोग्रामर" का विचार है बात है और एक चुनौती की तलाश में हैं, तो आप कुछ अधिक उन्नत गतिविधियों पर एक नज़र डालना चाहेंगे। यादृच्छिक संख्या पीढ़ी: एक वास्तविक और ठोस पीढ़ी संख्या जो इस पागल दुनिया में मौका के जितना करीब हो सके; एक संतोषजनक परियोजना है कुछ अनुभव वाले JavaScript प्रोग्रामर के लिए।

    आपने नैनो आईडी ? काम करने वाले यादृच्छिक संख्या जनरेटर बनाने के लिए आपको बस इतना ही चाहिए। इस प्रकार के एप्लिकेशन को अपने दम पर बनाने के लिए कौशल और महत्वाकांक्षा रखने से आप अगले व्यवसाय को आकर्षित करेंगे, जिसमें आप खुद को लागू करेंगे। इसमें कुछ काम लगेगा नंबर जेनरेटर और आईडी नैनो की अवधारणा में महारत हासिल है, लेकिन ऐसा करने में, आप अपने सिर और कंधों को अन्य उम्मीदवारों से ऊपर रख रहे हैं और सुरक्षा में अपनी रुचि का संकेत हायरिंग मैनेजर को दे रहे हैं। s .

    शुरुआती और उन्नत प्रोग्रामर के लिए अन्य JavaScript प्रोजेक्ट

    जावास्क्रिप्ट सीखकर आप ढेरों प्रोजेक्ट कर सकते हैं। अपने आप को चुनौती दें क्योंकि आप अधिक जटिल चीजें करते रहते हैं। आप जो भी बनाते हैं उसमें अपने सर्वोत्तम कौशल का प्रदर्शन करके अपने पोर्टफोलियो में सुधार करें। यहां उन विभिन्न परियोजनाओं की सूची दी गई है जिन्हें आप पूरा कर सकते हैं।

    मौसम ऐप

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

    < मजबूत>स्टॉपवॉच

    एक साधारण स्टॉपवॉच को एन्कोड करें जो एक बटन के स्पर्श पर रुकती और शुरू होती है। आप काउंटडाउन टाइमर सेट करके और आगे जा सकते हैं।

    घड़ी

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

    लैंडिंग पेज

    यदि आप करियर के लिए जावास्क्रिप्ट प्रोग्रामिंग का उपयोग कर रहे हैं , यह वेबसाइट डिजाइन और विकास में काम कर सकता है। जावास्क्रिप्ट के साथ एक लैंडिंग पृष्ठ बनाना आपको सिखाता है कि किसी वेबसाइट पर कोड कैसे लागू किया जाए। Usa questo linguaggio di programmazione per acquire dati sul sito o aiutare the person to create a profilo.

    Elenco della pesa

    Ti dimentichi semper un oggetto quando Vai शॉपिंग करना? खरीदारी की सूची ट्रैक रखने का एक शानदार तरीका है। यह प्रोजेक्ट आपको सिखाता है कि जब उपयोगकर्ता किसी सूची में कुछ जोड़ते हैं तो उन्हें कैसे सूचित किया जाए। यह आपको यह भी सिखाता है कि एक खोज फ़िल्टर कैसे बनाया जाता है और वस्तुओं को एक सूची में कैसे रखा जाता है। उत्पादों की कीमतें जोड़ें और खरीदारी से पहले लागत की गणना करने के लिए कैलकुलेटर का उपयोग करें। खरोंच से अपने स्वयं के जावास्क्रिप्ट प्रोजेक्ट बनाएं। भरोसा करने के लिए कोई कोड नहीं होने से यह एक मुश्किल काम हो जाता है। हालांकि, प्रोजेक्ट में आपकी मदद करने के लिए कई संसाधन हैं।

    <शैली मीडिया = "सभी">। प्रशंसापत्र-अनुभाग, .testimonial-section-1 {पृष्ठभूमि: # f9f9f9; पैडिंग: 50 पीएक्स; पाठ-संरेखण: केंद्र; सीमा-त्रिज्या: 15पीएक्स} .टेस्टिमोनियल-सेक्शन पी, .टेस्टिमोनियल-सेक्शन-1 पी {फ़ॉन्ट-साइज़: 18पीएक्स} .टेस्टिमोनियल-सेक्शन-बेहोश, .टेस्टिमोनियल-सेक्शन-1-बेहोश {रंग: ग्रे; फ़ॉन्ट-आकार: 16px}. प्रशंसापत्र-अनुभाग बटन,। प्रशंसापत्र-अनुभाग -1 बटन {रंग: आरजीबी (255,255,255); सीमा: मध्यम कोई नहीं; ऊंचाई: 40 पीएक्स; उपयोगकर्ता चयन: कोई नहीं; प्रदर्शन: फ्लेक्स; भरें: 20 पीएक्स; फ़ॉन्ट आकार: 12px; कर्सर: सूचक; संक्रमण: सभी 0.5s 0s की सुविधा प्रदान करते हैं; फ़ॉन्ट-वजन: 500; फ़ॉन्ट-परिवार: रूबिक; सीमा-त्रिज्या: 4px; -मोज़-बॉक्स-संरेखण: केंद्र; संरेखित-आइटम: केंद्र; -मोज़-बॉक्स-पैक: केंद्र; औचित्य-सामग्री: केंद्र; पाठ परिवर्तन: अपरकेस; अधिकतम चौड़ाई: 350px; मार्जिन: ऑटो; शीर्ष मार्जिन: 30px; पृष्ठभूमि: आरजीबी (60 145 230) नो स्क्रॉल रिपीट 0% 0% / 200%}। प्रशंसापत्र-अनुभाग -1 img {सीमा-त्रिज्या: 100px; पैडिंग-बॉटम: 10px}. प्रशंसापत्र-अनुभाग img {चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; सीमा-त्रिज्या: 100px; मार्जिन-बॉटम: 20px}