Nueva API para crear popovers con HTML SIN usar Javascript - #programacionenespañol

Summary

En este video, se presenta cómo utilizar la nueva API de popovers o elementos emergentes disponibles en los principales navegadores. Se muestra cómo crear elementos emergentes semánticamente ligeros que no bloquean la interacción con la página web detrás de ellos. Se incluye un ejemplo práctico con código HTML, CSS y una breve mención de la compatibilidad en diferentes navegadores. Además, se explica cómo estilizar y controlar el comportamiento de estos elementos usando únicamente HTML y CSS, sin la necesidad de JavaScript. Finalmente, se menciona la posibilidad de controlar la API a través de JavaScript si es necesario.

Takeaways

• 😀 La nueva API de popovers permite crear elementos emergentes similares a los diálogos en los navegadores principales.
• 🔍 Existe una diferencia entre los diálogos y los popovers, siendo estos últimos menos invasivos y permitiendo la interacción con la página web detrás del elemento emergente.
• 🌐 La compatibilidad de la API de popovers está disponible en Chrome 114, Edge 125, Firefox 17 y Safari.
• 📁 Se crea un directorio llamado 'obi-one-popover' para el ejemplo práctico, incluyendo archivos HTML, CSS y JS.
• 🎯 Para crear un popover, se utiliza el atributo 'power-target' en el botón que disparará el elemento emergente.
• 📚 Se debe incluir un atributo 'popover' en el elemento que se mostrará como popover, con un ID que coincida con el del 'target'.
• 🖌️ Los estilos CSS se pueden aplicar directamente al atributo 'popover' para personalizar el ancho, borde, color de texto y otras propiedades.
• 🔑 Se pueden utilizar transiciones y animaciones en CSS para controlar cómo se muestra y se oculta el popover.
• 🛠️ La API de popovers ofrece métodos como 'hide-popover', 'show-popover' y 'toggle-popover' para controlar el elemento emergente a través de JavaScript.
• 🔄 El comportamiento predeterminado del popover puede ser modificado utilizando el atributo 'manual' para controlar su apertura y cierre de manera explícita.

Q & A

¿Qué es la nueva API de popovers y cómo se relaciona con los elementos emergentes?

La nueva API de popovers permite crear elementos emergentes muy similares a los diálogos (dialogs). Estos elementos emergentes se pueden mostrar sin la necesidad de recurrir a JavaScript, excepto para casos de manejo programático específico.

¿Qué diferencia hay entre un popover y un dialog según la API?

La diferencia principal entre un popover y un dialog es que el popover no tiene un valor semántico adicional en HTML y no bloquea la interacción con la página o el contenido detrás del elemento emergente, a diferencia de los dialogs.

¿En qué navegadores está disponible la nueva API de popovers?

La nueva API de popovers está disponible en Chrome desde la versión 114, en Edge 125, en Firefox 17 y en Safari 17.

¿Cómo se crea un elemento emergente utilizando la API de popovers?

Para crear un elemento emergente, se debe definir un 'target' que será el elemento que dispare el popover. Luego, se utiliza el atributo 'popover-target' en el elemento que se quiere que aparezca como popover, y se le asigna un ID que coincida con el del target.

¿Cómo se puede personalizar el estilo de un popover utilizando CSS?

Se puede personalizar el estilo de un popover utilizando CSS directamente haciendo referencia al atributo 'popover'. Se pueden cambiar propiedades como ancho, borde, color de texto, padding, entre otros.

¿Cómo se maneja el comportamiento de cierre automático de un popover?

El comportamiento de cierre automático de un popover se puede controlar a través del atributo 'popover-action' con el valor 'hide'. También se puede establecer manualmente el cierre del popover utilizando el valor 'manual'.

¿Cómo se puede hacer que un popover se muestre y se oculte de manera animada?

Para animar la aparición y desaparición de un popover, se pueden utilizar transiciones CSS y cambios en las propiedades de estilo, como 'transform', asociadas con el estado del popover abierto o cerrado.

¿Cómo se puede agregar un botón de cierre dentro del popover?

Para agregar un botón de cierre, se puede utilizar el atributo 'popover-action' con el valor 'hide' en un botón dentro del elemento emergente, lo que permitirá ocultar el popover cuando se haga clic en dicho botón.

¿Cómo se puede utilizar la API de popovers sin JavaScript?

