1. Форма кредитной карты
सहज और आनंददायक माइक्रो-इंटरैक्शन के साथ एक अच्छा क्रेडिट कार्ड आकार। इसमें नंबर फ़ॉर्मेटिंग, सत्यापन और स्वचालित कार्ड प्रकार का पता लगाना शामिल है। यह Vue.js पर बनाया गया है और पूरी तरह उत्तरदायी भी है। (आप देख सकते हैं .)
आप क्या सीखेंगे:
- प्रपत्रों को संसाधित करें और सत्यापित करें
- घटनाओं को संभालें (उदाहरण के लिए, जब फ़ील्ड बदलते हैं)
- समझें कि पृष्ठ पर तत्वों को कैसे प्रदर्शित और रखा जाए, विशेष रूप से फॉर्म के शीर्ष पर दिखाई देने वाली क्रेडिट कार्ड की जानकारी
एडिसन सॉफ्टवेयर के समर्थन से लेख का अनुवाद किया गया था, जो और .
2. Гистограмма
हिस्टोग्राम एक चार्ट या ग्राफ़ है जो आयताकार पट्टियों के साथ श्रेणीबद्ध डेटा का प्रतिनिधित्व करता है जिनकी ऊंचाई या लंबाई उनके द्वारा दर्शाए गए मानों के समानुपाती होती है।
इन्हें लंबवत या क्षैतिज रूप से लगाया जा सकता है। वर्टिकल बार चार्ट को कभी-कभी लाइन चार्ट भी कहा जाता है।
आप क्या सीखेंगे:
- डेटा को संरचित और समझने योग्य तरीके से प्रदर्शित करें
- इसके अतिरिक्त: जानें कि तत्व का उपयोग कैसे करें
canvasऔर इसके साथ तत्व कैसे बनाएं
आप विश्व जनसंख्या डेटा पा सकते हैं। इन्हें वर्ष के अनुसार क्रमबद्ध किया जाता है।
3. Анимация сердечка Twitter
2016 में, ट्विटर ने अपने ट्वीट्स के लिए यह अद्भुत एनीमेशन पेश किया। 2019 तक, यह अभी भी हिस्सा दिखता है, तो क्यों न इसे स्वयं बनाया जाए?
आप क्या सीखेंगे:
- CSS विशेषता के साथ कार्य करें
keyframes - HTML तत्वों में हेरफेर और चेतन करें
- जावास्क्रिप्ट, HTML और CSS को मिलाएं
4. Репозитории GitHub с функцией поиска
यहां कुछ भी आकर्षक नहीं है—GitHub रिपॉजिटरी केवल एक महिमामंडित सूची है।
लक्ष्य रिपॉजिटरी को प्रदर्शित करना और उपयोगकर्ता को उन्हें फ़िल्टर करने की अनुमति देना है। उपयोग प्रत्येक उपयोगकर्ता के लिए रिपॉजिटरी प्राप्त करने के लिए।
GitHub प्रोफाइल पेज -
आप क्या सीखेंगे:
- एपीआई से डेटा प्राप्त करें
- एपीआई से डेटा प्रदर्शित करें
- प्रत्येक खोज के लिए प्रासंगिक डेटा फ़िल्टर करें और दिखाएं
- वैकल्पिक: यदि आप किसी चुनौती के लिए तैयार हैं, तो उपयोग करें , GraphQL का उपयोग करके बनाया गया। .
5. Чаты в стиле Reddit
अपनी सरलता और उपयोग में आसानी के कारण चैट संचार का एक लोकप्रिय तरीका है। लेकिन वास्तव में आधुनिक चैट रूम को क्या बढ़ावा देता है? वेबसॉकेट!
आप क्या सीखेंगे:
- वेबसॉकेट, वास्तविक समय संचार और डेटा अपडेट का उपयोग करें
- उपयोगकर्ता पहुंच स्तरों के साथ काम करें (उदाहरण के लिए, चैट चैनल के मालिक की भूमिका होती है
admin, और कमरे में अन्य लोग -user) - प्रपत्रों को संसाधित करें और सत्यापित करें - याद रखें, संदेश भेजने के लिए चैट विंडो है
input - अलग-अलग चैट बनाएं और जुड़ें
- व्यक्तिगत संदेशों के साथ काम करें. उपयोगकर्ता अन्य उपयोगकर्ताओं के साथ निजी तौर पर चैट कर सकते हैं। मूलतः, आप दो उपयोगकर्ताओं के बीच एक WebSocket कनेक्शन स्थापित कर रहे होंगे।
6. Навигация в стиле Stripe
जो बात इस नेविगेशन को विशिष्ट बनाती है वह यह है कि पॉपओवर कंटेनर सामग्री में फिट होने के लिए बदल जाता है। नए पॉपओवर को खोलने और बंद करने के पारंपरिक व्यवहार की तुलना में इस संक्रमण में एक लालित्य है।
आप क्या सीखेंगे:
- सीएसएस एनिमेशन को ट्रांज़िशन के साथ संयोजित करें
- सामग्री को मंद करें और फ़्लोट किए गए तत्व पर सक्रिय वर्ग लागू करें
Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим .
स्रोत: www.habr.com