1. Formulari de targeta de crèdit
Una forma de targeta de crèdit fantàstica amb microinteraccions suaus i agradables. Inclou el format del número, la verificació i la detecció automàtica del tipus de targeta. Està construït a Vue.js i també és totalment sensible. (Pots veure .)
Què aprendràs:
- Processar i validar formularis
- Gestionar esdeveniments (per exemple, quan canvien els camps)
- Entendre com mostrar i col·locar elements a la pàgina, especialment la informació de la targeta de crèdit que apareix a la part superior del formulari
L'article va ser traduït amb el suport d'EDISON Software, que I .
2. Histograma
Un histograma és un gràfic o gràfic que representa dades categòriques amb barres rectangulars amb alçades o longituds proporcionals als valors que representen.
Es poden aplicar verticalment o horitzontalment. Un gràfic de barres verticals de vegades s'anomena gràfic de línies.
Què aprendràs:
- Mostra les dades d'una manera estructurada i entenedora
- A més: aprèn a utilitzar l'element
canvasi com dibuixar elements amb ell
podeu trobar dades de població mundial. Estan ordenats per any.
3. Animació del cor de Twitter
L'any 2016, Twitter va presentar aquesta increïble animació per als seus tuits. A partir del 2019, encara sembla la part, així que per què no crear-ne un?
Què aprendràs:
- Treballar amb l'atribut CSS
keyframes - Manipular i animar elements HTML
- Combina JavaScript, HTML i CSS
4. Repositoris GitHub amb funció de cerca
No hi ha res fantàstic aquí: els dipòsits de GitHub són només una llista glorificada.
L'objectiu és mostrar els repositoris i permetre a l'usuari filtrar-los. Ús per obtenir repositoris per a cada usuari.
Pàgina de perfil de GitHub -
Què aprendràs:
- Rebre dades de l'API
- Mostra dades de l'API
- Filtra i mostra les dades rellevants per a cada cerca
- Opcional: si estàs preparat per a un repte, fes-ho servir , construït amb GraphQL. .
5. Xats a l'estil de Reddit
Els xats són una forma popular de comunicació per la seva senzillesa i facilitat d'ús. Però, què alimenta realment les sales de xat modernes? WebSockets!
Què aprendràs:
- Utilitzeu WebSockets, comunicacions en temps real i actualitzacions de dades
- Treballar amb nivells d'accés d'usuari (per exemple, el propietari d'un canal de xat té la funció
admin, i altres a l'habitació -user) - Processa i valida els formularis: recorda, la finestra de xat per enviar un missatge és
input - Crea i uneix-te a diferents xats
- Treballar amb missatges personals. Els usuaris poden xatejar amb altres usuaris de manera privada. Bàsicament, establiràs una connexió WebSocket entre dos usuaris.
6. Navegació a l'estil de ratlles
El que fa que aquesta navegació sigui única és que el contenidor emergent es transforma per adaptar-se al contingut. Hi ha una elegància en aquesta transició en comparació amb el comportament tradicional d'obrir i tancar un nou popover.
Què aprendràs:
- Combina animacions CSS amb transicions
- Reduïu el contingut i apliqueu la classe activa a l'element flotant
Primer intenteu fer-ho vosaltres mateixos, però si necessiteu ajuda, mireu-ho .
Font: www.habr.com