La API de popovers se puede utilizar sin JavaScript a través de HTML y CSS. Se definen los elementos y se estilizan con CSS, y se maneja el comportamiento del popover utilizando atributos HTML específicos.

¿Dónde puedo encontrar el código y más información sobre la implementación del popover?

El código y más información sobre la implementación del popover se encuentran en un repositorio de GitHub, el enlace al cual se puede encontrar en el primer comentario del vídeo.

Outlines

00:00

🔍 Introducción a la nueva API de Popovers

El video comienza con una introducción sobre la nueva API de popovers, que ahora está disponible en los navegadores principales. Se menciona la similitud con la API de diálogos y se destacan las diferencias clave, como la falta de valor semántico adicional y la capacidad de interactuar con el contenido detrás del elemento emergente. También se aborda la compatibilidad de la API con varias versiones de navegadores.

05:01

🔧 Ejemplo práctico con HTML y CSS

Se presenta un ejemplo práctico donde se crea un directorio y archivos HTML, JS y CSS. Se explica cómo agregar un botón que actuará como disparador del popover mediante el atributo 'popover-target'. Además, se detalla cómo estructurar el HTML para incluir el popover y cómo agregar el atributo 'popover' al elemento objetivo. Finalmente, se muestra cómo probar la funcionalidad usando 'live server'.

10:04

🎨 Estilizando el Popover con CSS

Se profundiza en la estilización del popover usando CSS. Se describen pasos para centrar elementos, cambiar colores, agregar transiciones y ajustar propiedades de tamaño y borde. También se explica cómo hacer que el popover aparezca y desaparezca con animaciones utilizando atributos CSS como 'popover-open' y 'starting-style', aunque se menciona la limitación de compatibilidad en algunos navegadores.

15:05

💡 Opciones avanzadas y control manual

El video continúa con opciones avanzadas para controlar el popover, como la capacidad de evitar que se cierre automáticamente al hacer clic afuera o presionar 'escape'. Se explica cómo agregar un botón de cierre manual dentro del popover y cómo utilizar atributos como 'popover-action' para manejar el cierre. También se destaca la inteligencia de la API para cerrar automáticamente los elementos emergentes abiertos en modo automático.

🔄 Integración con JavaScript

Se finaliza el video explicando cómo controlar el popover mediante JavaScript utilizando métodos como 'hidePopover', 'showPopover' y 'togglePopover'. Se anima a los espectadores a consultar la documentación de la API en MDN para obtener más detalles. Además, se sugiere la posibilidad de usar la API para crear sistemas de notificación como 'toasters' sin depender de librerías adicionales.

📦 Conclusión y recursos adicionales

El video concluye recordando a los espectadores que el código presentado está disponible en un repositorio de GitHub, cuyo enlace se encuentra en el primer comentario del video. Se invita a los espectadores a dejar comentarios, likes, compartir el video y suscribirse al canal. Se despide con un saludo y buenos deseos para el código de los espectadores.

Keywords

💡API de popovers

La API de popovers es un conjunto de herramientas y protocolos que permiten a los desarrolladores crear elementos emergentes en las aplicaciones web. En el video, se presenta cómo esta nueva API permite crear elementos emergentes similares a los diálogos, pero con diferencias semánticas y de comportamiento. Se menciona que esta API ya está disponible en los navegadores principales, lo que indica su relevancia para el desarrollo web moderno.

💡Elementos emergentes

Los elementos emergentes son componentes de la interfaz de usuario que se superponen al contenido principal de una página web y suelen aparecer en respuesta a una acción del usuario. En el contexto del video, se utiliza la API de popovers para crear estos elementos, que son una forma de diálogo pero con una interacción más fluida con el contenido de la página web.

💡Dialog

Un 'dialog' es un tipo específico de elemento emergente que suele utilizarse para mostrar información o recibir entrada del usuario sin la necesidad de recargar la página. En el video, se compara el 'dialog' con los popovers, señalando que los popovers no tienen un valor semántico adicional en HTML y permiten una mayor interacción con la página web mientras están visibles.

💡Atributos HTML

Los atributos HTML son propiedades que se añaden a las etiquetas HTML para proporcionar información adicional o para controlar el comportamiento de los elementos. En el video, se usan atributos como 'power-target' y 'popover' para crear y controlar la apariencia y el comportamiento de los elementos emergentes.

💡CSS

