Días con RxJS — Día 18
Si estas leyendo esto, bienvenido al cassette número 18 de 30

Si llegaste aquí y no viste ninguno de los videos anteriores, te recomiendo empezar con el primero:
Este es el día y vamos a jugar un poco con algunas funciones!
Lo primero que vamos a hacer como siempre es generar el archivo js y el html para poder jugar un poco con todo esto.
Pero esta vez en nuestro html vamos a crear un input, vamos a empezar a interactuar con nuestro html.
Lo que vamos a hacer es crear un observable sobre este input, para poder empezar a jugar con lo que escribimos.
Para ello en nuestro ejemplo-01.js:
Lo que hacemos es obtener el input en nuestra constante para poder ver sus eventos.
Luego nuestra variable receptor, lo que va a hacer es un observable que va a obtener los eventos ‘keydown’ de input, generar un map para obtener el valor ‘key’ del evento y luego filtrar los que son vacios.
De esta forma vamos a tener el valor ‘key’ del evento evitando los espacios .
A lo ultimo nos subscribimos y cada acción que se genere con next lo enviaremos a una función que concatenara todos los valores ingresados para imprimirlos en la consola.
El resultado:
De esta forma, podemos ver como fuimos tomando cada uno de los datos por medio del tiempo.
Ahora usemos otro evento para seguir jugando, que va a ser el ‘mousemove’ con este vamos a ir tomando la posición del mouse cada x tiempo.
Para ello vamos a modificar nuestro ejemplo-01.js
Con esto, nuestro “mouseReceptor” lo que va a hacer es tomar el evento del ‘mousemove’ dentro de todo el document (ósea de nuestro html), y vamos a mapear el evento entero, con una salvedad que este observable va a ejecutar el next en el tiempo que nosotros le indiquemos en el ‘thottleTime’, si ponemos 1, va a ser instantaneo, pero si ponemos 1000 por ejemplo vamos a ver que se ejecuta cada segundo.
El resultado de esto es el siguiente:

Ya que estamos podemos jugar un poco mas, lo que vamos a hacer son dos cosas ahora, la primera es agregar un botón para que pause o arranque con la revisión que vamos a hacer sobre el mouse, y la segunda es agregar span para insertarle el texto que escribimos y “siga” al mouse, para ello vamos a modificar nuestro html.
Como veras agregue un button y un span, para poder manipularlos desde nuestro js, que quedo así:
Lo primero que hacemos es obtener el botón y el span para poder utilizarlos, luego nuestra función del mouse, cambio, ahora obtenemos los parámetro pero los usamos para modificar la posición del span y por ultimo generamos un observable para el evento click dentro del botón y así poder “detener” el seguimiento del texto al mouse.
Y el resultado final es:

El código de lo que vimos esta en:
Esto es todo por hoy!
Te gusto? deja un comentario, contále a tus amigos desarrolladores, seamos un montón en esta aventura de 30 días.
Como siempre, espero que les guste lo compartido y cualquier duda dejo mis canales:
Saludos
JC
