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

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

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



क्रेडिट कार्ड फार्म

क्या सीखें:

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

यह लेख EDISON सॉफ़्टवेयर के समर्थन से अनुवादित किया गया था, जो प्रोग्रामर और उनके नाश्ते के स्वास्थ्य का ख्याल रखता है , और कस्टम सॉफ़्टवेयर भी विकसित करता है ।

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

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

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



क्या सीखें:

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

यहां आप दुनिया की आबादी का डेटा पा सकते हैं। वे साल के अनुसार हल कर रहे हैं।

3. ट्विटर दिल का एनीमेशन

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


क्या सीखें:

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

4. खोज समारोह के साथ GitHub रिपॉजिटरी

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



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

क्या सीखें:

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

5. रेडिट-स्टाइल चैट

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



क्या सीखें:

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

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

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



क्या सीखें:

• संक्रमण के साथ सीएसएस एनीमेशन को मिलाएं
• सामग्री को शेड करें और रोमिंग आइटम पर सक्रिय वर्ग लागू करें

पहले इसे स्वयं करने का प्रयास करें, लेकिन यदि आपको सहायता की आवश्यकता है, तो इस वॉकथ्रू को देखें ।

ब्लॉग भी पढ़ें
EDISON कंपनी:

के लिए 20 पुस्तकालय
शानदार iOS आवेदन