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

जावास्क्रिप्ट
गतिशील कार्यक्षमता के साथ ऐप में अन्तरक्रियाशीलता लाना।

let count = 0let countEl = document.getElementById(\\\"count-el\\\")let saveEl = document.getElementById (\\\"save-el\\\")function increment() {       count  = 1    countEl.textContent = count}function save() {    let countStr = count   \\\" - \\\"    saveEl.textContent  = countStr    countEl.textContent = 0    count = 0}

स्पष्टीकरण:

परिवर्तनीय घोषणा:

वृद्धि समारोह:

सेव फ़ंक्शन:

ऐप का उपयोग कैसे करें

गिनती बढ़ाएँ:
गिनती 1 से बढ़ाने के लिए \\\"वृद्धि\\\" बटन पर क्लिक करें। प्रदर्शित संख्या वास्तविक समय में अपडेट हो जाएगी।

गिनती सहेजें:
वर्तमान गिनती लॉग करने के लिए \\\"सहेजें\\\" बटन पर क्लिक करें। गिनती पिछली प्रविष्टियों की सूची में जोड़ दी जाएगी, और डिस्प्ले 0 पर रीसेट हो जाएगा।

पिछली प्रविष्टियां देखें:
सहेजी गई गिनती \\\"पिछली प्रविष्टियाँ\\\" अनुभाग के नीचे दिखाई देगी, जहाँ आप अपनी गिनती के इतिहास की समीक्षा कर सकते हैं।

सीख सीखी

पीपल काउंटर का निर्माण एक व्यावहारिक अनुभव था, विशेष रूप से स्क्रिम्बा पर एक ट्यूटोरियल के बाद। इसने HTML, CSS और जावास्क्रिप्ट में प्रमुख अवधारणाओं को सुदृढ़ किया और प्रदर्शित किया कि एक कार्यात्मक, उत्तरदायी वेब एप्लिकेशन कैसे बनाया जाए।

निष्कर्ष

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

","image":"http://www.luping.net/uploads/20240902/172524384466d521c4a3f5f.jpg","datePublished":"2024-09-02T10:24:04+08:00","dateModified":"2024-09-02T10:24:04+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
ऑनलाइन उपकरण
सॉफ्टवेयर ट्यूटोरियल
साइट नेविगेशन
प्रोग्रामिंग
मुखपृष्ठ > प्रोग्रामिंग > "द पीपल काउंटर" का निर्माण: बचपन की गिनती से आधुनिक वेबसाइट तक की यात्रा

"द पीपल काउंटर" का निर्माण: बचपन की गिनती से आधुनिक वेबसाइट तक की यात्रा

2024-09-02 को प्रकाशित
ब्राउज़ करें:829

Building \

परिचय

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

द पीपल काउंटर बनाने का प्राथमिक लक्ष्य जावास्क्रिप्ट में गोता लगाना, इसके सिंटैक्स को समझना और इसके प्रवाह के साथ सहज होना था। जबकि मैंने इसे "द पीपल काउंटर" नाम दिया है, यह अवधारणा बहुमुखी है और इसे किसी भी प्रकार के काउंटर के लिए अनुकूलित किया जा सकता है - चाहे वह कार काउंटर, हाउस काउंटर, टॉफ़ी काउंटर, या यहां तक ​​कि एक स्टार काउंटर भी हो। यह मूल रूप से एक काउंटर ऐप है जो जावास्क्रिप्ट प्रोग्रामिंग की मूल बातें समझने में मदद करता है।

यह प्रोजेक्ट स्क्रिम्बा लर्निंग प्लेटफॉर्म के संसाधनों का उपयोग करके बनाया गया था, जिसने विकास प्रक्रिया के दौरान मूल्यवान अंतर्दृष्टि और मार्गदर्शन प्रदान किया।

एप्लिकेशन को क्रियाशील देखने के लिए क्लिक करें!

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

विशेषताएं जो गिनती को मजेदार बनाती हैं

  1. वास्तविक समय गणना
    "वृद्धि" बटन के एक साधारण क्लिक से अपनी गिनती पर नज़र रखें। अब मैन्युअल मिलान की आवश्यकता नहीं!
    वृद्धिबटन>
    हर बार जब आप बटन पर क्लिक करते हैं तो यह सुविधा प्रदर्शित संख्या को तुरंत अपडेट कर देती है।

  2. प्रविष्टियां सहेजें और देखें
    अपनी गिनती लॉग करें और पिछली प्रविष्टियों का इतिहास देखें। समय के साथ एकाधिक गणनाओं पर नज़र रखने के लिए बिल्कुल सही।
    सहेजेंबटन>


    बटन के नीचे एक सूची में सहेजी गई गिनती जोड़ दी जाती है, जिससे आप अपनी गिनती के इतिहास की समीक्षा कर सकते हैं।

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

ऐप को सशक्त बनाने वाली प्रौद्योगिकियां

HTML : एप्लिकेशन की रीढ़, आवश्यक संरचना प्रदान करती है।



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

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

जावास्क्रिप्ट
गतिशील कार्यक्षमता के साथ ऐप में अन्तरक्रियाशीलता लाना।

let count = 0

let countEl = document.getElementById("count-el")

let saveEl = document.getElementById ("save-el")


function increment() {   
    count  = 1
    countEl.textContent = count
}

function save() {
    let countStr = count   " - "
    saveEl.textContent  = countStr
    countEl.textContent = 0
    count = 0
}

स्पष्टीकरण:

परिवर्तनीय घोषणा:

  • गिनती = 0;: वेतन वृद्धि की संख्या पर नज़र रखने के लिए एक परिवर्तनीय गिनती शुरू करता है।
  • let countEl = document.getElementById('count-el');: HTML तत्व को पुनः प्राप्त करता है जहां वर्तमान गिनती प्रदर्शित होती है और इसे countEl को असाइन करता है।
  • let saveEl = document.getElementById('save-el');: HTML तत्व को पुनर्प्राप्त करता है जहां सहेजी गई गिनती प्रदर्शित की जाएगी और इसे saveEl को असाइन करता है।

वृद्धि समारोह:

  • गिनती = 1;: हर बार फ़ंक्शन को कॉल करने पर गिनती चर को 1 से बढ़ा देता है।
  • countEl.textContent = count;: नए मान को प्रतिबिंबित करने के लिए countEl तत्व में प्रदर्शित गिनती को अपडेट करता है।

सेव फ़ंक्शन:

  • let countStr = count " - ";: वर्तमान गिनती से एक स्ट्रिंग बनाता है और पृथक्करण के लिए एक डैश जोड़ता है।
  • saveEl.textContent = countStr;: saveEl तत्व में सहेजी गई गिनती की मौजूदा सूची में नई गिनती स्ट्रिंग जोड़ता है।
  • countEl.textContent = 0;: सहेजने के बाद प्रदर्शित गिनती को 0 पर रीसेट करता है।
  • गिनती = 0;: अगले गिनती सत्र के लिए नए सिरे से शुरुआत करने के लिए गिनती चर को 0 पर रीसेट करता है।

ऐप का उपयोग कैसे करें

गिनती बढ़ाएँ:
गिनती 1 से बढ़ाने के लिए "वृद्धि" बटन पर क्लिक करें। प्रदर्शित संख्या वास्तविक समय में अपडेट हो जाएगी।

गिनती सहेजें:
वर्तमान गिनती लॉग करने के लिए "सहेजें" बटन पर क्लिक करें। गिनती पिछली प्रविष्टियों की सूची में जोड़ दी जाएगी, और डिस्प्ले 0 पर रीसेट हो जाएगा।

पिछली प्रविष्टियां देखें:
सहेजी गई गिनती "पिछली प्रविष्टियाँ" अनुभाग के नीचे दिखाई देगी, जहाँ आप अपनी गिनती के इतिहास की समीक्षा कर सकते हैं।

सीख सीखी

पीपल काउंटर का निर्माण एक व्यावहारिक अनुभव था, विशेष रूप से स्क्रिम्बा पर एक ट्यूटोरियल के बाद। इसने HTML, CSS और जावास्क्रिप्ट में प्रमुख अवधारणाओं को सुदृढ़ किया और प्रदर्शित किया कि एक कार्यात्मक, उत्तरदायी वेब एप्लिकेशन कैसे बनाया जाए।

निष्कर्ष

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

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 यदि है किसी भी उल्लंघन को हटाने के लिए कृपया [email protected] से संपर्क करें
नवीनतम ट्यूटोरियल अधिक>
वर्गीकरणअधिक>
जापानी सीखें कोरियाई सीखो चीनी सीखें विदेशी भाषा सीखें खेल आम समस्या प्रौद्योगिकी परिधीय ऐ सॉफ्टवेयर ट्यूटोरियल प्रोग्रामिंग लेख

चीनी भाषा का अध्ययन करें

औजारअधिक>
छवि बेस64 डिकोडिंग
चीनी पिनयिन
यूनिकोड एन्कोडिंग
जेएस ऑबफस्केशन एन्क्रिप्शन संपीड़न
यूआरएल हेक्साडेसिमल एन्क्रिप्शन उपकरण
UTF-8 एन्कोडिंग रूपांतरण उपकरण
ऑनलाइन Ascii एन्कोडिंग और डिकोडिंग उपकरण
MD5 एन्क्रिप्शन उपकरण
हैश/हैश टेक्स्ट ऑनलाइन एन्क्रिप्शन और डिक्रिप्शन टूल
ऑनलाइन SHA एन्क्रिप्शन

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3