फ्रंट-एंड डेवलपर के लिए छह कार्य

1. क्रेडिट कार्ड फॉर्म

सहज और आनंददायक माइक्रो-इंटरैक्शन के साथ एक अच्छा क्रेडिट कार्ड आकार। इसमें नंबर फ़ॉर्मेटिंग, सत्यापन और स्वचालित कार्ड प्रकार का पता लगाना शामिल है। यह Vue.js पर बनाया गया है और पूरी तरह उत्तरदायी भी है। (आप देख सकते हैं यहां.)

क्रेडिट-कार्ड-फ़ॉर्म

आप क्या सीखेंगे:

• प्रपत्रों को संसाधित करें और सत्यापित करें
• घटनाओं को संभालें (उदाहरण के लिए, जब फ़ील्ड बदलते हैं)
• समझें कि पृष्ठ पर तत्वों को कैसे प्रदर्शित और रखा जाए, विशेष रूप से फॉर्म के शीर्ष पर दिखाई देने वाली क्रेडिट कार्ड की जानकारी

एडिसन सॉफ्टवेयर के समर्थन से लेख का अनुवाद किया गया था, जो प्रोग्रामर्स के स्वास्थ्य और उनके नाश्ते का ख्याल रखता हैऔर कस्टम सॉफ्टवेयर विकसित करता है.

2. हिस्टोग्राम

हिस्टोग्राम एक चार्ट या ग्राफ़ है जो आयताकार पट्टियों के साथ श्रेणीबद्ध डेटा का प्रतिनिधित्व करता है जिनकी ऊंचाई या लंबाई उनके द्वारा दर्शाए गए मानों के समानुपाती होती है।

इन्हें लंबवत या क्षैतिज रूप से लगाया जा सकता है। वर्टिकल बार चार्ट को कभी-कभी लाइन चार्ट भी कहा जाता है।

आप क्या सीखेंगे:

• डेटा को संरचित और समझने योग्य तरीके से प्रदर्शित करें
• इसके अतिरिक्त: जानें कि तत्व का उपयोग कैसे करें canvas और इसके साथ तत्व कैसे बनाएं

यहां आप विश्व जनसंख्या डेटा पा सकते हैं। इन्हें वर्ष के अनुसार क्रमबद्ध किया जाता है।

3. ट्विटर हार्ट एनिमेशन

2016 में, ट्विटर ने अपने ट्वीट्स के लिए यह अद्भुत एनीमेशन पेश किया। 2019 तक, यह अभी भी हिस्सा दिखता है, तो क्यों न इसे स्वयं बनाया जाए?

आप क्या सीखेंगे:

• CSS विशेषता के साथ कार्य करें keyframes
• HTML तत्वों में हेरफेर और चेतन करें
• जावास्क्रिप्ट, HTML और CSS को मिलाएं

4. खोज फ़ंक्शन के साथ GitHub रिपॉजिटरी

यहां कुछ भी आकर्षक नहीं है—GitHub रिपॉजिटरी केवल एक महिमामंडित सूची है।
लक्ष्य रिपॉजिटरी को प्रदर्शित करना और उपयोगकर्ता को उन्हें फ़िल्टर करने की अनुमति देना है। उपयोग आधिकारिक GitHub एपीआई प्रत्येक उपयोगकर्ता के लिए रिपॉजिटरी प्राप्त करने के लिए।

GitHub प्रोफाइल पेज - github.com/indreklasn

आप क्या सीखेंगे:

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

5. Reddit-शैली की चैट

अपनी सरलता और उपयोग में आसानी के कारण चैट संचार का एक लोकप्रिय तरीका है। लेकिन वास्तव में आधुनिक चैट रूम को क्या बढ़ावा देता है? वेबसॉकेट!

आप क्या सीखेंगे:

• वेबसॉकेट, वास्तविक समय संचार और डेटा अपडेट का उपयोग करें
• उपयोगकर्ता पहुंच स्तरों के साथ काम करें (उदाहरण के लिए, चैट चैनल के मालिक की भूमिका होती है admin, और कमरे में अन्य लोग - user)
• प्रपत्रों को संसाधित करें और सत्यापित करें - याद रखें, संदेश भेजने के लिए चैट विंडो है input
• अलग-अलग चैट बनाएं और जुड़ें
• व्यक्तिगत संदेशों के साथ काम करें. उपयोगकर्ता अन्य उपयोगकर्ताओं के साथ निजी तौर पर चैट कर सकते हैं। मूलतः, आप दो उपयोगकर्ताओं के बीच एक WebSocket कनेक्शन स्थापित कर रहे होंगे।

6. धारी-शैली नेविगेशन

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

आप क्या सीखेंगे:

• सीएसएस एनिमेशन को ट्रांज़िशन के साथ संयोजित करें
• सामग्री को मंद करें और फ़्लोट किए गए तत्व पर सक्रिय वर्ग लागू करें

पहले इसे स्वयं करने का प्रयास करें, लेकिन यदि आपको सहायता की आवश्यकता हो, तो इसे देखें चरण-दर-चरण मार्गदर्शिका.

स्रोत: www.habr.com