कैलकुलेटर परियोजना: यह आसान क्यों था, फिर भी बाधाओं से भरा हुआ

नमस्ते, मैं ब्लेज़ हूं,

कैलकुलेटर प्रोजेक्ट पर काम करना काफी मजेदार था और मैं कहूंगा कि यह एक अलग अनुभव था। एच-ए-स्केच से अलग जो ज़्यादा मुश्किल लगता था। फिर यह कैसे संभव है?

मुझे लगता है कि इसका जवाब अभ्यास की कठिनाई में नहीं बल्कि किसी और चीज़ में छिपा है। चलिए शुरू से शुरू करते हैं।

कैलकुलेटर परियोजना शुरू करना

मैंने 2 मई, 2024 को कैलकुलेटर पर काम करना शुरू किया। पहले सत्र में मुझे तीन घंटे लगे, जिसके दौरान मैं इसे सेट करने और चलाने में कामयाब रहा। दोपहर के आसपास का समय था, इसलिए मैंने अंतिम प्रतिबद्धता बनाने, रात का खाना खाने और कसरत करने का फैसला किया।

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

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

अप्रत्याशित प्रेरणाएँ

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

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

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

हालाँकि, मैंने पहले कभी कोडिंग नहीं की थी!

प्रारंभिक कोडिंग अनुभव

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

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

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

मुझे ऐसा महसूस हुआ जैसे मैं कोई बच्चा हूँ जो कोई पागल लेगो टेक्निक कार बना रहा हूँ और सोच रहा हूँ कि उसमें क्या-क्या विशेषताएँ जोड़नी हैं। अजीब सा एहसास।

प्रक्रिया का आनंद लें

मेरा वास्तव में क्या मतलब है? मुझे पता था कि मैं नौ अलग-अलग बटन बनाने के बजाय सभी अंक बटनों के लिए ईवेंट के साथ एक फ़ंक्शन बना सकता था।

हालांकि, मैं भूल गया कि इसे ठीक से कैसे बनाया जाए और 9 अलग-अलग लोगों के साथ आगे बढ़ने का फैसला किया, लेकिन मैंने खुद से वादा किया कि मैं वापस जाऊंगा और इस मुद्दे को हल करने के तरीके पर कुछ सबक दिए गए दस्तावेज़ों को पढ़ूंगा। जैसा कि मैंने सोचा था कि मैंने किया।

मुझे लग रहा था कि मैं अगले पाँच घंटे तक किसी चीज़ पर अटका रहूँगा, लेकिन ऐसा कभी नहीं हुआ। मैंने 244 लाइन के कोड के साथ इसे काम कर लिया।

सीएसएस से जुड़ी चुनौतियाँ

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

मुझे यकीन नहीं हुआ! मुझे पता था कि मुझे इस प्रोजेक्ट के लिए फ्लेक्सबॉक्स का इस्तेमाल करना होगा, लेकिन बटन पहले बनाए गए एच-ए-स्केच से थोड़े अलग दिख रहे थे। एच-ए-स्केच में, मुझे लूप का उपयोग करके ग्रिड बनाने के लिए कहा गया था:

जब भी मैं फ्लेक्सबॉक्स के साथ फंस जाता हूं, तो मैं हमेशा जोश के ब्लॉग पोस्ट की ओर मुड़ता हूं। मेरे विचार से वे कैसे काम करते हैं, इसका इससे बेहतर कोई स्पष्टीकरण नहीं है।

हालाँकि, मुझे यकीन नहीं था कि यह कैलकुलेटर के लिए कारगर होगा या नहीं, क्योंकि सभी बटन बराबर नहीं होते। उदाहरण के लिए, मैं चाहता था कि 0 बड़ा हो।

मैंने लेख को नीचे स्क्रॉल किया क्योंकि मुझे याद आया कि वहाँ CSS ग्रिड का उल्लेख किया गया था। यह पता चला कि मुझे वास्तव में यहाँ इसका उपयोग करने की आवश्यकता होगी।