CSS (Hoja de Estilo en Cascada) es un lenguaje utilizado para describir la presentación de un documento escrito en un lenguaje de marcado, como el HTML. En el video, se muestra cómo se pueden utilizar las referencias a atributos en CSS para estilizar los elementos emergentes, como cambiar su ancho, agregar bordes y definir animaciones.

💡Transiciones

Las transiciones en CSS son una forma de animar cambios en la propiedad de un elemento, lo que permite que los elementos cambien de un estilo a otro de manera suave y atractiva. En el video, se menciona el uso de transiciones para dar estilo y animar el estado del elemento emergente, como su aparición y desaparición.

💡Viewport

El 'viewport' es la parte visible de un document o página web que se muestra en la pantalla. En el script, se utiliza la altura del viewport ('viewport height') para posicionar y animar elementos emergentes, asegurando que estén visibles y estén bien posicionados en relación con el contenido de la página.

💡Manejo programático

El manejo programático se refiere a la capacidad de controlar y manipular elementos de una página web a través de código, como JavaScript. Aunque el video se centra en el uso de HTML y CSS para crear popovers, también se menciona la posibilidad de utilizar JavaScript para añadir comportamientos adicionales o 'listeners' a los elementos emergentes.

💡Compatibilidad

La compatibilidad hace referencia a la capacidad de un elemento, en este caso, la API de popovers, de funcionar correctamente en diferentes navegadores y sistemas operativos. El video destaca que la nueva API está disponible en navegadores principales desde ciertas versiones específicas, lo que es crucial para el soporte y la accesibilidad de las funcionalidades en diferentes entornos.

💡Estilo personalizado

El 'estilo personalizado' se refiere a la capacidad de diseñar y adaptar la apariencia de los elementos de una interfaz de usuario según las necesidades o preferencias del usuario o del desarrollador. El video ofrece ejemplos de cómo se pueden utilizar HTML y CSS para personalizar la apariencia y el comportamiento de los popovers, permitiendo una experiencia de usuario única y atractiva.

Highlights

Se presenta una nueva API de popovers o elementos emergentes disponible en los navegadores principales.

La API permite crear elementos emergentes sin necesidad de JavaScript, excepto para manejo programático.

Existen diferencias semánticas entre los elementos emergentes y los dialogos, con el primero no bloqueando la interacción con la página.

La compatibilidad de la API está presente en Chrome 114, Edge 125, Firefox 17 y Safari.

Se muestra un ejemplo práctico de cómo utilizar la API para crear un elemento emergente.

Se explica cómo establecer un elemento como 'target' para activar el elemento emergente.

Se describe cómo utilizar atributos como 'power-target' y 'popover' para configurar el elemento emergente.

Se puede continuar interactuando con los elementos detrás del elemento emergente, a diferencia de los dialogos.

Se muestra cómo agregar estilos CSS para personalizar la apariencia del elemento emergente.

Se discute cómo utilizar transiciones y animaciones para el elemento emergente.

Se menciona la posibilidad de controlar el comportamiento del elemento emergente con bindings de teclado.

Se detalla cómo evitar que el elemento emergente se cierre automáticamente con el atributo 'manual'.

Se ofrece la opción de controlar el elemento emergente a través de JavaScript utilizando métodos como 'hide', 'show' y 'toggle'.

Se sugiere la posibilidad de utilizar la API de popovers para crear sistemas de notificaciones sin necesidad de librerías adicionales.

El código y la información adicional están disponibles en un repositorio de GitHub.

Se invita a los espectadores a dejar comentarios, dar like, compartir el video y suscribirse al canal.

Transcripts

ustedes lo han pedido en los comentarios

Así que el día de hoy vamos a ver cómo

trabajar con la nueva Api de popovers o

elementos emergentes sí que está ya

disponible en los navegadores

principales Recuerda que si te gusta el

contenido puedes hacerte miembro del

Canal la información en el primer

comentario y pues si te ha gustado el

vídeo No olvides compartirlo suscribirte

al Canal y ahora sí sin más preámbulo

Vamos al lío Ahora sí antes de ir al

código de qué va esta nueva Api sí

básicamente nos permite crear elementos

emergentes muy parecidos a los dialog

bien recuerda que ya tenemos una appi

también para crear dialogs o ventanas

modales sin necesidad de recurrir a

javascript a excepción de por supuesto

eh temas de handling o de manejo

programático Sí donde pues podríamos

crear algunas funciones o listeners

según nos interese lo mismo ocurre con

esta nueva Api hay diferencias entre el

