तो, आप एक वेब डेवलपर बनना चाहते हैं?

आप 50 घंटे ट्यूटोरियल देख सकते हैं, या आप कुछ बना सकते हैं।

एक टैप काउंटर फ्रंट-एंड डेवलपर्स के लिए एक "पहली परियोजना" के रूप में सर्वमान्य है। इसमें सभी बुनियादी बातें शामिल हैं: वेरिएबल, फंक्शन, इवेंट लिस्टनर और DOM मैनिपुलेशन।

इस गाइड में, हम आपको कॉपी-पेस्ट कोड नहीं देंगे। हम यह समझाएंगे कि एक टैप काउंटर पर्दे के पीछे कैसे काम करता है।

द लॉजिक फ्लो

एक काउंटर ऐप तीन चीजें करता है:

1. राज्य: यह एक संख्या को याद रखता है (जैसे, `count = 0`) 1. घटना: यह आपके बटन पर क्लिक करने का इंतज़ार करता है। 1. अपडेट: जब क्लिक किया जाता है, तो यह `count = count + 1` करता है और स्क्रीन को अपडेट करता है।

चरण 1: एचटीएमएल (कंकाल)

आपको एक ऐसा स्थान चाहिए जहाँ आप संख्या दिखा सकें और एक बटन पर क्लिक कर सकें।

```

0

यह सब। यह बदसूरत है, लेकिन यह मौजूद है।

चरण 2: जावास्क्रिप्ट (दماغ)

यह वह जगह है जहाँ जादू होता है।

हमें कंप्यूटर को यह बताना होगा: "अरे, वह बटन ढूंढो। जब कोई इसे क्लिक करे, तो नंबर प्राप्त करो, उसमें 1 जोड़ो और उसे फिर से दिखाओ।"

कोड लॉजिक इस प्रकार है:

``` let count = 0; // The State

function increase() { count++; // Add 1 document.getElementById("number").innerText = count; // Update Screen } ```

चरण 3: LocalStorage (स्मृति)

कोड के ऊपर की समस्या क्या है? यदि आप पेज को रिफ्रेश करते हैं, तो गिनती 0 पर वापस चली जाती है।

एक उपयोगी काउंटर बनाने के लिए (जैसे कि तासीह या पंक्ति काउंटर), उसे याद रखने की आवश्यकता होती है।

ब्राउज़र में एक छोटा सा डेटाबेस होता है जिसे `localStorage` कहते हैं।

• बचाइए: हर बार जब हम क्लिक करते हैं, तो हम ब्राउज़र को बताते हैं: "‘काउंट’ को स्थायी रूप से सहेजें।"
• लोड: जब पेज लोड होता है, तो हम पूछते हैं: "क्या आपके पास कोई सेव नंबर है?" यदि हाँ, तो वहाँ से शुरू करें।

क्यों यह परियोजना महत्वपूर्ण है

एक टैप काउंटर बनाना आपको स्टेट मैनेजमेंट की बुनियादी अवधारणा सिखाता है।

यह देखें कि आप एक टू-डू सूची, एक शॉपिंग कार्ट या फेसबुक बना रहे हैं, यह सब एक टैप काउंटर के शानदार संस्करण हैं।

• फेसबुक लाइक बटन? वह एक टैप काउंटर है।
• ट्विटर रीट्वीट काउंट? वो एक टैप काउंटर है।
• अमेज़न कार्ट आइटम गिनती? वह एक टैप काउंटर है।

निष्कर्ष

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