इसके अलावा, ओडिन द्वारा उदाहरण के रूप में दिखाया गया कैलकुलेटर भी CSS ग्रिड का उपयोग करके डिज़ाइन किया गया था।

CSS ग्रिड की खोज

इस समय मैं थोड़ा भ्रमित था, क्योंकि जहां तक मुझे याद है, हमने ग्रिड को बिल्कुल भी नहीं छुआ था।

मैंने इसे गूगल पर खोजना शुरू किया। मुझे क्या मिला? एक बड़ा लेख जिसमें इसे इस्तेमाल करने के तरीके के बारे में काफी विस्तृत जानकारी दी गई थी। मुझे लगा कि अभी इसके लिए समय नहीं है और मैंने मान लिया कि हमें बाद में ग्रिड से परिचित कराया जाएगा।

इसके अलावा, अभ्यास में केवल फ्लेक्सबॉक्स का उल्लेख किया गया था, इसलिए हाँ, मुझे उम्मीद है कि हम ग्रिड भी सीखेंगे। यदि नहीं, तो मैं किसी समय खुद ही इस पर वापस आऊँगा।

थोड़ा अपडेट - अगले दिन, मैंने ओडिन डिस्कॉर्ड पर यह पोस्ट देखी:

अंतिम समायोजन और यूआई डिज़ाइन

मैंने कुछ divs के साथ जाने का फैसला किया और HTML में बटनों को फिर से समूहित किया

एक और अध्ययन सत्र के बाद, कैलकुलेटर किसी सामान्य उपकरण जैसा लगने लगा।

कीबोर्ड समर्थन जोड़ना

मेरे लिए अंतिम चरण कीबोर्ड सपोर्ट बनाना था।

यह आसान नहीं था, और मुझे इवेंट लेसन पर वापस जाना पड़ा और यह समझने के लिए कि कीबोर्ड कीज़ कैसे काम करती हैं, कई बार डॉक्यूमेंटेशन पढ़ना पड़ा।

यह काफी कठिन था, क्योंकि इवेंट बबलिंग मुझे भ्रमित कर रहा था। यह एक ऐसा फंक्शन बनाने का सही समय था जो बटन क्लिक करेगा और इसके लिए 2 कॉल करेगा। एक माउस 'क्लिक' के लिए, और दूसरा कीबोर्ड 'कीडाउन' के लिए।

मैं सभी अंकों और बराबर बटनों को क्रमबद्ध करने में कामयाब रहा, लेकिन ऑपरेटरों के साथ नहीं जाने का निर्णय लिया क्योंकि मुझे ऑपरेटर की ऑब्जेक्ट के साथ अपने तर्क को बदलना होगा।

यदि मुझे बाद में इसकी समीक्षा करनी पड़े तो यह सेटअप समझना आसान लगता है।

हालाँकि, हो सकता है कि मैं गलत होऊँ, इसलिए इसे हल्के में न लें।

तैयार परियोजना यहां देखी जा सकती है:

कैलकुलेटर

चिंतन और सीखे गए सबक

यहाँ क्या सबक मिला? मुझे ऐप बनाने और उसे डिज़ाइन करने की प्रक्रिया में मज़ा आया और मैंने इवेंट के बारे में बहुत कुछ सीखा। मैं आपको इस ऐप के साथ अतिरिक्त क्रेडिट प्रक्रिया से गुज़रने की अत्यधिक अनुशंसा करता हूँ!

अगर आपको यह कहानी पसंद आई और सुझाव आपके लिए मददगार साबित हुए, तो अधिक अपडेट और कोडिंग टिप्स के लिए मुझे ट्विटर पर फॉलो करें। मुझे नीचे कमेंट में आपकी कोडिंग चुनौतियों और सफलताओं के बारे में सुनना अच्छा लगेगा!