dialog y el popover que vamos a estar

viendo diferencias a nivel semántico de

hecho el Api de popover o el uso de este

tipo de elementos emergentes no tiene un

valor semántico adicional a nivel de

html

sí tampoco bloquea lo que es la

interacción con la página e o con el

contenido Mejor dicho que se encuentra

detrás del elemento emergente A

diferencia de Por ejemplo dialo si te

preguntas por la compatibilidad Pues

esta nueva app ya está disponible a

partir de la versión 114 en Chrome y

Edge 125 en firefox y 17 en Safari Así

que la puedes utilizar en los

principales navegadores vamos Ahora sí a

un ejemplo rápido con código bien aquí

comencé creando un directorio llamado

obi One popover y ya vamos a ver el Por

qué y utilizar la es s sencillo aquí

tenemos un archivo html uno js y uno css

bien y lo que vamos a hacer primero es

Pues nada vamos a hacer aquí nuestra

estructura html 5 bien vamos a poner que

el documento estará en

español y aquí lo que vamos a hacer es

agregar dos elementos en principio bien

Por ejemplo aquí como contenido

principal podríamos tener un

botón y Qué necesitamos para nosotros

crear en este caso un elemento emergente

primero que nada el target este botón va

a ser el que dispare el elemento

emergente para Que aparezca Así que

necesitamos darle un Target es decir un

elemento que será justamente el elemento

emergente que queremos Que aparezca bien

para ello podemos utilizar el

atributo power Target y aquí lo que

vamos a pasarle es un ID de otro

elemento Como por

ejemplo One popover

Sí y vamos a ponerlo como texto

Hello y ahora vamos a crear el elemento

emergente sí que es lo que se va a

renderizar por allí y para ello pues

podríamos crear por ejemplo un

DIF y aquí tenemos que agregar dos cosas

número uno pues por supuesto el ID con

el mismo nombre en este caso que pusimos

como Target y además el atributo popover

para que pues la Api sepa a quién está

llamando a Qué elemento estamos

invocando para Que aparezca como

elemento emergente Sí y aquí pues

podemos hacer lo que nosotros queramos

eh podríamos poner por ejemplo un

h1 podríamos poner aquí pues cualquier

otra cosa por ejemplo un párrafo sí lo

que tú quieras una imagen etcétera ya

vamos a modificarlo un poco pero primero

veamos cómo funciona esto para verlo

pues podríamos abrir esto con live

server eh

Perdón server

Sí aquí tendríamos el botón y cuando

pulsamos Fíjate que aparece el Dif con

Pues todo lo que tenemos aquí como

elemento emergente y Cómo sabemos que es

un elemento emergente Pues fíjate que si

yo clico afuera de ese elemento

bien se desaparece es como si estuviese

clicando pues eh detrás de lo que es el

contenido emergente y fíjate aquí algo

interesante y es que a diferencia de la

del dialog como te comentaba antes pues

podemos seguir interactuando con lo que

son los elementos de la web los

elementos que están detrás del elemento

emergente si te fijas aquí el hover

sigue funcionando sobre el botón Así que

aquí podríamos tener una primera

diferencia con respecto al dialog y

además de eso también tenemos eh

bindings de las Keys del teclado Como

por ejemplo si yo tengo aquí el elemento

emergente abierto y le doy escape se

cierra sí esto lo podemos controlar

podemos decirle que al elemento que pues

se cierre solamente manualmente para que

evites cerrarlo con escape o

directamente clicando fuera del elemento

bien ya vamos a ver cómo hacerlo pero de

momento Este es el funcionamiento básico

de lo que es esta nueva Api vamos a

modificar esto un poco a nivel de css

para que veas có estilar lo y además

vamos a ver pues algunas cosillas

interesantes que puedes llegar a hacer

bien para empezar le he agregado algunos

estilos al Body y al botón que tenemos

como disparador principal sí básicamente

he centrado todo en el body y le he

puesto un background color al Body para

eh tema oscuro Sí y además en el botón

Pues nada he agregado aquí pues una

transición en el Focus y en el hover sí

o por lo menos una duración de

transición vale de 0.5 segundos y pues

le cambio el color poco más bien si nos

fijamos en el resultado pues Será algo

tal que sí ya está Vale y si clicamos

pues sigue apareciendo esto así vamos a

estilar lo que es el elemento emergente

para esto Pues básicamente podemos aquí

en el css utilizar directamente pues una

referencia al atributo popover sí eh

