1. Kredit kartı forması
Hamar və xoş mikro qarşılıqlı əlaqə ilə sərin kredit kartı forması. Nömrənin formatlaşdırılması, yoxlanılması və avtomatik kart növünün aşkarlanması daxildir. O, Vue.js üzərində qurulub və eyni zamanda tam cavabdehdir. (Sən görə bilərsən .)
Nə öyrənəcəksiniz:
- Formaları emal edin və yoxlayın
- Hadisələri idarə edin (məsələn, sahələr dəyişdikdə)
- Səhifədə elementləri, xüsusən də formanın yuxarısında görünən kredit kartı məlumatlarını necə göstərmək və yerləşdirmək lazım olduğunu anlayın
Məqalə EDISON Software şirkətinin dəstəyi ilə tərcümə edilmişdir Və .
2. Histoqram
Histoqram, yüksəklikləri və ya uzunluqları təmsil etdikləri dəyərlərə mütənasib olan düzbucaqlı çubuqlarla kateqoriyalı məlumatları təmsil edən bir qrafik və ya qrafikdir.
Onlar şaquli və ya üfüqi olaraq tətbiq oluna bilər. Şaquli qrafa bəzən xətt diaqramı adlanır.
Nə öyrənəcəksiniz:
- Məlumatları strukturlaşdırılmış və başa düşülən şəkildə göstərin
- Əlavə olaraq: Elementdən necə istifadə edəcəyinizi öyrənin
canvasvə onunla elementləri necə çəkmək olar
dünya əhalisi haqqında məlumat tapa bilərsiniz. İllərə görə sıralanır.
3. Twitter Ürək Animasiyası
Hələ 2016-cı ildə Twitter öz tvitləri üçün bu heyrətamiz animasiya təqdim etdi. 2019-cu ildən etibarən o, hələ də hissə kimi görünür, niyə özünüz bir hissə yaratmayasınız?
Nə öyrənəcəksiniz:
- CSS atributu ilə işləyin
keyframes - HTML elementlərini manipulyasiya edin və canlandırın
- JavaScript, HTML və CSS-i birləşdirin
4. Axtarış funksiyası olan GitHub depoları
Burada qəşəng bir şey yoxdur - GitHub depoları sadəcə təriflənmiş siyahıdır.
Məqsəd depoları göstərmək və istifadəçiyə onları filtrləməyə imkan verməkdir. istifadə edin hər bir istifadəçi üçün depolar əldə etmək.
GitHub profil səhifəsi -
Nə öyrənəcəksiniz:
- API-dən məlumat alın
- API-dən məlumatları göstərin
- Hər axtarış üçün müvafiq məlumatları süzün və göstərin
- İsteğe bağlı: Əgər çətinliyə hazırsınızsa, istifadə edin , GraphQL istifadə edərək qurulmuşdur. .
5. Reddit tipli söhbətlər
Çatlar sadəliyi və istifadəsi asanlığı ilə məşhur ünsiyyət üsuludur. Bəs müasir söhbət otaqlarını həqiqətən nə gücləndirir? WebSockets!
Nə öyrənəcəksiniz:
- WebSockets, real vaxt rabitəsi və məlumat yeniləmələrindən istifadə edin
- İstifadəçi giriş səviyyələri ilə işləmək (məsələn, söhbət kanalının sahibinin rolu var
admin, və otaqdakı digərləri -user) - Formaları emal edin və yoxlayın - unutmayın, mesaj göndərmək üçün söhbət pəncərəsidir
input - Müxtəlif söhbətlər yaradın və qoşulun
- Şəxsi mesajlarla işləyin. İstifadəçilər digər istifadəçilərlə şəxsi söhbət edə bilərlər. Əslində, siz iki istifadəçi arasında WebSocket bağlantısı quracaqsınız.
6. Şerit tipli naviqasiya
Bu naviqasiyanı unikal edən, popover konteynerinin məzmuna uyğunlaşmaq üçün çevrilməsidir. Yeni popoverin açılması və bağlanmasının ənənəvi davranışı ilə müqayisədə bu keçiddə bir zəriflik var.
Nə öyrənəcəksiniz:
- CSS animasiyalarını keçidlərlə birləşdirin
- Məzmunu azaldın və üzən elementə aktiv sinif tətbiq edin
Əvvəlcə bunu özünüz etməyə çalışın, lakin köməyə ehtiyacınız varsa, bunu yoxlayın .
Mənbə: www.habr.com
