Una forma genial de tarjeta de crédito con microinteracciones fluidas y agradables. Incluye formato de números, verificación y detección automática del tipo de tarjeta. Está construido sobre Vue.js y también es totalmente responsivo. (Puedes ver aquí.)
Manejar eventos (por ejemplo, cuando los campos cambian)
Comprender cómo mostrar y colocar elementos en la página, especialmente la información de la tarjeta de crédito que aparece en la parte superior del formulario.
Un histograma es un cuadro o gráfico que representa datos categóricos con barras rectangulares con alturas o longitudes proporcionales a los valores que representan.
Se pueden aplicar vertical u horizontalmente. Un gráfico de barras verticales a veces se denomina gráfico de líneas.
Lo que aprenderás:
Mostrar datos de forma estructurada y comprensible.
Además: aprenda a utilizar el elemento. canvas y cómo dibujar elementos con él
es Puedes encontrar datos de población mundial. Están ordenados por año.
3. Animación del corazón de Twitter
En 2016, Twitter introdujo esta increíble animación para sus tweets. A partir de 2019, todavía se ve bien, así que ¿por qué no crear uno usted mismo?
Lo que aprenderás:
Trabajar con atributo CSS keyframes
Manipular y animar elementos HTML.
Combina JavaScript, HTML y CSS
4. Repositorios de GitHub con función de búsqueda
No hay nada sofisticado aquí: los repositorios de GitHub son solo una lista glorificada.
El objetivo es mostrar los repositorios y permitir al usuario filtrarlos. Usar API oficial de GitHub para obtener repositorios para cada usuario.
Los chats son una forma popular de comunicación debido a su simplicidad y facilidad de uso. Pero, ¿qué es lo que realmente impulsa las salas de chat modernas? WebSockets!
Lo que aprenderás:
Utilice WebSockets, comunicación en tiempo real y actualizaciones de datos
Trabajar con niveles de acceso de usuarios (por ejemplo, el propietario de un canal de chat tiene el rol admin, y otros en la sala - user)
Procese y valide formularios: recuerde, la ventana de chat para enviar un mensaje es input
Crea y únete a diferentes chats
Trabajar con mensajes personales. Los usuarios pueden chatear con otros usuarios de forma privada. Básicamente, establecerá una conexión WebSocket entre dos usuarios.
6. Navegación estilo franja
Lo que hace que esta navegación sea única es que el contenedor emergente se transforma para adaptarse al contenido. Hay una elegancia en esta transición en comparación con el comportamiento tradicional de abrir y cerrar un nuevo popover.
Lo que aprenderás:
Combina animaciones CSS con transiciones
Atenuar el contenido y aplicar la clase activa al elemento flotante
Intente hacerlo usted mismo primero, pero si necesita ayuda, consulte esto guía paso por paso.