Ups

vale Y aquí podemos comenzar por ejemplo

eh cambiando de lo que es el ancho al

elemento Vamos a ponerle aquí yo que sé

unos 200 píxeles vale Y si probamos esto

en principio fíjate que ahora el ancho

Pues cambia aquí pues puedes poner la

unidad de tamaño que tú quieras Por

ejemplo yo que sé vamos a ponerle por

aquí un

25 de lo que es el dynamic view wid Sí y

te quedaría alg tal que así que

podríamos ponerle yo que sé un 50 vale

va a depender de lo que te interese

además de esto podríamos ponerle aquí un

Border

Non o incluso un

Border blanco

sí voy a ponerle por aquí el mismo color

azul que tenemos para el

botón y además de eso vamos a ponerle

aquí un color de texto blanco también y

quedaría algo tal que así

aquí si no se me saltan las

propiedades poner ahora sí ya está bien

podríamos el borde un poco más grande

bien e incluso tener un Border radius s

de yo que sé c píxeles vale o incluso un

poco

más y queda algo tal que así vale además

de de esto Pues también puedes estirarlo

podemos ponerle un padding global de

unos 10 píxeles

s y queda algo tal que

así aquí pues puedes manejar Luego el

font size y todo lo que tú quieras Ahora

aquí podemos jugar también con lo que

son las transiciones si vamos a ver cómo

aquí para estilar y también animar o

controlar algunas algunos estados del

elemento emergente bien podemos hacer lo

siguiente podríamos aquí

en el estilo del popover bien agregar

una transición por ejemplo que vaya Pues

en este caso desde el centro donde

aparece hacia arriba cuando ya Cerramos

el elemento emergente y ahora para

controlar el estado es decir cómo se

muestra en este caso cuando está abierto

bien porque si probamos esto de momento

Fíjate que no funciona es decir No es

que no funcione es que no se ve vale le

estoy dando aquí click y pues aquí como

hemos hecho un Translate de 0 a -100 del

High del viewport Vale pues obviamente

está por encima del viewport así que no

se ve cuando esté abierto lo que nos

interesa es que se Centre Entonces cómo

hacemos esto Pues básicamente utilizando

aquí

popover Open Sí y aquí le podemos poner

un Translate eh

Perdón para que se traslade a las

coordenadas por ejemplo cer y no quiero

que quede todo en el centro sino más o

menos unos -20 dvh sí esto por cierto es

dynamic View height VIP height vale o el

alto del viewport de forma dinámica el

Dinámico es por si por ejemplo esto

funciona esta unidad funciona por

ejemplo cuando tenemos en el móvil un

teclado abierto vale toma el High del

viewport eh tomando en cuenta el teclado

bien no el High del viewport sin el

teclado entonces Bueno nos eh capacita

Para tener un mayor control sobre los

elementos que surgen en el propio

viewport Más allá de pues lo que es

nuestra web Vale entonces toma el alto

que realmente nos interesa porque es el

al visible bien

Ah vale aquí tenemos esto y fíjate que

ahora el elemento se ve de esta forma y

tenene una animación por ahí al salir

Además de eso también podríamos hacer

algo tal que

hover backdrop bien por si quieres

agregarle pues justamente eso un

backdrop ya vamos a ver qué es y podemos

poner aquí un background color No lo sé

rgba para agregarle por aquí

transparencia Vamos a ponerle que sea

blanco

completamente UPS

Vamos a ponerle aquí una transparencia

de 0.2 por

ejemplo y esto Pues fíjate que ahora

aparece un backdrop atrás de lo que es

el elemento emergente bien entonces

Fíjate que puedes estilar dependiendo de

lo que busques además de esto también

podrías hacer el

efecto contrario cuando el popover se

abre esto podrías utilizar para ello

algo tal que el starting

St Sí y nos traemos por aquí esto es

decir el estado del popover abierto pero

queremos que este estado inicie con un

valor vale en este caso pues podríamos

poner -1 Y ahora fíjate que tendríamos

la animación cuando se abre por qué

porque el estado inicial del estilo del

popover abierto Estaría pues justamente

a -100 del High del viewport y cuando se

abre pues Vuelve aquí al centro sí o

bueno a men 20 en este caso y luego

cuando se cierra regresa a men1 Sí ahora

ojo con el uso del starting Style porque

de hecho la compatibilidad de esto Sí

todavía no está e full es decir hay

