Front-End dasturchisi uchun oltita vazifa

1. Kredit karta shakli

Yumshoq va yoqimli mikro shovqinlarga ega ajoyib kredit karta shakli. Raqamni formatlash, tekshirish va karta turini avtomatik aniqlashni o'z ichiga oladi. U Vue.js-da qurilgan va to'liq javob beradi. (Ko'rishingiz mumkin shu yerda.)

kredit karta shakli

Siz nimani o'rganasiz:

• Shakllarni qayta ishlash va tasdiqlash
• Hodisalarni boshqarish (masalan, maydonlar o'zgarganda)
• Sahifada elementlarni, ayniqsa, shaklning tepasida ko'rsatilgan kredit karta ma'lumotlarini qanday ko'rsatish va joylashtirishni tushuning

Maqola EDISON Software ko'magida tarjima qilingan dasturchilarning sog'lig'i va ularning nonushtasi haqida g'amxo'rlik qiladi, shuningdek maxsus dasturiy ta'minotni ishlab chiqadi.

2. Gistogramma

Gistogramma - bu ular ko'rsatadigan qiymatlarga mutanosib balandlik yoki uzunlikdagi to'rtburchaklar chiziqli kategorik ma'lumotlarni aks ettiruvchi diagramma yoki grafik.

Ular vertikal yoki gorizontal ravishda qo'llanilishi mumkin. Vertikal chiziqli diagramma ba'zan chiziqli diagramma deb ataladi.

Siz nimani o'rganasiz:

• Ma'lumotlarni tuzilgan va tushunarli tarzda ko'rsatish
• Qo'shimcha: Elementdan qanday foydalanishni o'rganing canvas va u bilan elementlarni qanday chizish mumkin

u dunyo aholisi haqidagi ma'lumotlarni topishingiz mumkin. Ular yil bo'yicha saralanadi.

3. Twitter yurak animatsiyasi

2016 yilda Twitter o'zining tvitlari uchun ushbu ajoyib animatsiyani taqdim etdi. 2019 yil holatiga ko'ra, u hali ham qisman ko'rinadi, nega o'zingiz yaratmaysiz?

Siz nimani o'rganasiz:

• CSS atributi bilan ishlash keyframes
• HTML elementlarini manipulyatsiya qilish va jonlantirish
• JavaScript, HTML va CSS-ni birlashtiring

4. Qidiruv funksiyasiga ega GitHub omborlari

Bu erda hech qanday ajoyib narsa yo'q - GitHub repolari shunchaki ulug'langan ro'yxat.
Maqsad, omborlarni ko'rsatish va foydalanuvchiga ularni filtrlash imkonini berishdir. Foydalanish rasmiy GitHub API Har bir foydalanuvchi uchun omborlarni olish.

GitHub profil sahifasi - github.com/indreklasn

Siz nimani o'rganasiz:

• API dan ma'lumotlarni oling
• API ma'lumotlarini ko'rsatish
• Har bir qidiruv uchun tegishli maʼlumotlarni filtrlang va koʻrsating
• Majburiy emas: Agar siz qiyinchilikka tayyor bo'lsangiz, foydalaning API v4, GraphQL yordamida qurilgan. Agar siz GraphQL-ni o'rganmoqchi bo'lsangiz, avvalgi maqolalarimdan biriga o'ting.

5. Reddit uslubidagi chatlar

Suhbatlar soddaligi va foydalanish qulayligi tufayli mashhur muloqot usulidir. Ammo zamonaviy chat xonalarini nima ta'minlaydi? WebSockets!

Siz nimani o'rganasiz:

• WebSockets, real vaqtda aloqa va ma'lumotlar yangilanishlaridan foydalaning
• Foydalanuvchilarning kirish darajalari bilan ishlash (masalan, chat kanali egasi rolga ega admin, va xonadagi boshqalar - user)
• Shakllarni qayta ishlash va tasdiqlash - unutmang, xabar yuborish uchun chat oynasi input
• Turli chatlarni yarating va ularga qo'shiling
• Shaxsiy xabarlar bilan ishlash. Foydalanuvchilar boshqa foydalanuvchilar bilan shaxsiy suhbatlashishlari mumkin. Asosan, siz ikki foydalanuvchi o'rtasida WebSocket ulanishini o'rnatasiz.

6. Stripe uslubidagi navigatsiya

Ushbu navigatsiyani noyob qiladigan narsa shundaki, popover konteyneri tarkibga mos ravishda o'zgaradi. Yangi popoverni ochish va yopishning an'anaviy xatti-harakatlariga nisbatan bu o'tishning nafisligi bor.

Siz nimani o'rganasiz:

• CSS animatsiyalarini o'tishlar bilan birlashtiring
• Tarkibni xiralashtiring va suzuvchi elementga faol sinfni qo'llang

Avval buni o'zingiz qilib ko'ring, lekin yordam kerak bo'lsa, buni tekshirib ko'ring bosqichma-bosqich ko'rsatma.

Manba: www.habr.com