1. Forma di carta di creditu
Una forma fresca di carta di creditu cù micro-interazzioni lisci è piacevuli. Include formattazione di numeri, verificazione è rilevazione automatica di u tipu di carta. Hè custruitu nantu à Vue.js è hè ancu cumpletamente responsive. (Pudete vede .)
Ciò chì amparate:
- Prucessa è cunvalida e forme
- Gestisce l'avvenimenti (per esempiu, quandu i campi cambianu)
- Capisce cumu fà vede è postu elementi nantu à a pagina, in particulare l'infurmazioni di a carta di creditu chì appare nantu à a forma
L'articulu hè statu traduttu cù u sustegnu di EDISON Software, chì , cum'è ancu .
2. Istogramma
Un histogramma hè un graficu o graficu chì rapprisenta dati categurichi cù barre rettangulari cù alture o lunghezze proporzionali à i valori chì rapprisentanu.
Puderanu esse appiicati verticalmente o horizontale. Un graficu di barre verticale hè qualchì volta chjamatu graficu di linea.
Ciò chì amparate:
- Mostra i dati in una manera strutturata è comprensibile
- Inoltre: Amparate cumu utilizà l'elementu
canvasè cumu disegnà elementi cun ellu
pudete truvà dati di pupulazione mundiale. Sò ordinati per annu.
3. Twitter Heart Animation
Torna in 2016, Twitter hà introduttu sta animazione maravigghiusa per i so tweets. Da u 2019, pare sempre a parte, allora perchè micca creà unu sè stessu?
Ciò chì amparate:
- U travagliu cù l'attributu CSS
keyframes - Manipulate è animate elementi HTML
- Unisce JavaScript, HTML è CSS
4. Repository GitHub cù funzione di ricerca
Ùn ci hè nunda di fantasia quì - i reposi di GitHub sò solu una lista glurificata.
U scopu hè di vede i repositori è permettenu à l'utilizatori di filtrà. Aduprà per uttene repository per ogni utilizatore.
Pagina di prufilu GitHub -
Ciò chì amparate:
- Riceve dati da l'API
- Mostra i dati da l'API
- Filtrà è mostra dati pertinenti per ogni ricerca
- Opcional: Sè vo site per una sfida, aduprate , custruitu cù GraphQL. .
5. Chats in stile Reddit
I chats sò un modu populari di cumunicazione per via di a so simplicità è facilità d'utilizazione. Ma chì veramente alimenta i chat room moderni? WebSockets!
Ciò chì amparate:
- Aduprate WebSockets, cumunicazione in tempu reale è aghjurnamenti di dati
- U travagliu cù i livelli d'accessu di l'utilizatori (per esempiu, u pruprietariu di un canale di chat hà u rolu
admin, è altri in a stanza -user) - Prucessa è validate e forme - ricordate, a finestra di chat per mandà un missaghju hè
input - Crea è unisci à diverse chat
- U travagliu cù missaghji persunali. L'utilizatori ponu chatte cù altri utilizatori in privatu. Essenzialmente, stabilirete una cunnessione WebSocket trà dui utilizatori.
6. Navigazione in stile striscia
Ciò chì rende questa navigazione unica hè chì u containeru popover si trasforma per adattà à u cuntenutu. Ci hè una eleganza à sta transizione cumparatu cù u cumpurtamentu tradiziunale di apre è chjude un novu popover.
Ciò chì amparate:
- Unisce animazioni CSS cù transizioni
- Dim cuntenutu è applicà a classa attiva à l'elementu flotatu
Pruvate di fà voi stessu prima, ma se avete bisognu d'aiutu, verificate questu .
Source: www.habr.com