navegadores que todavía no lo soportan

por ejemplo firefox directamente tanto

para Android como firefox para

escritorio Sí el resto de los

navegadores sí que lo puedes implementar

y tendríamos este efecto de elemento

emergente Ahora hay otras cosas que

podemos configurar aquí para controlarlo

un poco más vamos a verlas otra cosa que

podemos controlar a través de la app y

del popover es si realmente queremos que

el elemento emergente se cierre de forma

automática al darle por aquí pues por

ejemplo click o pues al darle por aquí

escape sí Y cómo controlamos esto Pues

básicamente Nos vamos aquí al html Sí

vamos al elemento del popover Y en vez

de ponerle el atributo como tal lo que

hacemos Es ponerle aquí el valor manual

sí y qué va a pasar aquí Pues

básicamente si abrimos de nuevo el

popover y damos clic afuera e no se

cierra Y si damos escape tampoco bien A

menos que demos aquí el botón que hace

un toggle digamos de lo que es la

visibilidad del popover pero aparte de

esto podríamos Añadir por aquí un botón

Sí por ejemplo Vamos a ponerle por

aquí Vamos a ponerle por aquí dentro del

elemento emergente Pues un botón Sí para

cerrar y Aquí vamos a utilizar dos

atributos el primero el mismo Target que

tenemos en el botón en el botón Perdón

para abrirlo sí Y además también puede

recibir un popover action Sí con el

valor height para ocultarlo y de esta

forma Tenemos aquí esto y si le damos

aquí a Close se va bien y así

controlamos el popover de forma manual

ojo cuando lo tienes en forma automática

eh Ya es lo suficientemente inteligente

como para saber que tiene que cerrar

todos los elementos emergentes abiertos

cuando pues hae click afuera o cuando le

das a escape vale Y aquí esto lo podemos

hacer un poco más divertido quizá

agregando pues esto por

aquí y si abramos el popover Tenemos

aquí al Señor Ob

One y aquí puedes jugar un poco con lo

que necesites para tus elementos

emergentes y si te fijas no hemos

utilizado absolutamente nada de

javascript bien todo es a través de la

Api del popover utilizando html y css

para estirarlo y controlar también su

comportamiento lo cual hace que esto lo

puedas llevar a cualquier proyecto con

cualquier framework o librería que

tengas Sí para hacerlo de una forma

nativa bien Ahora qué opciones tienes si

quieres controlarlo vía javascript sí a

través del elemento y pues los métodos

que te provee la propia Api de estos

elementos emergentes pues lo puedes

hacer sin ningún problema si vos aquí a

la documentación de la Api en mdn fíjate

que tienes métodos como hide popover

show popover o toggle popover bien y

esto lo puedes utilizar desde javascript

pues obviamente con la referencia al

elemento html que es o que Define tu

elemento emergente Sí así que lo puedes

utilizar de ambas maneras y si no te

hace falta Pues recuerda entonces aquí

que por defecto el popover tiene un

valor sí Si o si obviamos aquí lo que es

el valor de la del atributo tiene un

valor ao si no le puedes agregar el

manual

sí Y a partir de aquí pues ya

controlarás lo que es el comportamiento

de tu elemento emergente aquí solo

bastaría pues agregar algunos estilos SS

adicionales Como por ejemplo alguna

clase para el botón de cierre Y pues

obviamente aquí un display

Flex con pues alguna cosilla de

espaciado para lo que es el contenido de

nuestro elemento emergente y quedaría

algo tal que así y ahora tenemos a

nuestro obi One popover ya listo por

aquí para que lo puedas utilizar en tus

proyectos y puedes aquí hacer un sistema

Por ejemplo de toaster es decir

notificaciones sí de éxito de error para

las operaciones de tus proyectos sin

necesidad de utilizar una librería

adicional de javascript sí centralizando

Y pues customizando por ejemplo el

mensaje que tenemos aquí y hablando del

mensaje que tenemos aquí Ah me acabo de

dar cuenta que el documento html lo

habíamos puesto en español y pues creé

todos los textos en inglés Así que vamos

a dejarlo por aquí en inglés y el código

Sí de lo que acabamos de ver el día de

hoy lo tienes en un repositorio de

github en el primer comentario del vídeo

al igual que más información Así que si

te ha gustado No olvides dejar tu

comentario tu like compartir el vídeo

suscribirte al Canal y será hasta el

próximo como siempre un gran saludo y

que tengas buen código