फ्रन्ट-एन्ड विकासकर्ताका लागि छवटा कार्यहरू

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

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

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

तपाईंले के सिक्नुहुनेछ:

• प्रक्रिया र फारम प्रमाणीकरण
• घटनाहरू ह्यान्डल गर्नुहोस् (उदाहरणका लागि, जब क्षेत्रहरू परिवर्तन हुन्छन्)
• पृष्ठमा तत्वहरू कसरी प्रदर्शन गर्ने र राख्ने भन्ने बुझ्नुहोस्, विशेष गरी फारमको शीर्षमा देखा पर्ने क्रेडिट कार्ड जानकारी

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

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

हिस्टोग्राम एउटा चार्ट वा ग्राफ हो जसले आयताकार पट्टीहरूसँग उचाइ वा लम्बाइहरू तिनीहरूले प्रतिनिधित्व गर्ने मानहरूको समानुपातिक रूपमा वर्गीकृत डेटा प्रतिनिधित्व गर्दछ।

तिनीहरू ठाडो वा तेर्सो रूपमा लागू गर्न सकिन्छ। ठाडो बार चार्टलाई कहिलेकाहीँ रेखा चार्ट भनिन्छ।

तपाईंले के सिक्नुहुनेछ:

• संरचित र बुझ्ने तरिकामा डेटा प्रदर्शन गर्नुहोस्
• थप रूपमा: तत्व कसरी प्रयोग गर्ने जान्नुहोस् canvas र यसको साथ तत्वहरू कसरी आकर्षित गर्ने

यो छ तपाईं विश्व जनसंख्या डाटा पाउन सक्नुहुन्छ। तिनीहरू वर्ष द्वारा क्रमबद्ध छन्।

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

2016 मा फिर्ता, ट्विटरले आफ्नो ट्वीटहरूको लागि यो अद्भुत एनिमेसन प्रस्तुत गर्‍यो। 2019 को रूपमा, यो अझै पनि भाग देखिन्छ, त्यसोभए किन आफैं सिर्जना नगर्ने?

तपाईंले के सिक्नुहुनेछ:

• CSS विशेषतासँग काम गर्नुहोस् keyframes
• HTML तत्वहरू हेरफेर र एनिमेट गर्नुहोस्
• JavaScript, HTML र CSS जोड्नुहोस्

4. खोज प्रकार्य संग GitHub भण्डार

यहाँ केहि फैंसी छैन - GitHub भण्डारहरू केवल एक महिमा सूची हो।
लक्ष्य भनेको भण्डारहरू प्रदर्शन गर्नु र प्रयोगकर्तालाई तिनीहरूलाई फिल्टर गर्न अनुमति दिनु हो। प्रयोग गर्नुहोस् आधिकारिक GitHub API प्रत्येक प्रयोगकर्ताको लागि भण्डारहरू प्राप्त गर्न।

GitHub प्रोफाइल पृष्ठ - github.com/indreklasn

तपाईंले के सिक्नुहुनेछ:

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

5. Reddit-शैली च्याटहरू

कुराकानीहरू तिनीहरूको सरलता र प्रयोगको सजिलोको कारण संचारको लोकप्रिय माध्यम हो। तर के वास्तवमा आधुनिक च्याट कोठाहरू इन्धन गर्छ? वेबसकेटहरू!

तपाईंले के सिक्नुहुनेछ:

• WebSockets, वास्तविक समय सञ्चार र डाटा अपडेटहरू प्रयोग गर्नुहोस्
• प्रयोगकर्ता पहुँच स्तरहरूसँग काम गर्नुहोस् (उदाहरणका लागि, च्याट च्यानलको मालिकको भूमिका हुन्छ admin, र कोठामा अन्य - user)
• प्रशोधन गर्नुहोस् र फारमहरू मान्य गर्नुहोस् - सम्झनुहोस्, सन्देश पठाउनको लागि च्याट विन्डो हो input
• विभिन्न च्याटहरू सिर्जना गर्नुहोस् र सामेल हुनुहोस्
• व्यक्तिगत सन्देशहरूसँग काम गर्नुहोस्। प्रयोगकर्ताहरूले अन्य प्रयोगकर्ताहरूसँग निजी रूपमा च्याट गर्न सक्छन्। अनिवार्य रूपमा, तपाईंले दुई प्रयोगकर्ताहरू बीच वेबसकेट जडान स्थापना गर्नुहुनेछ।

6. स्ट्राइप-शैली नेभिगेसन

के यो नेभिगेसन अद्वितीय बनाउँछ कि पपओभर कन्टेनर सामग्री फिट गर्न रूपान्तरण। नयाँ पपओभर खोल्ने र बन्द गर्ने परम्परागत व्यवहारको तुलनामा यो संक्रमणको सुन्दरता छ।

तपाईंले के सिक्नुहुनेछ:

• ट्रान्जिसनको साथ CSS एनिमेसनहरू मिलाउनुहोस्
• सामग्रीलाई मधुरो पार्नुहोस् र फ्लोटेड तत्वमा सक्रिय वर्ग लागू गर्नुहोस्

यसलाई पहिले आफैले गर्ने प्रयास गर्नुहोस्, तर यदि तपाईंलाई मद्दत चाहिन्छ भने, यो जाँच गर्नुहोस् चरण गाइड द्वारा चरण.

स्रोत: www.habr.com