1. Modulo carta di credito
Una fantastica forma di carta di credito con microinterazioni fluide e divertenti. Include la formattazione dei numeri, la verifica e il rilevamento automatico del tipo di carta. È basato su Vue.js ed è anche completamente reattivo. (Puoi vedere .)
Cosa imparerai:
- Elaborare e convalidare i moduli
- Gestire gli eventi (ad esempio, quando i campi cambiano)
- Comprendere come visualizzare e posizionare gli elementi nella pagina, in particolare i dati della carta di credito visualizzati nella parte superiore del modulo
L'articolo è stato tradotto con il supporto di EDISON Software, che e .
2. Istogramma
Un istogramma è un diagramma o un grafico che rappresenta dati categorici con barre rettangolari con altezze o lunghezze proporzionali ai valori che rappresentano.
Possono essere applicati verticalmente o orizzontalmente. Un grafico a barre verticali è talvolta chiamato grafico a linee.
Cosa imparerai:
- Visualizzare i dati in modo strutturato e comprensibile
- Inoltre: scopri come utilizzare l'elemento
canvase come disegnare elementi con esso
puoi trovare i dati sulla popolazione mondiale. Sono ordinati per anno.
3. Animazione del cuore di Twitter
Nel 2016, Twitter ha introdotto questa straordinaria animazione per i suoi tweet. Nel 2019 sembra ancora adatto, quindi perché non crearne uno tu stesso?
Cosa imparerai:
- Lavora con l'attributo CSS
keyframes - Manipolare e animare elementi HTML
- Combina JavaScript, HTML e CSS
4. Repository GitHub con funzione di ricerca
Non c'è niente di speciale qui: i repository GitHub sono solo un elenco glorificato.
L'obiettivo è visualizzare i repository e consentire all'utente di filtrarli. Utilizzo per ottenere repository per ciascun utente.
Pagina del profilo GitHub -
Cosa imparerai:
- Ricevi dati dall'API
- Visualizza i dati dall'API
- Filtra e mostra i dati rilevanti per ogni ricerca
- Facoltativo: se sei pronto per una sfida, usa , creato utilizzando GraphQL. .
5. Chat in stile Reddit
Le chat sono un mezzo di comunicazione popolare grazie alla loro semplicità e facilità d'uso. Ma cosa alimenta realmente le chat room moderne? WebSocket!
Cosa imparerai:
- Utilizza WebSocket, comunicazioni in tempo reale e aggiornamenti dei dati
- Lavora con i livelli di accesso degli utenti (ad esempio, il ruolo è assegnato al proprietario di un canale di chat
admin, e altri nella stanza -user) - Elabora e convalida i moduli: ricorda, la finestra di chat per inviare un messaggio è
input - Crea e partecipa a diverse chat
- Lavora con messaggi personali. Gli utenti possono chattare con altri utenti in privato. In sostanza, stabilirai una connessione WebSocket tra due utenti.
6. Navigazione in stile stripe
Ciò che rende unica questa navigazione è che il contenitore popover si trasforma per adattarsi al contenuto. C'è un'eleganza in questa transizione rispetto al comportamento tradizionale di apertura e chiusura di un nuovo popover.
Cosa imparerai:
- Combina animazioni CSS con transizioni
- Oscura il contenuto e applica la classe attiva all'elemento flottato
Prova prima a farlo da solo, ma se hai bisogno di aiuto, dai un'occhiata a questo .
Fonte: habr.com