Front-End developer üçün altı tapşırıq

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 burada.)

kredit kartı forması

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 proqramçıların sağlamlığının və səhər yeməyinin qayğısına qalırVə xüsusi proqram təminatı hazırlayır.

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 canvas və onunla elementləri necə çəkmək olar

Burada 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 rəsmi GitHub API hər bir istifadəçi üçün depolar əldə etmək.

GitHub profil səhifəsi - github.com/indreklasn

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 API v4, GraphQL istifadə edərək qurulmuşdur. GraphQL öyrənmək istəyirsinizsə, əvvəlki məqalələrimdən birinə keçin.

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 addım-addım təlimat.

Mənbə: www.habr.com