Entonces, hoy vamos a hacer este, este efecto de Tinder, ¿vale?
Que si, por ejemplo, no lo ha acercado suficiente, vuelve, ¿vale?
¿Veis que vuelve? Y vuelve para atrás.
Y si lo mueves lo suficiente, pues se va. Y ya está.
Y así.
Y vamos a ver cómo se haría un poco esto con JavaScript.
Y por ahora no hay más personas, vuelve más tarde.
Ahí lo vamos a tener.
Vamos a empezar por aquí, vamos a crear este...
Mira, ya me lo voy a clonar.
Git, git init...
Bueno, pues vamos a poner aquí mkdir javascript 100 proyectos, ¿vale?
C de javascript 100 proyectos.
Y aquí voy a inicializar el proyecto de git.
Vamos a... Bueno, no sé por qué me voy a añadir el ritme.
Bueno, vamos a añadir el ritme.
Git add...
Y vamos a hacer el commit, el primer commit y el branch main.
No sé, pero si ya estoy en el main, ¿no?
Añadimos el repositorio remoto.
Y vamos a pushear esto.
Y ahora, pues ya tendríamos esto.
Y ahora, pues mira, quien quiera puede empezar a hacer el ritme y ya está.
Con puro vanilla.
Lo vamos a hacer con vanilla.
Lo bueno de hacerlo con vanilla JavaScript es que todo lo que aprendes con vanilla
lo puedes llevar a cualquier otro sitio.
Vanilla significa sin dependencia, sin ningún framework, sin ningún tipo de cosa que necesites,
ni React, ni Angular, ni nada.
Así que lo vamos a hacer vanilla totalmente, ¿vale?
Vale, pues ahora ya.
Creamos, abrimos aquí este proyectazo.
Y vamos a crear el primero 01 Tinder Swipe.
Y voy a tener aquí mi index.html.
Yo, yo, aquí cada uno que haga lo que quiera.
Yo lo voy a hacer todo en el mismo archivo index.html.
Luego al final igual lo separamos en archivos.
Pero bueno, yo voy a hacer el HTML, el CSS y el JavaScript en el mismo fichero.
Porque no quiero ir en diferentes ficheros.
Voy a intentar que siempre sean lo más sencillo posible.
Y además, yo voy a utilizar esta extensión, ¿vale?
Porque ya os digo, no vamos a utilizar ningún framework.
Voy a utilizar Live Preview, que para mí es la mejor extensión.
Aquí cada uno que haga la que quiera.
A mí la que más me gusta es Live Preview.
Si no, tenéis la de Live Server, que tiene 45 millones de descargas, que también está muy bien.
Pero a mí la de Microsoft, a mí personalmente, me funciona mejor.
Para utilizarla, una vez que la tenéis instalada, aquí, por ejemplo, ya ponéis aquí Tinder App.
Abrís los comandos con mayúscula P y ponéis Live Preview.
Y ya tenéis esto, inicio del servidor.
Le dais y os abre esto, ¿vale?
Y aquí podéis ir al directorio, Tinder Swipe este.
Y en el Tinder Swipe, pues ya veis que tenéis aquí el proyectazo.
Y aquí es donde vais cambiando lo que sea y ya va apareciendo.
Me gusta bastante por eso.
Porque se puede ir viendo en tiempo real lo que estás haciendo.
O sea, no hace falta ni que guardes, sino que aparece y ya está.
Y esto lo podéis abrir también aquí y también os aparece, lo cual está genial.
Entonces, vamos a utilizar esta.
Esta es la que voy a seguir, cómo lo vamos a hacer.
Y aquí es donde vamos a hacer un poco nuestro proyecto.
Voy a empezar un poco con la estructura básica.
Vamos a tener un elemento main, bueno, vamos a tener un title primero, que vamos a llamarle 100proyectosJS01Tinderswipe.
Ya que es San Valentín y que nos han roto el corazón.
Vamos a buscar... Bueno, yo no, ¿eh?
Yo no.
Yo os tengo que decir una cosa que va a ser un poco polémico.
Yo en mi vida he utilizado...
Yo jamás, jamás en mi vida he utilizado Tinder.
Me han explicado historias, pero no la he utilizado jamás.
Porque, claro, llevo 10 años con mi pareja y, por lo tanto, pues, claro, nunca lo he necesitado.
Cuando estuvo... Cuando empezó de moda es que ya estaba con mi pareja.
Así que... Bueno, esta sería un poco la estructura básica, ¿vale?
Un main dentro del section, que el section sería como la página.
Dentro vamos a tener el header, aquí un div con todas las clases y un footer donde vamos a tener los botones.
Voy a pillar unas imágenes, ¿vale?
Aquí voy a pillar unas imágenes que tengo por aquí, a ver si soy capaz, ¿vale?
Aquí tendríamos las fotos, por ejemplo, la foto de... No me acuerdo cómo se llamaba esta chica.
Y la de Alex. Ese sí que me acuerdo, el chico sí que me acuerdo.
Y tengo tres fotitos más que vamos a utilizar, tres imágenes más, que la voy a poner aquí.
Las imágenes son un iPhone.
Para que quede bien, para que se vea bonito, vamos a hacer que se renderice dentro del iPhone, ¿vale?
Como si fuese una aplicación.
Luego vamos a utilizar los iconos de Tinder.
Y con esto vamos a entender, porque como lo vamos a hacer con HTML, CSS y JavaScript plano,
pues vamos a ver algunas técnicas interesantes, ¿vale?
Y luego el logo de Tinder, básicamente, que no tiene mucha historia.
De hecho, este, este logo de Tinder, ya lo podemos utilizar aquí.
Le ponemos aquí el Tinder logo, ¿vale?
Y ahí tendríamos el Tinder logo.
Vamos a poner algunos estilos.
Lo primero, pues nada, vamos a...
Eso.
Vamos a utilizar el box sizing.
Voy a resetear todo.
Esto es un reset muy a saco.
No os lo recomiendo en vuestras casas.
Básicamente es todos los elementos, los before y after.
Vamos a utilizar el box sizing para cambiarle el modelo de la caja.
Y le reseteamos el margen y el padding.
Es que para no perder tiempo con tonterías.
Que no hay tiempo que perder.
Phone family.
Yo voy a utilizar el system UI, pero bueno, ya veremos si le cambiamos alguna cosita.
Y utilizamos la magia esta del display grid.
Vamos a utilizar el display grid para centrarlo todo.
Entonces, vamos a centrarlo todo.
Luego, cuando pongamos ahí la aplicación, cuando veamos el iPhone, quedará mucho mejor.
Pero por ahora lo vamos a dejar así.
Hola, Midu.
Estoy en un proceso de selección para entrar a Microsoft.
¡Anda!
Con todo el tema de los despidos, ¿crees que valga la pena entrar a AMS?
A AMS.
A Microsoft.
Claro que sí, claro que sí.
O sea, a ver, esto es una pregunta muy buena.
Porque mucha gente, cuando hay muchos despidos, obviamente dice, ah, pero ¿vale la pena entrar a Microsoft, Google y todo esto?
Totalmente sí.
Totalmente sí.
Porque, a ver, pensad que aunque haya despidos, los despidos, primero es que no tiene por qué ser de programadores.
A lo mejor son de otros servicios.
Pueden ser de marketing, pueden ser de mil millones de cosas.
Lo segundo, ¿cómo no va a valer la pena?
¿Sabes?
¿Cómo no va a valer la pena?
Que es Microsoft.
Con que en Microsoft tú, imagínate que en Microsoft tú estés, por ejemplo, seis meses, es que eso ya te abre tantas puertas, tío, que es que no te va a faltar trabajo en la vida.
No te va a faltar trabajo nunca.
Así que, sí, esa sería mi opinión.
Vale, vamos a cargar la imagen del iPhone, ¿vale?
Y le vamos a decir que no se repita.
Y...
¿Se ve algo por ahí?
Vamos a ver, porque se ve como...
No sé si es que se ve muy pequeño.
A ver, background, el main...
Bueno, puede ser que todavía no estamos poniendo...
Ah, es que he puesto el body.
No sé si es que el body me lo está poniendo manualmente o que no me lo está...
Ah, sí, sí que me lo está pillando.
Vale, vale.
Sí que lo está...
Aunque no se vea, lo renderiza por defecto.
Porque veis que yo estoy estirando el body.
Porque aunque nosotros no lo pongamos, se renderiza el body.
Fijaos.
Que aquí, en Elements, ¿veis?
Que se pone automáticamente el body y es lo que hay.
Se pone automáticamente por nosotros.
Vale, ahora cuando estilemos el resto de cosas, ahora veremos la imagen de fondo.
Por ahora le ponemos esto y lo que puedo hacer es ponerle ya el ancho.
No sé si ponerle 320 por...
No sé...
El doble, 640.
¿Vale?
Bueno, veis que ahora el fondo sí que se ve y se ve fatal.
Pues con esto hacéis un background size contain, ¿vale?
Y al menos ahora ya sí que lo contiene.
Lo que estoy viendo que esto se me está yendo un poco...
No sé si es por el...
No sé si que tengo mucho zoom.
Porque ves que tengo ahí...
No sé.
Luego, ahora miraré si...
Display flex.
A ver.
A ver aquí.
Porque aquí sí que se ve bien.
Pero aquí como que se ve muy grande.
¿No?
Y es que me da la sensación que es por el zoom.
Porque esto no parece que sea de 320.
Claro, ves, esto me está haciendo que el width sea de 640.
Y esto debe ser porque...
Ves, 320 o 640.
Claro, me lo está haciendo el doble.
Qué rabia que no se pueda cambiar el zoom solo de una cosa en concreto.
Porque me da la sensación...
¿Sabes?
Me gustaría cambiarle el zoom solo al texto.
Y esto que me lo dejase igual.
Pero claro, si le cambio el zoom...
Esto es una cosa que me da un poco de rabia.
¿Ves?
Si le cambio el zoom, me cambia el zoom de todo.
Te da bastante rabia.
A ver.
Podemos hacer algo.
Es un poco pirata.
Pero...
Pero bueno.
Al menos para que lo podamos ver bien.
Vamos a hacerlo 6.
Así.
¿Vale?
Ya está.
Vamos.
Con lo pirata.
Mira.
Trucazo.
Trucazo.
¿Por qué?
Para tener...
Todavía queda, ¿eh?
Pero para darle un poquito de historia a esto.
¿Vale?
Y que tenga un poquito de sombra.
Claro.
Si nosotros intentamos ponerle una sombra así.
0, 0.
Algo así.
Fijaos que la sombra esta, ¿veis?
Se le está poniendo a la imagen.
Porque es una imagen que es transparente.
La imagen del PNG es transparente.
Y claro, le está poniendo la sombra ahí.
Y no está bien.
Entonces, lo que podemos hacer...
Esto está muy chulo.
No sé si lo habéis visto alguna vez.
Que las imágenes transparentes le podéis poner una sombra.
Y utilizando el filter, utilizando el Drop Shadow.
Y con el Drop Shadow, ¿veis?
Esto lo que hace es ponerle la sombra donde es transparente.
Lo cual queda súper, súper bien.
Mira, para que se vea más claro, voy a ponerle...
Eh...
Voy a poner que esté de color rojo.
Y ahora le doy la vuelta.
Pero, ¿veis?
Fíjate que la imagen, en realidad, es esta.
Claro, la imagen llega hasta aquí arriba, a la izquierda.
Pero es transparente.
Entonces, lo que puedes hacer con el Drop Shadow es que detecta la imagen y le pone la sombrita justo donde realmente está la imagen.
Eso está bastante chulo, ¿eh?
Para que lo sepáis.
Entonces, así, pues queda mucho mejor.
Esto voy a darle un poquito más.
No sé si algo así para que...
Hostia, demasiado.
Algo así, ¿vale?
Vale.
Y el Main...
No sé si poner que esto sea de color blanco por ahora.
Ah, no.
Esto aquí no funciona.
Background, background, color...
Ah, claro.
Que si le pongo background, color...
Vale, lo pondremos dentro.
No pasa nada.
Venga, vamos con el Section.
Que el Section es la página.
Aquí sí que le vamos a poner background, color, FFF.
¿Vale?
Ahora lo ajustamos.
Esto va a ser nuestra aplicación.
¿Vale?
Voy a ponerle un poquito menos.
F6, F6, F6.
Y lo que hacemos es que esto ocupe el 100%.
¿Vale?
Ahora, por ahora, se ve por detrás.
O sea, por encima.
Pero eso luego lo arreglamos.
¿Vale?
Display Flex.
Para que cuando tengamos el contenido vaya con el Flex Direction a Column.
Ahora arreglamos el logo.
Y para ajustar un poquito esto...
A ver.
Primero, el Overflow Hidden.
Lo vamos a poner Relative.
¿Vale?
Para que si tenemos cualquier posición absolute que lo tendremos dentro,
pues se posicione según este elemento.
Y podemos ponerle un Padding.
¿Vale?
Que arriba sea algo así.
Y a los lados sea un poquito más.
Y con el Margen ya...
¿Vale?
A ver.
¿10?
No.
¿10, 12, 14, 13, 20?
Joder, pues lo he clavado, ¿no?
¿24?
Bueno.
¿24 podría ser?
¿23?
A ver.
Es verdad que nos quitamos la cejilla, pero bueno, da igual la cejilla, ¿no?
Pues 22.
Pues 22 se queda.
¿Vale?
Vale.
Pues así ya más o menos.
¿Veis que no está perfecto?
Pero bueno, tampoco pasa nada.
A ver.
Si no, podemos apurar un poco más.
Mira.
¿24?
Ya está.
¿24 queda mejor?
Porque a ver si ponemos más.
Yo aquí ahora, ahora yo cabreándome.
Aquí.
Vale.
Ahí está.
Con esto ya tendríamos el tema del section y ahora vamos a arreglar el header.
Y mira, aquí tenemos una cosa interesante.
El header, que es la parte donde tenemos justamente el logo.
Mira.
Mira, vas a ver el CSS Nesting.
Esto es totalmente, totalmente nativo.
Puedes decirle, mira, dentro del header, puedes utilizar aquí, esto sería el header, la
imagen, la quiero, la quiero estilar que sea 24 píxeles por 24 píxeles, por ejemplo.
¿Ves?
Y ya tenemos ahí el logo y lo tenemos ahí en medio.
Incluso podríamos poner, bueno, luego lo veremos.
Pero esto es el CSS Nesting nativo de no estamos utilizando SAS ni nada.
De hecho, esto lo iban a arreglar, esto, iban a hacer que funcionase, pero veo que no.
Lo que sí que funciona es si lo utilizamos así.
Puedes hacerlo así o puedes hacerlo así.
Así significa, esto sería como hacer esto, hacer esto.
Bueno, como SAS, básicamente, como SAS.
Sería exactamente como hacer esto.
Esta sería una.
Esta sería, pero hacerlo más corto.
Y esto sería, pues, lo mismo, pero en lugar de utilizarlo, como hemos visto, pues,
refiriéndote al primer hijo.
Vamos a hacerlo así, pues, total, ¿qué más da?
Y ya tendríamos un poco lo más importante, ¿no?
Nos faltaría el footer, ¿vale?
Que, bueno, el footer por ahora no lo vamos a ver.
Aquí lo que vamos a tener son todos los botones.
Vamos a poner button por cinco botones que hay aquí, ¿vale?
Son cinco botones.
En cada botón tendríamos una de las acciones, que ahora no me acuerdo cuáles son, ¿vale?
Cada acción tendría que tener su variable.
Y, a ver, voy a poner, ¿veis aquí que están los botoncitos?
Bueno, podríamos estilarlos un poquito por encima.
Por ejemplo, sabemos que es un display grid y que queremos que sea con un grid template
que tenga cinco columnas.
Así que podríamos poner uno fr, uno fr, uno fr, todo el rato, ¿vale?
Uno fr, uno fr.
Esto, ¿veis?
Ahora quedan ahí como cinco.
Esto lo pondremos más abajo.
Pero podemos utilizar el repeat.
Decimos, oye, repite cinco veces, cinco veces que tenemos uno fr.
Una fracción del espacio.
Le damos un poquito de separación.
Le vamos a dar un padding por los lados.
Porque básicamente, para que no esté tan cerquita ahí, por arriba no hace falta.
Pero por los lados sí.
Y nada, ya justificamos todo al centro y todo al centro y todo al centro.
Y ya está, ¿vale?
Y ahora luego esto lo moveremos, ¿vale?
De hecho, mira, podemos hacer también que esto...
Por ahora vamos a hacer esto así.
Más que nada, para que lo veáis, que border, border radius, 50%.
Y el borde, uno píxel, ta, ta, ta, ta.
Luego lo moveremos para abajo, ¿vale?
Y haremos unos más grandes.
Porque en Tinder es así.
Así que más o menos, yo creo que esto sería lo básico y lo más interesante ahora en la estructura de las cars.
El fondo, un poquito más oscuro.
Bueno, bueno, ya estamos, ya estamos con las...
Pidiendo cosas.
F, F, F.
Así, venga.
Un poquito más oscuro.
Es que yo creo que así queda un poquito...
A ver, lo podemos poner rollo así.
Para que veáis un poco la diferencia, si queréis.
Si queréis lo dejo así.
¿Queréis que lo deje así?
¿Ese div puede ser un article?
No.
Este div, el article sería más bien lo que va dentro.
¿Sabes?
Lo que va dentro.
Lo que va dentro sí que lo vamos a hacer un article.
No os gusta así.
Vaya por Dios.
Vaya por Dios.
Bueno, vale.
Vamos a poner cómo estaba.
F, F5, F5, F5.
Vale.
Así lo dejamos, ¿eh?
Ya está.
Un section.
Un section sí que podría ser...
Lo que pasa es que sí que podría ser un section.
Pero es verdad que tenemos un section dentro de un section.
También podría ser un ul.
¿Sabes?
Esto podría ser un ul.
Y dentro tener li.
Tampoco me parece muy importante.
Me parece más importante, más interesante que sea en un article ahora.
Eso es lo que sí que creo que sea más importante.
¿Sabes?
En lugar de que sean divs.
Eso es lo que sí que creo que es importante.
Que lo que pongáis aquí es que en esta estructura tengamos un article.
Que cada card sea un article porque al final es una pieza de información que podría ser independiente y que podría mostrar en otra parte de la aplicación perfectamente.
Aquí vamos a pillar las imágenes.
Vamos a poner de las fotos a la chica, ¿vale?
A la chica.
Bueno, ahora veremos si es el chico.
Pensaba que era la chica.
Alex.
Brown hair.
Men.
No recuerdo qué edad.
25.
25 years old.
Y este sería el chico.
¿Qué más tendríamos que necesitamos?
Necesitamos el nombre.
Y al lado del nombre le vamos a poner la edad.
Yo qué sé.
Vamos a poner que tiene 25 años.
Y luego, a ver, esto lo necesitaremos después.
Pero bueno, ya lo voy a poner.
Es que vamos a mostrar encima de la card cuando, para facilitar las cosas, cuando la arrastremos, enseñaremos si sí o si no.
Esto lo podríamos inyectar con JavaScript.
Pero bueno, como no es tan importante, me parece más importante el swipe, lo voy a simplificar así.
Y así no tenemos que estar inyectando HTML cuando la hagamos y tal.
Y solo lo mostramos o lo demostramos y ya está.
Y esto mismo lo haríamos con la chica.
La chica que esta sería, ¿cómo le he llamado?
¿Laila?
¿Leila?
¿Leila?
Leila.
Red.
Head.
Red.
Head.
33 años.
¿33?
Bueno, no sé qué edad tenía.
Leila.
¿Qué edad le echas a Leila?
¿Qué edad tiene Leila?
A ver, decidme.
Lisa.
¿Le queréis cambiar el nombre ya?
Las cas no es recomendable tenerlas en un JSON, pero es que este no es el punto de la aplicación,
de lo que estamos haciendo APU.
No es el punto.
¿Tendríamos que tener un JSON?
Sí, pero es que entonces tendríamos que renderizar con el JavaScript y no es el punto.
O sea, es que da igual.
Lo vamos a hacer ahora con HTML porque lo que vamos a aprender es hacer el swipe, que es lo que tiene más.
Sí, 66 con Botox.
No os lo creéis ni Hardtobinar.
27, han dicho por ahí.
27 me parece que tiene más sentido, ¿vale?
Le voy a poner, ¿dónde está?
Alex.
Leila.
27, ¿vale?
Y ya está.
Vale.
Pues ahora con esto lo que vamos a hacer es ir aquí, tú, tú, tú, y empezamos con las cars, ¿vale?
Cars.
Las cars, fácil.
Position relative, otra vez, relative, porque las cars van a tener que necesitar el position absolute para que funcionen como queremos, ¿vale?
Vamos a hacer que utilice todo el espacio y esto lo centramos.
Por ahora no se ve mucho, pero bueno, ahora veremos.
Cuando estilemos el article, que este sí que es el más interesante.
A ver, para ver que no se me escapa nada, voy a ponerle el fondo en negro, ¿vale?
Pero luego lo quitaré.
Voy a poner el borde radius 8 pixels, ¿vale?
Que ahí veo que todavía no nos aparece, o sea que necesitamos el overflow que esté en hidden, ¿vale?
Ahora sí, ¿vale?
Y a eso que se ve mal es por el fondo, ¿eh?
Sí.
Vale.
Pero luego lo quito, luego lo quito.
Es solo por si se nos escapa algún sitio por ahí.
Entonces, vamos a ponerle, bueno, vamos a quitar el box shadow.
Vamos a ponerle position absolute.
Antes de nada, vamos a poner, no sé si estilar aquí la imagen, aquí, para que se empiece a ver bien, ¿vale?
Ok.
Esto ya tiene mejor pinta.
100%, 100%.
Vale.
El problema es que el article, claro, para que la imagen, la imagen ya sí que está bien,
pero no está pillando, si os fijáis, no está pillando, o está pillando demasiado.
Está pillando como demasiado.
Esto es porque aquí también tendríamos que asegurarnos que está pillando esta parte.
Vale.
Esto ya tiene mejor pinta.
Y aquí en el section, veis que ahora está todo como muy cerquita,
en el section vamos a darle una separación entre cada una de las secciones.
Entonces, ahora tiene un poquito de mejor pinta.
Ahora que ya veo que esto lo hemos hecho bien, quitamos esto y seguimos haciendo cosas.
Por ejemplo, vamos a hacer, le voy a poner, esto es un detalle de importancia, ¿eh?
Vamos a hacer que tenga el grab cuando estamos encima, para que aparezca la mano.
No es que vamos a tocar realmente a Leila, pero bueno, es para que cuando se vea que puedes como arrastrarlo y ya está.
Voy a asegurarme que esto se queda en el centro, que veo que no es necesario, por lo que sea.
Y vamos que esto se quede por delante con el z-index y ya está.
Yo creo que con esto ya está.
Sí que podemos, esto es una cosa que es interesante en CSS.
Yo nunca he notado que realmente marque la diferencia, pero hay una propiedad en CSS que tú le puedes indicar al browser cuáles son las propiedades que vas a animar.
Entonces le puedes decir, con will change, le puedes decir, oye, que sepas que voy a cambiar el transform, porque vamos a mover la car a los lados,
y el rotate, porque también la vamos a rotate, la rotar.
Y esto se supone que lo que hace es como mejorar el rendimiento de las animaciones.
Pues yo, la verdad, no lo he notado nunca, pero siempre lo pongo por si acaso, pero os lo juro que se supone que esta es la idea.
Mira, will change, performance, CSS.
Will change, es como que le da un consejo.
Dice, will change está, ah, mira, como último resorte, para intentar arreglar problemas de rendimiento.
No se tiene, ah, pues vale, pues no lo hago.
Bueno, pues lo quito, ya está.
La verdad es que no sé, siempre pensaba que servía para algo, pero yo nunca he notado nada, o sea que, pues nada, ya está.
Y con esto ya tendríamos la sombrita y ya está.
O sea que, bueno, estilos, bien, ¿no?
Bueno, hostia, espérate, que me falta el texto, ¿no?
Que el texto me lo he...
Vale, con el texto, a ver el texto.
El texto vamos a hacer que esté position, absolute, insert 0, también.
Vamos a hacer que ocupe todo, porque lo que vamos a hacer con el texto, más, lo que vamos a hacer con el texto es un degradado.
Porque, a ver, yo ya os digo que no he utilizado la aplicación mucho de Tinder, pero me he basado en esta página de aquí.
En esta página he visto que se supone que es así.
Yo me he fijado en este diseño, ¿vale?
Yo me he fijado en este diseño.
Entonces, en este diseño, pues veis que ahí se ve Leila Deivon, que está ahí abajo a la izquierda,
y que tiene como una especie de degradado.
Bueno, pues lo que podemos hacer, voy a poner también que esto está como por encima,
aunque veo que también se ve por encima, no hay ningún problema.
Y lo que podemos hacer aquí es un degradado con el linear gradient,
y le indicamos que vaya hacia arriba.
A mí me gusta más indicarlo así.
También lo podéis hacer con grados.
Podéis decir 0 grados.
Y entonces aquí decir, vale, pues a partir del color 0, 0.
Y ahora le decimos la opacidad, 8, 8 del 20%, a transparente en el 40%.
Y ahora te explico cómo funciona exactamente esto.
Y esto lo he puesto mal.
Ahora, ¿veis?
Eso, eso ahora sí que tiene buena pinta.
Para tirar esto para abajo, podemos utilizar el display flex,
y le decimos que el justify, no, align, align items, flex end,
y ya lo teníamos ahí abajo.
Y podríamos mover también el span este, margin left, 4 pixels,
font size, 18 pixels, un poquito line.
Para que quede esto bien, teníamos que cambiarle un poquito el line height.
¿Vale?
Más o menos.
Font regular, 400.
No sé, más o menos.
Me parece que es algo así, que se le parece.
Tampoco lo voy a hacer pixel perfect, ¿vale?
Pero más o menos sería algo así.
Vale, así estaría.
Vale, os cuento un poco lo del linear gradient,
que esto es muy interesante.
Y si esto lo vais a necesitar muchas veces,
a mí me gusta, ya os digo más, el poner tu top,
porque lo entiendo mucho mejor,
y así sé hacia dónde va,
y no me lío con los grados y todo esto.
Básicamente, el linear gradient es un gradiente lineal, ¿vale?
Y lo que le vamos a decir aquí es la dirección.
Si le dices tu top, lo que quiere decir es que
tú estás empezando desde este punto y vas hacia arriba.
Entonces, ¿qué quiere decir?
Vale, hacia arriba, pues del punto 0 hasta el 20%,
vamos a tener el que tengamos aquí, ¿vale?
Hasta el 20%.
Y luego, a partir del 20% al 40%,
se va a convertir en transparente.
Y del 40% para adelante, pues ya estará transparente totalmente.
Por eso, si, por ejemplo, aquí esto lo ponemos,
yo qué sé, voy a poner que sea negro, ¿vale?
¿Veis?
Pues aquí podéis ver que el 20% está de color totalmente negro.
Y luego, del 20% al 40%, empieza a ser,
hace como un gradiente hacia el transparente,
y del 40% hasta el 100%, pues ya es totalmente transparente.
Y ya está.
Ahí lo tenéis, ¿vale?
Pam, pam, pam.
Para traduciroslo, que esperaba que lo supierais traducir,
sino que también era para que superéis el tema de los puntos.
Además, podéis añadir un montón más, ¿eh?
Podéis añadir otros, podéis decir,
oye, pues aquí que vaya al amarillo hasta este punto, ¿no?
Y así, ¿veis?
Va, empieza hasta el 20% ahí, luego el transparente,
luego amarillo y tal.
Así que ese sería una cosa.
Vale, pues ya tendríamos los estilos de las cars.
Venga, vamos con el tema.
A ver, el span ya lo tenemos, esto lo tenemos,
nos faltaría el footer de los botones
y ya terminamos con todo lo que es lo visual, ¿vale?
El footer.
Vale, teníamos aquí los botones.
Venga, me voy a fijar aquí, vale, es,
no sé qué es esto, el deshacer, no sé lo que será eso.
Me imagino que esto es deshacer, undo, deshacer.
Esto es close o cross o remove, no sé lo que será ese.
A ver, ¿qué más tenemos por aquí?
Teníamos start, fab y zap, no sé qué es esto.
¿Para qué sirve este?
Zap, le voy a poner zap.
No sé si significa que me lo cogería,
no sé qué significa eso.
Es un rollback de la base de datos.
No sé qué significa, la verdad.
¿Es too fast?
Ah, ¿es too fast?
El fap es super like.
Ah, bueno, da igual, no importa.
Es para el electrocutor.
Ah, es un boss de visibilidad.
Ah, vale, vale.
A ver, amigos, yo sé que vosotros igual los creéis que es por la broma,
pero de verdad, yo no he utilizado Tinder nunca.
La única vez que he utilizado Tinder,
la única vez que he utilizado Tinder,
fue a manos de un colega,
de que le dije, trae, que yo te lo utilizo.
Y le hice, ta, ta, ta, ta, ta, ta, ta, ta, ta, ta, ta, ta, ta.
Y ya está, es la última.
La única vez que lo he utilizado en mi vida.
Desde aquí, saludos a mi amigo David,
que se acuerda de ese momento
y que consiguió un montón de citas gracias a eso.
Vamos a poner class.
Y a ver, ¿qué podríamos poner con las clases?
Vale, fijaos que hay unos botones
que son un poco, un poco más grandes.
Entonces, vamos a poner los que son un poquito más grandes.
Es este, is big.
Y este, is big.
Y luego, ya está.
Lo que tendríamos aquí serían los botones en sí mismos.
Por ejemplo, esto sería el irrefresh,
el irremove, irremove,
el isstart, que no sé lo que sea, será,
isfab y el iszap.
Yo le voy a llamar zap.
No sé, habéis dicho que era el superlike
o el supervisibilidad ese.
Pues eso nos lo vamos a tener que creer.
¿Vale?
Entonces, vale, vamos por partes.
Le he puesto de 32.
No sé si 32 será mucho, será poco.
Lo primero que vamos a hacer
es que yo tengo todos los iconos aquí.
¿Vale?
Veis que tenemos aquí todos los iconos.
Vamos a utilizar una técnica muy interesante,
muy antigua, más antigua que el andar para adelante.
Pero es que no tengo los SVG
y ni tampoco tenía las ganas de hacer el degradado y todo esto.
Entonces, ¿qué pasa?
Pues he dicho, hostia,
si ya tengo las imágenes y no se ven mal.
Bah, pues ya está.
Y os voy a enseñar una técnica
que se hacía antiguamente.
De hecho, yo no sé si Google la sigue haciendo.
¿Google es capaz?
¿Es capaz?
Aunque no tiene muchas imágenes,
pero es capaz de seguir haciendo esta técnica.
Esta técnica era la técnica de los sprites.
Y la técnica...
Ah, sí, sí.
Mira, mira, mira.
Mira, la sigue haciendo, ¿eh?
Qué fuerte.
Mira, mira.
Preload sprite.
Sí, sí, la sigue haciendo, ¿eh?
Qué fuerte.
Mira.
Qué fuerte, tío.
Es que Google es la hostia.
Vale, os cuento esta técnica.
Esto es muy old school.
Esta técnica básicamente lo que consistía es,
tú, en lugar de, para cada recurso,
para cada imagen, cargar una imagen,
lo que hacías era cargar una imagen con todos los recursos
y los separabas, ¿vale?
Lo que hacías es decir,
vale, como voy a necesitar todas estas imágenes,
la meto en una sola imagen que la descargo una sola vez.
Y en temas de rendimiento es mucho mejor hacer esto
que descargarte 24 imágenes.
Porque 24 imágenes tienes que hacer 24 peticiones
y al final, quieras o no,
solo el hecho de tener que enviar la cookie,
el hecho de hacer la petición,
pues todo tiene un retardo, ¿vale?
Hacer solo una vez la petición es mucho mejor.
Entonces, se hace esta técnica que es muy similar a los videojuegos,
que seguramente que la habréis visto alguna vez,
que esto, ¿vale?
Esto se hace mucho en los videojuegos,
que tienes una imagen con todos los movimientos del personaje.
Y entonces, tú lo que haces realmente es cargar el recurso una vez
y lo que haces es mover como un puntero imaginario
de la parte de la imagen que realmente quieres enseñar.
Y de hecho, si no lo entiendes, no te preocupes,
porque ahora justamente te voy a enseñar cómo lo hacemos.
Por ejemplo, aquí en el botón tenemos claro
que lo que quiero es el background, ¿vale?
La URL, pillamos el Tinder Icons, ¿ok?
Y le decimos que no lo queremos repetir.
Vale, hasta aquí, bien.
Ahora bien, le vamos a decir que la posición
por defecto se da 0 píxeles por 0 píxeles
y le tendríamos que cambiar el size.
El size aquí es bastante difícil saber exactamente cuál es,
pero bueno, ya veis que ya se ve algo por ahí.
Yo creo que es más grande, 150, casi, 170.
Bueno, 175.
Bueno, bueno.
A ver, más o menos, más o menos.
Ahí estaría, ¿vale?
También es verdad que con el scale igual no se ve muy bien.
Pero con esto ya tendríamos, ¿veis?
La imagen.
Ahora, lo que tendríamos que hacer,
ya hemos cargado de fondo todas las imágenes
y con el position, jugamos con el position.
Lo que vamos a hacer con el position, básicamente,
voy a poner que esto sea pointer,
border radius ya lo tengo.
Le voy a quitar el border.
Le vamos a quitar el border.
Border 0, ¿vale?
Vale.
Ahora sí.
Y vamos a decir que tenemos el hover,
vamos a poner scale 1.3 y transformamos,
hay transition del scale.3 is, ¿vale?
Y esto para que se haga grande cuando pasamos por encima.
Igual incluso un poquito más grande.
Luego, vamos en la clase que hemos dicho de los que sean más grandes,
pues vamos a poner que sea de 48, ¿vale?
48.
Y esto ahora lo arreglaremos también porque, obviamente,
los que son de 48, el background size tiene que ser más grande.
No sé.
Más grande.
Más grande, más grande, más grande.
¿Vale?
Este parece que está bien.
Vale.
Y luego ahora lo que tenemos que hacer es que en cada uno de los botones,
por ejemplo, en el botón, aquí, is refresh.
Vale.
Pues el is refresh, lo voy a poner aquí.
El is refresh, que es el primero.
Bueno, no sé, ¿era refresh o era un do?
Ah, es que he dicho is refresh.
Pues era deshacer, se supone.
No sé, no sé qué hace.
Pero lo vamos a...
Is undo.
Lo que hacemos aquí es mover el position de forma que, ¿ves?
Voy a ir moviendo la imagen hasta que encuentre cuál es la imagen correcta.
Ahí me he pasado.
Vale.
100.
Ahí.
Ahí lo tenemos.
¿Vale?
Y ahí queda bastante bien centrado.
Pues ya, ahí lo tendríamos.
Tendríamos el undo, el background position, menos 140 píxeles.
Lo que hemos hecho es mover la imagen 140 píxeles.
Lo que estamos haciendo es, básicamente, que el fondo encaje exactamente en la parte que nos interesa.
Aquí no he puesto el segundo.
Podría poner el segundo.
Pero ya podéis imaginar que el primer parámetro sería el horizontal y el segundo parámetro es el vertical.
Claro, si tocamos el vertical, por ejemplo, pues vamos a mover, ir moviendo aquí, ¿vale?
Veis que se va moviendo y ahora ha desaparecido porque lo estoy moviendo.
Pero lo ideal es cero, ¿vale?
Para que no se mueva el vertical porque no lo queremos mover.
Las imágenes, como habéis visto, las imágenes...
A ver dónde he puesto el button.
Aquí.
Las imágenes las tenemos todas en horizontal.
Por lo tanto, solo nos tenemos que mover en ese eje, en el eje de la X.
Y lo mismo tendríamos que hacer por aquí con el resto.
No sé cómo eran...
Vale.
Ir remove.
No es este.
Pues tendríamos otra vez que ir moviendo.
Iríamos moviendo hasta que encontremos cuál es el correcto.
Ah, mira, ahí he visto algo.
145, un poquito más.
Vale, 142.
Tendríamos que encajarlo perfectamente porque a lo mejor no los estoy encajando perfectamente.
De hecho, ahí se ve que tiene un poquito más de...
Tendríamos que encajarlos perfectamente, pero bueno, ahí podría estar demasiado rato y no hay ganas.
El SuperZap este también, pues nada, lo mismo.
Habría que empezar a mover aquí.
Menos 200, menos 120, 30, 40...
A ver, 20, 30, 40, 50, 60, 70, 80, 90, 110, 20, 30...
Joder, ¿dónde está el...
Ah, es que es el primero.
Claro, es que es el primero.
Es que es el primero, vale.
El Zap es el primero.
O sea, el Zap no hace falta hacerle nada.
Vale, vale.
Vale, ¿qué más tendríamos?
El IsFap.
IsFap.
Background Position.
Y esto es una técnica milenaria.
Es una técnica milenaria que, bueno, me hace bastante gracia porque como podéis ver,
Google la sigue utilizando, tío.
O sea, es increíble que Google la siga utilizando.
Me parece brutal.
Vale, y solo nos falta el tercero, que el tercero lo tenemos por aquí, es la estrellita.
Vale, pues solo nos falta la estrellita.
Así que nada, tocamos aquí, Is Start y ya el Background Position, tú, tú, tú, con la estrellita.
Vamos a ver dónde es la estrellita.
30, 40...
Esto antes...
Bueno, antes no, siga habiendo, seguro.
Había utilidades que te lo hacían automáticamente, ¿vale?
O sea, que tú no tenías que hacer absolutamente nada.
Oye, ¿y dónde está la estrellita?
Ah, la estrellita...
A ver, 10, 20, 30, 40, 50, 60, 70...
Aquí.
Ahí está.
Vale, pues ya la tendríamos.
Ya tendríamos todos los iconos con una sola imagen.
A ver, normalmente hoy en día se utilizan SVGs, pero ya veis que, por ejemplo, Google sigue haciendo esta técnica.
Porque a veces tiene sentido.
Claro, estas imágenes serían muy costosas hacerlas con SVG.
Muy costosas.
Y por lo tanto lo que hacen, lo que prefieren es decir, me descargo esta imagen una sola vez, que a lo mejor, fijaos, una imagen bastante tocha.
Me descargo esta imagen una vez, que además son los iconos, y ya está, tengo todos los iconos ahí, y muevo el background donde tenga, lo necesita, y ya está.
Son cositas interesantes.
¿Qué alternativas hay de los sprites?
Utilizar SVGs, por ejemplo.
Los SVGs, pero ya te digo que a veces...
Así se carga cinco veces la misma imagen, ¿no?
No, solo se carga una vez, justamente.
Solo se carga una vez, pero me has escuchado.
Escúchame.
Escúchame.
Con el responsive.
Con el responsive, a ver, no debería por qué pasar nada a no ser que cambies el tamaño.
Claro, si cambias este tamaño, sí que vas a tener que ajustar, por ejemplo, los background size y todo esto.
Pero hay muchas veces que los botones a lo mejor los ves exactamente igual.
O lo que puedes hacer es jugar justamente con el background size.
Una vez que juegas con el background size, pues a lo mejor dices, bueno, si ocupa el doble de espacio, ¿vale?
Si decimos, por ejemplo, pues si el doble de espacio es 64, pues por lo tanto tengo que hacer que el background size sea el doble,
y entonces así, bueno, o lo que sea, o la mitad, o tal.
O sea, puedes jugar con los multiplicadores y ya está.
O sea, sería una forma de hacerlo.
Ah, que tengo aquí el background size.
Es que claro, yo también.
Pero eso sería una forma de hacerla.
Cambiar el background size mientras cambias también el tamaño.
Pero bueno, no es que sea lo mejor, ¿eh?
¿Esta técnica sigue siendo recomendada?
Depende.
Por ejemplo, en el caso de Google, yo creo que sí que tiene sentido.
Tiene sentido en el caso de Google porque eso pueden ser SVGs que sean muy complicados.
Fijaos, esta imagen, esto no puede ser SVGs.
Y total, son imágenes, la descargamos una vez.
En lugar de tener que descargar, imaginar que se tenía que descargar todo esto.
Pues el rendimiento de Google sería tomar por saco.
Por lo tanto, con una sola imagen, mejora mucho el rendimiento.
Así que puede ser buena idea cuando son imágenes complejas, que son iconos, que no pueden ser SVGs y que lo puedas hacer.
Pero para SVGs, pues seguramente no lo haría, sinceramente.
Por ejemplo, estos que han hecho aquí, yo no lo haría.
No me parece buena idea.
Me parece un poco innecesario.
Pero bueno, ellos, como veis, lo siguen haciendo.
O sea, lo hacen hasta para esto nuevo que han hecho, también lo han hecho.
Suele tener bastante buen rendimiento.
Así que es una idea interesante, pero ya os digo, no para cualquier cosa.
O yo a día de hoy no lo haría para cualquier cosa.
Pues así está quedando esto.
Así está quedando nuestra cosita.
Ahora bien, ya tenemos todo el tema de estilos.
Ya podemos pasar al drag de las cartas, al arrastre.
Así que vamos a crear el script.
Vamos a tener un flag para saber si estamos animando la carta.
Ahora, aquí ten paciencia porque me puedo equivocar, porque puede haber cosas que no funcionen.
Pero vamos a intentar que funcione y vamos a ir paso a paso explicándolo todo.
Uno, vamos a decir, vamos a saber si se está animando la carta.
Porque vamos a tener que controlar que si se está animando no se puede arrastrar a la vez.
Porque se nos va a ser muy raro.
Entonces, mientras se está animando, vamos a hacer que se eviten los eventos.
Y por otro lado, vamos a necesitar lo que se llama, vamos a llamarle delta x, pull delta x o distance.
Bueno, llámale como quieras.
Esto es la distancia que la cart se está moviendo o arrastrando, como quieras llamar.
¿Por qué?
Porque vamos a necesitar saber el delta que quiere decir.
Delta es la diferencia entre dos posiciones.
Y vamos a necesitar controlar la posición inicial y la posición en la que está el usuario actualmente.
Por lo tanto, tendremos la posición inicial, que ahora veremos cómo lo hacemos.
Y luego tendremos la posición donde se ha quedado el usuario.
Y ahí tendremos la distancia.
La distancia es importante para justamente saber al final si tiene que irse a un sitio, a otro,
o si tiene que volver hacia atrás.
De hecho, eso nosotros podríamos hacerlo con una distancia.
Es decir, si pasa a esta distancia, entonces entendemos que ha tomado una decisión.
¿Vale?
Entonces, vamos a crear a una función startDrag que le va a recibir un evento.
El evento es donde vamos a tener, por ejemplo, cuál es el elemento que estamos arrastrando.
Y aquí, si se está animando, vamos a devolver.
¿Vale?
Si se está animando, cuando empecemos a hacer drag, si ya se está animando,
la dejamos como está para evitar cositas raras.
Ahora, vamos a recuperar get the first article element.
Vamos a recuperar el primer elemento de las cars, ¿vale?
El que se esté arrastrando más cerca del evento.
Aquí tenemos el evento del drag, ¿vale?
El event.
Y aquí tendríamos el elemento que ha recibido el evento.
Así que vamos a recuperar qué elemento que tenga más cerca el article, ¿vale?
Es el que está.
Porque imagínate, a lo mejor yo estoy aquí, estoy arrastrando aquí, a lo mejor esto es el título.
Pero lo que vamos a hacer con esto es buscar el article más cercano.
Porque lo que queremos es mover toda la cart.
No solo el title.
Por lo tanto, lo que nos queremos quedar, aunque yo haga el arrastre en cualquier elemento de dentro de la cart,
lo que quiero es la cart.
Y eso lo hacemos con este método closes, ¿vale?
Recuperamos el article más cercano que estemos arrastrando, ¿vale?
Y ahora, get el initial position.
Os voy a ir añadiendo comentarios, básicamente, para que podáis seguir.
Off mouse, off finger.
¿Vale?
Para si esto luego lo subimos, pues, porque sepáis más o menos dónde salen las cosas.
Vamos ahora a recuperar la posición inicial, ¿vale?
Fijaos.
Mira, voy a hacer una cosa con esto.
Antes de poner aquí, voy a hacer un console log del event para que veamos esto, que está bastante interesante,
de dónde se saca esta información.
Y ya aprovechamos y vamos a escuchar el evento interesante.
Vamos a utilizar dos tipos de eventos, ¿vale?
Uno, vamos a escuchar el mouse down, porque nos interesa justamente con el ratón,
pero también nos interesa con los toques del dispositivo móvil.
O sea, si tienes un móvil, lo vas a querer escuchar también.
En lugar del mouse down, lo que vamos a utilizar es el touch down, no, el touch start, ¿vale?
Vamos a empezar esto.
Pero, ojo con esto.
Con el touch start vamos a utilizar eso, passive true.
Un modificador del evento.
¿Por qué?
Porque el modificador del evento, el touch y el touch move y todos estos, son bastante, bastante, bastante mal performantes.
Performan muy mal.
Es como los eventos del scroll, que funcionan, no es que funcionen mal, pero que son muy costosos.
Y entonces, ¿qué hacemos con esto?
Al utilizar el passive true, lo que estamos haciendo es ignorar cuál es el comportamiento por defecto que tendría al hacer el touch start, ¿vale?
Lo ignora totalmente.
Y además, lo que estamos haciendo es como ponerlo como más en segundo plano.
No vamos a bloquear absolutamente nada.
Lo estamos dejando, por eso se le llama pasivo, ¿vale?
Porque es como passive de lo vamos a escuchar, pero no queremos bloquear nada,
no queremos hacer el comportamiento por defecto, ya no vas a tener que hacer un prevent default ni nada.
Así que por eso estamos haciendo esto, el passive true, y eso lo vamos a hacer con todos los que sean de touch,
justamente para que vaya mucho más fino, ¿vale?
Entonces, con esto ya escucharíamos el start drag que va a funcionar.
Aquí tendríamos esta función.
Si guardamos los cambios y ya aquí nos vamos a las herramientas, ¿vale?
Fíjate que estoy arrastrando, estoy haciendo ya el arrastre, y aquí tengo un montón de información.
Y entre la información interesante, fíjate que tengo aquí el page X.
Esta es la posición en la que he hecho el click, ¿ves?
Cuando, si, por ejemplo, yo le doy aquí o le doy aquí, ¿vale?
Tenemos dos eventos y el page X aquí es de 748, pero en el de antes es de 703.
¿Ves la diferencia?
Porque he estado haciendo el click en sitios totalmente diferentes.
Eso es lo que nos va a interesar porque ese va a ser el punto, hostia, el punto inicial, ¿vale?
Le vamos a start X, es donde iniciamos.
Y lo pillamos de page X.
Lo que pasa es que para el touch start no se pilla del page X.
Esto es solo para el mouse.
Cuando hacemos el touch, lo pillamos del event, event, punto, touches, cero, punto, page X.
Touches cero es porque los eventos de touch, al final tú puedes hacer touch con cuatro dedos a la vez.
Entonces te aparecería ahí.
Normalmente, normalmente, lo que vamos a querer es el primero que se ha tocado, ¿no?
Pero esto de touches es justamente porque podemos detectar también multi-touch y por eso tenemos un array con diferentes touches, ¿vale?
Ahí tendríamos el start X.
Ahora, ¿qué necesitamos hacer aquí?
Pues ahora escuchar de mouse and touch movements, ¿vale?
Cuando se está moviendo, por ejemplo, document atvListener.
Cuando tenemos aquí el mouse se está moviendo, pues aquí estaríamos que se está moviendo.
Ahora haremos esta función.
Y lo mismo tendríamos con el mouse cuando ha terminado, o sea, cuando ya lo estamos soltando.
Esto sería que ha terminado, ¿vale?
O sea, on end.
Y estos dos eventos que tenemos que escuchar también lo vamos a hacer con el touch.
Tendríamos el touch move y el touch no up.
Este no sería up, sería end.
Y lo mismo que hemos hecho aquí con el passive lo vamos a hacer aquí.
Y ahora la pregunta del millón.
¿Por qué hacemos esto aquí?
¿Por qué lo hacemos dentro de esta función?
Esto lo hacemos dentro de esta función porque no tiene sentido que si no estamos empezando a arrastrar algo,
no tiene sentido escuchar nada.
Por lo tanto, lo que vamos a hacer, que luego lo quitaremos también los eventos,
vamos a escuchar el evento de movimiento solo cuando realmente antes hayamos hecho un clic
o estemos arrastrando con el dispositivo, ¿vale?
¿Por qué? Porque no tiene sentido que escuchemos esto antes.
Solo lo vamos a escuchar cuando ya lo hemos iniciado, ¿vale?
Así que por ahora ya tendríamos esto.
Nos faltaría obviamente aquí tener el function que lo podemos hacer aquí,
function on move con el event y el function on end,
que son los dos eventos que estamos escuchando aquí,
cuando se mueve y cuando termina.
Así que por ahora tendríamos esto.
Lo que podemos ver aquí por ahora sería el start x y ver si no nos ha petado nada.
A ver si aquí nos ha petado algo.
Movemos aquí.
Vale, ¿veis?
Ya tenemos el start x, pero todavía cuando movemos no está pasando nada.
Vamos a hacerlo de long move, que está bastante bien.
Vamos a pillar el current position.
Lo que queremos es que mientras se mueve, ya sea el mouse or finger,
lo que sea, una de las dos,
vamos a pillar cuál es la posición actual.
Y tenemos que hacer exactamente lo mismo que hemos hecho antes.
Fijaos cómo hemos recuperado antes la posición del evento.
Pues mientras se está moviendo el mouse o el dedo,
también vamos a recuperar la posición del dedo o del mouse.
Justamente igual del evento con el page x o de los toques con el page x.
Aquí tendríamos esto.
Ahora lo que necesitamos es la distancia between the initial and current position.
O sea, la distancia que ha recorrido el dedo o el mouse.
Así que aquí es donde vamos a guardar el pull delta este.
Y podemos hacer current x, que es la posición actual,
menos la inicial que habíamos puesto aquí mismo.
¿Vale?
Y entonces ahora ya con esto, esto es una maravilla.
Porque esto son matemáticas.
No, esto no son matemáticas.
Bueno, sí que son matemáticas, pero que es muy sencillo.
Ya podríamos hacer el pull delta x y ver justamente.
Si yo empiezo aquí y voy hacia la izquierda.
Uy, start x.
¡Ay!
¡Coño!
Es que esto lo he puesto aquí.
No sé si sabes lo que podría hacer esto.
Lo voy a poner dentro.
¿Vale?
Podría hacer variables globales, pero da igual.
Lo voy a poner aquí dentro.
Ya está.
Vale.
Y ya está.
¡Tú, tú, tú, tú, tú!
¿Veis?
¡Ajá!
Ahora, claro, esto es porque no estoy, ¿veis?
No estoy quitando el evento.
Por eso es mala idea tener siempre el evento.
Pero eso lo arreglamos después.
El tema es que ahora voy a hacer click y voy a arrastrar hacia la izquierda.
Y fíjate lo que pasa.
Ya estoy viendo que la distancia desde el click inicial hasta aquí ha sido de 133 píxeles.
Y si lo hago al revés, clico a la izquierda y voy hacia la derecha, ¿vale?
Ves que la distancia va aumentando y que podemos ver justamente que ya he recorrido 134 píxeles.
O sea, con esto ya podemos saber cosas muy interesantes.
Uno, que si el pull date, bueno, podemos poner pull delta x, es igual a cero, no hacemos nada.
Porque no hay distancia recorrida.
Claro, si no ha recorrido distancia, pues no hacemos absolutamente nada porque la podemos liar parda.
Así que más fácil.
Luego, lo más fácil aquí es que podemos primero indicar que ahora se estaría animando y todo esto.
Pero ya podríamos empezar a animar la car hacia un lado o hacia el otro.
Porque lo que podemos hacer es decir, ¿vale?
Si... ¿Cómo podemos calcular esto?
Primero, la rotación.
¿Vale?
La rotación va a ser básicamente cómo vamos a ir girando la car conforme se va moviendo.
Conforme se va moviendo, la car, si te fijas aquí en Tinder...
Lo he cerrado.
Pero si te fijas, cuanto más lo mueves, más rota.
Entonces, lo que vamos a hacer es el pull delta lo podemos dividir entre 10.
10 sería como el máximo de grados que queremos que tenga la car.
Y cuanto más lo giremos a la izquierda, más llegará justamente a esos 10 grados.
Si queremos que sea más bestia, pues esto lo podemos aumentar y ya está.
O lo podemos disminuir y luego lo veremos.
¿Vale?
Esto sería, por ejemplo, los grados.
Y luego, ya lo único que tendríamos que hacer es directamente aplicar los estilos.
O sea, tendríamos que tener la actual car y en los estilos decir, vale, pues quiero transformar.
Aquí tendríamos el translate, ¿vale?
El translate sería moverlo hacia la izquierda.
Utilizamos el pull delta, que es la distancia recorrida,
para que conforme nosotros lo vamos moviendo a la izquierda, se vaya moviendo a la izquierda.
Y a la vez lo vamos a ir rotando con la rotación que tenemos aquí.
¿Vale?
Así que tendríamos esto.
Y también podríamos cambiar esto, el cursor, para que sea el grabbing.
Para que se vea que realmente lo estamos agarrando.
Y así tú también visualmente lo verás.
Y también, además, aquí estaríamos animando.
Fijaos que aquí tendríamos que decirle que estamos animando.
Esto sería calculate the rotation of the card using the distance.
Le podría haber llamado distance, ¿eh?
Apply the transformation to the card.
Change the cursor to grabbing.
¿Vale?
Así tendríamos esto.
Change the flag to indicate we are animating.
Vale.
Entonces, solo con esto...
Vale.
Faltan cosas, pero fíjate, qué bonito.
¿Ves?
No lo puedo soltar, no hace nada, pero ahora ya está siguiendo justamente lo que queremos.
¿Ves lo de la rotación que te decía?
Claro, si yo aquí le pongo, por ejemplo, 100, ¿qué va a pasar?
Pues que casi no va a rotar.
Si aquí, por ejemplo, le pongo 2, pues claro, la rotación va a ser muy loca.
Se va a ir aquí un poco a la locura.
Entonces, podéis ver si, yo qué sé, pues 9.
Pues 9 ya tiene sentido.
15.
Alguna cosa.
15 sería menos dramático.
Un poco sería cuestión de ir mirando cuál es el elemento, o sea, el número mágico que queráis ver.
¿Vale?
Pero con esto ya, justo solo con esto y código, que tampoco es que hemos hecho aquí un cálculo.
El más complicado es el de la rotación.
Pero el translate, lo único que estamos haciendo es que conforme lo vamos moviendo nosotros,
nos esté siguiendo la distancia y ya está.
Y eso es lo que hace que se sienta tan natural.
Porque justamente lo que pasa es que conforme tú lo mueves, se va moviendo exactamente, exactamente igual a la distancia recorrida.
Así que lo puedes hacer, ¿no?
Para mí 15 es el mejor.
Vale, pues ponemos el 15.
¿Vale?
Para que lo tengáis ahí.
En 15.
A ver, 15.
Vale, pues ahí lo tenéis.
Ahora, todavía nos faltan cositas.
Vale, 13.
Aquí cada...
Mira, hoy es 14.
Hoy es San Valentín.
Vamos a poner 14 y ya está.
Ahí lo tenéis.
Y ahí no hay ningún tipo de peleas.
Así que por ahora ya tendríamos el movimiento.
Ahora lo que nos faltaría...
Porque fíjate que una vez que lo toco, aquí no hay nada que hacer.
¿Vale?
Lo he soltado y fíjate, aquí esto se me ha quedado aquí.
¡Ah!
Suéltame.
Bueno, por ahora lo que vamos a hacer es limpiar muy bien.
Eh.
No todo.
No todo está bien.
A ver.
Claro.
Ahora con esto, con este código.
Esto sería limpiar los 7 Linseners.
Lo que hacemos es el mouse move, el mouse up, el touch move, el touch en.
Esto lo limpiamos.
Que son justamente los que hemos creado aquí.
Esto tenemos que limpiarlo con el remove.
Y ojo, hay que pasarle también la función.
Y aquí está reseteando los flags y todo esto.
No está mal porque fíjate que lo que hace es volver al inicio.
¿Vale?
No está mal, pero nosotros vamos a hacer esto de otra forma porque queremos animarlo.
Queremos que al soltar haga una animación que vuelva o no, dependiendo de si la distancia recorrida es más o menos, que vuelva o no al principio.
¿Vale?
Entonces, bueno, lo puedo dejar por ahora para que no se rompa.
Y vamos a hacer ahora lo de soltar las cas.
¿Vale?
Esto voy a poner aquí, to do, to remove as we are doing this other way.
Other way.
¿Vale?
Ok.
Pero ya tendríamos un poquito al menos esta animación.
Vale.
¿Qué necesitamos hacer ahora?
Un poquito de CSS.
Y es que ahora lo que vamos a hacer es que cuando soltemos la car ocurra algo.
Y lo que tiene que ocurrir es o que se va definitivamente a la izquierda o a la derecha o vuelva al centro.
Y eso va a depender de cuánta distancia hemos recorrido.
Por ejemplo, si yo pillo a Leila y la muevo un poquito a la izquierda y la suelto, quiero que haga justamente lo que hace ahora con una animación, no así tan de golpe.
Pero si pillo a Leila y la muevo muy a la izquierda, significa que le estoy diciendo que no me interesa, que no sé, que soy alérgico a las piel rojas y que por lo tanto quiero que se vaya.
No que vuelva otra vez.
Leila, ya te quiero fuera de mi vida.
Bueno, pues eso, quiero que realmente pasen cosas.
Para hacer eso, lo primero que vamos a hacer es en el article vamos a añadir unas clases nuevas, ¿vale?
Porque por aquí teníamos imágenes, no sé qué.
Vamos a crear unas clases que sean de animación.
Por ejemplo, vamos a tener una que vaya a la izquierda.
Cuando definitivamente queremos que se vaya a la izquierda, vamos a hacer que la car, el translateX, ¿vale?
Se vaya 100% a la izquierda, o sea, que desaparezca de nuestra vista y además vamos a ponerle menos 14, bueno, más.
Que sea un poquito más bestia, ¿vale?
Para que realmente rote y que se vea como se va del todo.
Vamos a ponerle, yo creo que con esto, no sé si ponerlo important, porque como tenemos otras transformaciones, igual entran en conflicto.
Pero bueno, luego si no, se las quitamos y las probamos.
Y lo mismo sería cuando queremos que vaya a la derecha, ¿vale?
Y esto tendría que girarse al otro lado, hacia la derecha, ¿vale?
Tener que seguir, obviamente, cuál es la dirección, hacia dónde va.
Esto es cuando se van, pero ¿qué pasa cuando se resetea?
O sea, cuando vuelve.
Fíjate que cuando se resetea, ahora vuelve de golpe, ¿no?
Como que vuelve, no está mal, a mí no me parece un mal plan, ¿no?
Que vuelva de golpe, no está mal, pero estaría chulo que volviese a su posición con una animación.
Entonces, podemos ponerle un reset, ¿vale?
Y el reset, básicamente, sería, oye, pues cuando lo reseteamos, vamos a añadirle una transición que, moviendo la transformación con el efecto is,
y la transformación, la transformación es que el translate de la X, pues se vaya a cero.
No sé si ponerle un important también y ya estaría.
O sea, que vuelva a su posición original, a la posición original en la que estaba, y con la transición de 300 milisegundos.
Lo podríamos poner un poquito más y, bueno, ya está.
Otra cosa que tendríamos que hacer aquí en el go left y en el go right, es decirle que las transiciones, también, que van a ser de transformación,
y también vamos a ponerle la de rotación, y ya está, para que se animen animadas, ¿vale?
Ya tendríamos todo el CSS que necesitamos, no necesitamos nada más de CSS.
Ahora, nos vamos por aquí, on end.
Cuando terminamos es cuando estamos tomando la decisión, que ahora estábamos haciendo todo esto,
pero realmente lo que tenemos que hacer aquí es saber si el usuario tomó una decisión.
Entonces, para saber si el usuario ha tomado una decisión, lo que tenemos que mirar es si la distancia que ha recorrido es suficiente.
Así que vamos a crear aquí un decision threshold, ¿vale?
Yo qué sé, podríamos, 150 me parece mucho.
Vamos a poner 80, porque antes cuando hemos movido parecía que la distancia más o menos era 100 y algo.
Vamos a 80 o 75 y luego lo podemos ir ajustando, ¿vale?
Entonces, para saber si el usuario tomó una decisión, lo que podemos mirar es,
has the side, ¿vale?
Bueno, es un poco regulinchis, pero decision made, vamos a llamarle, decision made.
Lo que tenemos que mirar aquí es la distancia absoluta.
No sé por qué hace, la verdad es que KingHackoPilot, esta idea es un poco, es un poco creepy, ¿eh?
Esto, esto, esto no está bien, esto no está, a ver, no está mal tampoco, pero es un poco innecesario.
Lo mejor aquí es tomar el valor absoluto de la distancia, porque como hemos visto,
la distancia podría ser negativa o positiva.
Y lo que queremos es saber el valor absoluto, o sea, cuánto ha recorrido.
Si lo que ha recorrido es mayor o igual a la decisión, entonces es que ha tomado una decisión.
Y si ha tomado una decisión, pues haremos una cosa, y si no ha tomado una decisión, pues haremos otra cosa, ¿vale?
Eso, pues puede ser, ¿vale?
Pero por aquí van un poquito los tiros.
A ver, decisión hecha y estoy pensando, ¿vale?
A ver esto, a ver esto cómo va.
Entonces, si yo muevo poquito, pensando, pero vamos a ver, si muevo mucho más, decisión hecha, ¿vale?
O sea, ya tiene buena pinta.
Ahora, para saber qué decisión es la que he tomado, tendríamos que saber si era positivo o negativo.
Ya hemos visto que, por ejemplo, aquí el pool delta, console, ¿vale?
Pool delta, cuando lo tiro a la derecha, ¿vale?
Es un número positivo, pero cuando lo tiro a la izquierda es un número negativo, la distancia negativa.
Entonces, para saber si ha sido yai or niai, decimos go right, si el pool delta es positivo, ¿vale?
Y si go left, podríamos hacer esto, pero bueno, a ver, podríamos hacer esto o podríamos directamente hacer esto, ¿eh?
Básicamente esto es un tema más semántico.
Para no utilizar todo el rato el go right, go right ahí y negarlo, lo negamos una vez y así lo utilizamos todo el rato.
Y aquí ya, pues simplemente tenemos que añadir la clase, add class according to the decision, ¿vale?
Si la cara actual, ¿vale? Aquí dice class list, ¿vale?
Está bien, esto podría ser una forma de hacerlo, no me parece mala idea, si añadir la clase de si es go right, go right y si no, go left.
Entonces, si vamos aquí, ¿vale?
Ya ves que ha ido un poco un inchis, no ha ido del todo bien, porque fíjate que aquí, ¿vale?
No sé si aquí tenemos que poner como más, pero más 200% o algo así, para que desaparezca totalmente de nuestra vista.
Vale, eso ahora sí que parece que tiene mejor pinta.
A ver, tú, tú, tú.
Y tendríamos que hacer aquí un poquito como más bestia.
Más bestia la... esto.
A ver...
Ah, sí, ahora sí que estaríamos un bol.
Ahora tendríamos que tener, como veis, ahora ya sí que tenemos que se va, ¿vale?
Ahora sí que se va, ahora sí que se va.
Para que... vamos a hacer que no sea tan bestia, que a lo mejor es demasiado, ¿vale?
Pero ahora sí que se va.
Perfecto.
Este, uy... a ver...
Vale, y este...
No puedo quitar, no puedo pillar el siguiente.
Ah, bueno, claro, es que todavía no... es que nos faltan cosas por hacer todavía.
Pero bueno, que más o menos ya tenemos lo de la decisión, ¿vale?
La decisión...
Tendríamos aquí pensando...
Go right, go left...
Esto ya lo tenemos.
Lo que podemos hacer aquí es escuchar el evento de que cuando...
Cuando ha terminado la animación...
Muy bien.
Cuando ha terminado la animación, cuando ha hecho el transition, ha terminado,
entonces lo que hacemos...
Bueno, esto de...
Podríamos eliminarlo, no habría ningún problema.
O sea, podemos eliminarlo.
Podríamos hacer actual car y eliminarlo.
El isAnimating este lo vamos a hacer en otro sitio, lo vamos a hacer aquí.
Pero bueno, sí, podríamos eliminarlo o...
A ver, podríamos eliminarlo.
Sí, total, no la queremos para nada.
Una vez que termina la animación, pues eliminamos el elemento y ya no nos molesta
y ya no está ahí y ya está.
O sea, que podríamos hacer esto.
Eliminar el elemento y ya está.
Vale.
Esto en el caso de que tomemos la decisión.
Pero ¿qué pasa si no tomamos la decisión?
Si no tomamos la decisión, o sea, si todavía no ha tomado la decisión,
lo que necesitamos es hacer básicamente algo parecido, pero con el reset.
¿Vale?
Añadimos el reset.
Esto es seguro.
Y lo que vamos a hacer seguro también es eliminar tanto el go right como el go left.
¿No?
Por si lo que sea, habíamos añadido el go right o el go left,
estas no tienen ningún tipo de sentido que las añadamos, pues ya estaría.
Entonces, si haga, ¿ves?
Ah, lo que, no sé por qué.
Es que me falta, a lo mejor me falta alguna cosa todavía.
El animating.
Ah, claro, claro, claro.
Me falta aquí, me falta aquí.
Ahora la, claro, reset de variables.
¿Vale?
Que me faltan cosas, me faltan cosas.
Pero bueno, al menos ya podemos ver que al menos una vez,
si no he hecho la decisión, ¿veis?
Vuelve al principio.
Y ahora lo que tendríamos que hacer, independientemente de si hemos tomado una decisión o no,
sería que la cara actual, escuchamos el evento del transition end.
Ah, y hay una cosa que no he explicado, que es este, once true.
A ver, esto es opcional.
Pero esto es un modificador de escuchar o suscribirte a eventos muy interesante,
que lo que hace es que te suscribes una vez al evento.
¿Vale?
Total, al transition end solo nos queremos suscribir una vez,
porque solo termina una vez.
Pero bueno, como solo termina una vez, justamente, también lo hace innecesario.
Pero también te puedes suscribir, por ejemplo, a un clic una vez.
Y puedes utilizar el once one, el once a true, que está interesante.
Por si no lo sabíais, pues que lo sepáis.
Entonces, aquí cuando terminemos la transición, pues lo mismo.
Vamos a hacer, vamos a quitar el estilo, remove attributes,
quitamos todos los estilos que le hemos puesto en línea.
Por ejemplo, cuando hemos arrastrado, pues le teníamos que poner aquí el transition y todo esto.
Se lo estamos poniendo aquí en línea.
Esto lo vamos a quitar.
También quitaríamos el grabbing y todo esto.
Y también podríamos quitar, pues todas las clases.
Por ejemplo, la del reset.
La de la distancia, el pull delta, lo reseteamos a cero.
¿Vale?
Porque ahora ya lo hemos soltado.
La distancia que vamos a calcular va a ser una nueva.
Y el isanimating también lo vamos a poner a false porque ya ha terminado la animación.
Y aquí, pues, ya lo tendríamos.
¿Vale?
Ya tendríamos esto.
Y ahora, si vamos aquí, pues movemos esto aquí y sigue sin funcionarme.
A ver, vamos a ver.
A ver si me habéis escuchado.
Alguna cosa se me ha escapado ahí que cuando la primera vez funciona y la segunda no me la está pillando.
Ah, el nombre del evento.
¿El nombre del evento?
Transition.
Ah, transition.
Sí.
Transition end.
Transition end.
Y aquí...
Vale, ahora sí.
Gracias, gracias.
Soy mejores que un linter.
Ahora sí.
Ahora sí.
Buenísimo, ¿eh?
Ahora sí.
Ahora sí.
Ahora sí.
Ahora sí.
Ahora sí.
Ahora sí.
Y ahora sí.
¡Eh!
¡Cómo mola!
¡Cómo mola!
¡Qué guay!
Vale.
Voy a hacer una cosita.
Bueno, es un detalle sin importancia.
Pero no sé si lo podríamos poner...
No sé si ponerlo aquí.
En article.
Podríamos poner un article también.
Claro, pero si pongo un article, ¿no?
De no hay más personas cerca de ti.
Esto no lo hagáis en vuestras casas.
Vuelve a intentarlo más tarde.
¿Vale?
Esto dentro de cars.
Vamos a poner aquí un span.
Span.
¡Hostia!
Span.
Display grid.
Place content center.
Vamos a poner aquí 444.
Bueno, un poquito menos.
777.
Font size.
14 pixels.
Text align center.
¿Vale?
¿Vale?
Al menos para cuando terminemos.
¿Vale?
Z index 0.
Menos 1.
Hostia, ¿por qué aparece ahí?
¿Por qué aparece ahí?
Es el...
¡Ay!
Es que, claro, he puesto este span así.
Ahora.
Vale.
Ahora.
Vale.
Más que nada para que haya un aviso.
¿Vale?
Vale.
Ahora lo que nos faltaría, un detallito, nada, es poner que aparezca dentro del article,
como hemos puesto lo del nope y el yes, el like, el nope, lo podemos estilar para que
se vea más claramente cuando podemos... si podemos poner el confeti, pero es que hemos
dicho que el confeti, el confeti, o sea, es una dependencia sin dependencias.
Lo que podemos hacer es estilar el nope y el like, ¿vale?
Para que aparezca, mientras le estamos haciendo, que vaya apareciendo con opacidad encima de
la cara.
Así que, nos vamos al article, ¿vale?
En el article, aquí hemos puesto el like y el nope y hemos puesto choice, ¿vale?
Article, article, tú, tú, tú.
Vamos a poner el choice, no estaría aquí, sino que estaría aquí, choice.
El choice.
Vamos a poner que tenga color...
Voy a poner color black por ahora para que lo veamos.
Vamos a poner el borde así.
Vamos a poner z-index que sea bastante.
Y position absolute, porque tampoco lo estamos viendo todavía.
Absolute.
Top 0.
¿Dónde estás?
¿Dónde está esto?
¿Dónde está esto?
4 pixels, absolute...
Ahora, ¿vale?
Es que no lo estaba viendo.
Vale, entonces vamos a pillar 16 pixels, 16 pixels...
Ahora, ahora, ahora sí que está.
Ahora sí que está.
Un poquito más grande, más grande, font más grande, negrita...
Esto igual puede ser un poquito así.
El borde radius lo ponemos así, un poquito así.
Le ponemos un padding, ¿vale?
Padding, 4 pixels, 8 pixels...
Y lo que vamos a hacer es que ahora cada uno lo vamos a mover a un sitio, ¿vale?
O sea, vamos a poner aquí, teníamos el que es de color esto, el nope, que es de una forma.
Y este, bueno, estos son los colores que nos está poniendo.
Perfecto.
El único problema es que esto debería ir, el left debería ir aquí...
Hostia, left 0...
Hostia, ¿por qué se le ha ido aquí el width, fit, content?
Vale.
El left, 16 pixels...
Vale.
Vamos a hacer que esto sea un poquito más.
24, 32...
Vale.
Algo así.
Entonces, esto por ahora.
Estos son los estilos que más o menos...
El right este estaría bien.
Background...
A ver, yo lo iba a hacer con el borde y tal, pero veo que...
A ver, lo voy a hacer como así.
Como lo tenía pensado.
Que es como he visto que lo están haciendo ellos.
Al menos en la aplicación.
Hostia, la he liado.
¿Qué he hecho aquí?
Ahora.
Vale.
Entonces, este color...
Que la verdad es que está bastante bonito, ¿eh?
Me ha sorprendido ahí Gijaco Pilot.
Y lo que podemos ponerle es a lo mejor un textado un poquito.
Para que se vea...
Se vea un poquito mejor.
Vale.
Tampoco es muy importante.
Me gustaría que tuviese vídeo como colores un poco más vivos.
A ver.
Algo así.
O sea, ajá.
Y este...
Es que están como muy apagados, ¿eh?
Hombre, es que esto tiene que ser festivo, joder.
Vale.
Algo así.
Vale.
Y entonces, al principio no se deberían ver.
Así que le ponemos opacidad cero.
Lo que estoy pensando es...
Que creo que están mal.
Claro, claro.
Están mal.
Están al revés.
Están al revés.
Esto debería ser...
Esto debería estar así.
Y este debería estar así.
¿No?
O sea...
Claro, claro.
Tiene sentido.
Y esto lo vamos a poner aquí.
Y ya está.
Claro, claro.
Tiene sentido.
Tiene sentido.
Vale.
¿Por qué?
Porque cuando se mueve a la derecha se tiene que ir viendo el like.
Entonces, claro.
También está al revés la rotación, ¿no?
La rotación está al revés también.
Claro.
Ahora sí.
Ahora sí que está bien.
Sí, sí, sí.
Tiene sentido.
Vale.
Entonces, empezamos con la opacidad a cero.
Opacity la dejamos a cero.
Y aquí el truco del almendruco.
Añadimos esta funcionalidad.
Justamente vamos al...
¿Dónde habíamos puesto el punto style?
El punto grabbing.
Aquí.
Pues aquí lo que tenemos que hacer es básicamente change opacity of the choice info, ¿vale?
Según vayamos arrastrando.
¿Qué hacemos con esto?
Pues nada.
Otra vez un poquito la idea de esto de los grados.
Pues lo hacemos con la opacidad.
Pero vamos a utilizar la distancia con el valor absoluto.
¿Por qué?
Porque obviamente la opacidad no puede ser negativa, ¿vale?
Entonces tiene que ser con el valor absoluto.
Como la opacidad queremos que llegue a 100, ¿vale?
Pues lo vamos dividiendo.
Y lo que hacemos aquí es, bueno, saber primero si va a la derecha.
¿O esto lo tenemos aquí?
No.
Esto lo tenemos en otro sitio.
Vale.
Esto es que va a la derecha.
Y aquí pues tenemos que elegir cuál es el elemento.
Si es la derecha, pues el elemento que queremos cambiar es el choice like.
Sí, el choice like.
Y el nope si vamos a la izquierda.
Y este elemento le cambiamos la opacidad dependiendo de cuánta distancia hemos recorrido.
Entonces, ahí lo tenemos.
¡Uepa!
¡Yepa!
Y ya estaría.
Y así nos queda esta maravillosa página de Tinder que hemos hecho.
¿Ves?
Nope, like, nope, like.
¿Qué os parece?
Joder, pues tampoco.
O sea, está bien.
Y todo con JavaScript, con CSS y sin ningún tipo de dependencias.
Cosas que podéis hacer en un momento.
Podéis separar el CSS y el JavaScript en sus ficheros aparte, ¿vale?
Yo lo he puesto en el mismo fichero para tenerlo ahí todo fácil.
Creo que es un proyecto que en pocas líneas de código se ven un montón de cosas y que al final es bastante interesante.
Os voy a publicar ya este primer add first project Tinder swipe.
¿Vale?
Os dejo este primer proyectito por aquí.
Y nada, amigos.
Esto es lo que vamos a hacer.
100 proyectos con JavaScript.
Si alguien se anima a hacer un Ritmi increíble, pues que sepáis que lo vamos a ir poniendo.
Y nada, me gustaría que llegamos a 100.
Me parecería increíble, pero yo creo que lo podemos conseguir.
Podemos hacer 100 proyectos de JavaScript paso a paso.
Así que este va a ser el primero de muchos.
Dale like a la chica.
No vamos a decir nada.
Venga, chai.
Like.
Like.
Y a Alex también.
Like.
Todo like.
La verdad, un momentito, ¿eh?
Bueno, mira.
Aquí hay algún...
Claro, es que...
Claro, es que he ido muy a saco, ¿eh?
Hay cositas.
Claro, esto ves.
Si no encuentra...
Es que esto aquí, por ejemplo, si no encuentra target...
A ver, ¿dónde he puesto?
Claro, si no hay card...
Si no hay actual card, por ejemplo, pues tendría que saltar.
¿Ves?
Ahora sí.
Para que no me dé esos problemas raros.
Claro, claro.
Es que hay cositas, hay cositas.
A ver, vamos a arreglar esto.
Fix back.
Y la verdad es que en un momento le hemos hecho hasta los estilos y queda bastante bonito, ¿eh?
Quedaba bastante, bastante bonito.
Que parecía aquí tal, pero mira, en un momentito ya lo tienes así.
No, vamos a ir improvisando.
No me sé las 100 ideas ni en broma, vamos.
No me sé las 100 ideas ni en broma.
Pero la idea sería ir haciendo proyectitos así, cositas sencillas que pueda iros explicando
y que la podamos hacer con vanilla JavaScript para que justamente, pues, podáis seguir aprendiendo vanilla JavaScript.
Ay, mira, aquí esto se me ha olvidado.
Se me ha olvidado esto.
Es que habría que quitar, habría que quitar también la opacidad.
¿Ves?
Aquí es que, bueno, son detalles, ¿eh?
Son detalles que al final, pues, hay que ir haciendo.
Claro, si aquí, cuando hemos tomado la...
Cuando no hemos tomado la decisión y vuelve, la opacidad tendría que ser cero.
O sea, cualquiera, en actualcar.querySelectorAll del choice.
Estos son detalles, pero bueno, es que al final, pues, para cada uno tendríamos que la opacidad ponerla a cero.
¿Por qué?
Porque no es necesario si no se va a ir guardando.
A ver.
Tú, tú, tú.
Vale, ahora sí.
Bueno, también habría que hacer que tuviese transición y tal.
Bueno, son detalles, son detalles.
Son cositas.
Aquí, Transition, Opacity, Is...
Que ya me extraña que no tenga.
Pero bueno, así.
¡Ay!
¡Ay!
Que no me hace la transición.
Bueno, no sé por qué, pero tendría que mirar.
Y hoy, ya no me da tiempo.
Pero bueno, está bien.
Haremos jueguecillos también, que le tengo muchas ganas.
Gracias.
Gracias.
Gracias.