Componente de Reacciones de Mensajes
Componente de Reacciones de Mensajes
¿Quieres agregar reacciones a tus mensajes? Completar esta Aventura de Código te permitirá tener un menú de emojis funcional para agregar reacciones a tus mensajes favoritos.
Creado: 26/04/2024 por Dustin Usey
Nivel de habilidad: avanzado
Temas utilizados:
Tiempo estimado de finalización: 6 horas
¿Quieres agregar reacciones a tus mensajes? Completar esta Aventura de Código te permitirá tener un menú de emojis funcional para agregar reacciones a tus mensajes favoritos.
Usando Almacenamiento Local con JavaScript
Local Storage es parte de la API de Almacenamiento Web y te permite, como desarrollador, almacenar datos en el navegador del usuario.
Trabajar con la API Fetch
Aprende cómo usar la API Fetch para obtener recursos.
Métodos de Iteración de Arrays en JavaScript
Aprende cómo acceder y transformar datos en arrays con los métodos de iteración de arrays de JavaScript.
Métodos de arreglos en JavaScript: filter()
¿Alguna vez has necesitado filtrar elementos de un arreglo según ciertos criterios? Por ejemplo, ¿para obtener números dentro de un rango, o cadenas que contengan ciertos caracteres? Afortunadamente, hay una manera fácil de hacer esto en JavaScript usando el método filter(). Acompáñanos mientras Dustin te muestra cómo usar este método y qué puede hacer. Luego, ofrece un desafío (y una solución) para que puedas practicar usándolo de inmediato.
Selector de Emoji en JavaScript usando Fetch
Hay APIs para casi todo. En este taller, te guiaré a través de cómo conectarte a una API usando fetch. Agregaremos una función a una aplicación de chat para alternar un menú lleno de emojis que provienen de la API open-emoji.
Búsqueda de JavaScript
Permitir que los usuarios busquen datos en tu aplicación o sitio web es una excelente característica de UX. Construir este tipo de funcionalidad no es tan difícil como podrías pensar. Con algo de JavaScript básico, podemos abordar el filtrado y la búsqueda de datos. Acompáñame mientras agrego una función de búsqueda con JavaScript vanilla que permite al usuario buscar un autor específico en una lista de autores.
-
0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
-
1
Sigue los mockups para replicar lo mejor que puedas un componente de reacciones que se rellena con emojis de una API de emojis.
-
2
Agrega lógica para permitir que el usuario seleccione un emoji de una lista de emojis. Al seleccionar ese emoji, aparece en la parte inferior del mensaje de otro usuario. Deberías poder agregar múltiples emojis.
-
3
Como siempre, asegúrate de que el código sea accesible y cumpla con los estándares de WCAG.
-
4
Desafío Extra: Permite una vista de emoji "historial" o "más popular" que los usuarios puedan usar para seleccionar emojis usados recientemente/frecuentemente.
-
5
Desafío Extra: Usa localstorage para guardar emojis del historial/usados frecuentemente.
-
6
Desafío Extra: Permite que los usuarios busquen un emoji por palabra clave.