Șase sarcini pentru un dezvoltator front-end

1. Форма кредитной карты

O formă cool de card de credit cu micro-interacțiuni fluide și plăcute. Include formatarea numerelor, verificarea și detectarea automată a tipului de card. Este construit pe Vue.js și este, de asemenea, pe deplin receptiv. (Poti sa vezi aici.)

formular-card-de-credit

Ce vei învăța:

• Procesați și validați formularele
• Gestionați evenimente (de exemplu, când se schimbă câmpurile)
• Înțelegeți cum să afișați și să plasați elemente pe pagină, în special informațiile despre cardul de credit care apar în partea de sus a formularului

Articolul a fost tradus cu sprijinul EDISON Software, care заботится о здоровье программистов и их завтракеși разрабатывает программное обеспечение на заказ.

2. Гистограмма

O histogramă este o diagramă sau un grafic care reprezintă date categorice cu bare dreptunghiulare cu înălțimi sau lungimi proporționale cu valorile pe care le reprezintă.

Ele pot fi aplicate vertical sau orizontal. O diagramă cu bare verticale este uneori numită diagramă cu linii.

Ce vei învăța:

• Afișați datele într-un mod structurat și ușor de înțeles
• În plus: Aflați cum să utilizați elementul canvas și cum să desenezi elemente cu el

Aici puteți găsi date despre populația mondială. Sunt sortate pe an.

3. Анимация сердечка Twitter

În 2016, Twitter a introdus această animație uimitoare pentru tweet-urile sale. Începând cu 2019, arată încă o parte, așa că de ce să nu creați unul singur?

Ce vei învăța:

• Lucrați cu atributul CSS keyframes
• Manipulați și animați elemente HTML
• Combinați JavaScript, HTML și CSS

4. Репозитории GitHub с функцией поиска

Nu este nimic elegant aici – depozitele GitHub sunt doar o listă glorificată.
Scopul este de a afișa depozitele și de a permite utilizatorului să le filtreze. Utilizare API-ul oficial GitHub pentru a obține depozite pentru fiecare utilizator.

Pagina de profil GitHub - github.com/indreklasn

Ce vei învăța:

• Primiți date de la API
• Afișează datele din API
• Filtrați și afișați datele relevante pentru fiecare căutare
• Opțional: dacă ești pregătit pentru o provocare, folosește API v4, construit folosind GraphQL. Dacă doriți să învățați GraphQL, accesați unul dintre articolele mele anterioare.

5. Чаты в стиле Reddit

Chaturile sunt o modalitate populară de comunicare datorită simplității și ușurinței lor de utilizare. Dar ce alimentează cu adevărat camerele de chat moderne? WebSockets!

Ce vei învăța:

• Utilizați WebSockets, comunicare în timp real și actualizări de date
• Lucrați cu nivelurile de acces ale utilizatorilor (de exemplu, proprietarul unui canal de chat are rolul admin, și alții în cameră - user)
• Procesați și validați formularele - amintiți-vă, fereastra de chat pentru trimiterea unui mesaj este input
• Creați și alăturați-vă diferitelor chaturi
• Lucrați cu mesaje personale. Utilizatorii pot discuta cu alți utilizatori în mod privat. În esență, veți stabili o conexiune WebSocket între doi utilizatori.

6. Навигация в стиле Stripe

Ceea ce face această navigare unică este că containerul popover se transformă pentru a se potrivi cu conținutul. Există o eleganță în această tranziție în comparație cu comportamentul tradițional de deschidere și închidere a unui nou popover.

Ce vei învăța:

• Combinați animațiile CSS cu tranzițiile
• Diminuați conținutul și aplicați clasa activă elementului plutit

Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим ghid pas cu pas.

Sursa: www.habr.com