Vamos a escribir el código para la notificación se iba a crear una nueva función aquí abajo.
Notificación en pantalla y voy a poner la función
mostrar notificación.
De esta forma.
De momento y aquí voy a escribir un poco de scripting porque voy a generar el elemento dinámicamente
moscones notificación va a ser igual a document punto criadita Element y vamos a generar una Heydi un
perdón al vuelo por así decirlo y después una notificación punto text contén y va a decir igual.
Vamos a poner un mensaje que diga hubo un error de momento lo voy a dejar hacer y los tenemos haciendo
más inteligente por así decirlo y después vamos a seleccionar lo que viene siendo el formulario.
En realidad no importa tanto el elemento porque es una notificación que puedes ver que está volando
aquí arriba son las notificaciones de arriba hay muchos plugins para este tipo de notificaciones pero
es algo muy sencillo de agregar no le veo mucho sentido cargar una gran cantidad de librerías para algo
tan simple ponemos formulario y lo primero que va a hacer es copiar este es el formulario si recuerdas
este contiene lo que viene siendo el Fórum y tiene Leidi no va a copiar formulario de contactos y va
a poner punto insert CIFOR y éste toma dos parámetros toma primero el del formulario que está seleccionando
toma lo que vas a insertar y segundo dónde se va a insertar.
En este caso va a ser leyendo de nueva cuenta como va a estar flotando en realidad no importa mucho
dónde lo coloques va a poner aquí insert pifiar vamos a insertar la notificación antes de docking en
el punto de selector para que se vea mejor voy a colapsar esto y aquí ponemos form y luego leyendo entonces
esta notificación se va a mostrar en lugar de esto.
Por lo tanto lo vamos a poner aquí mostrar notificación y como es una función lo coloco de esta forma.
Guardamos cambios cuando esté todo vacío se muestra la notificación se recargamos todo vació añadir
y vemos que hubo un error puedes ver que se inserta antes del leyen para eso fue el valor de referencia
que le hemos dado insert before.
Le decimos qué y dónde.
Antes del leyen del formulario específico que es como funciona esta parte puedes ver que tenemos un
dividí si hubo un error en la notificación se queda ahí se queda todo el día.
Nada va a hacer que desaparezca pero podemos hacerla desaparecer con con JavaScript.
Después vamos aquí a manejar ocultar y mostrar la notificación se aquí septima out se taimados es una
función que va esperar cierto tiempo ejecutar un código pero nada más 100 que cienes una décima parte
de un segundo y que tenemos notificación punto clave lista esto va a agregarle una clase similar a la
clase de Kairi pero esta es la forma hacerlo compró JavaScript sin frameworks Add y ponemos visible
entonces se le va agregar una clase que va a decir visible y después podemos poner Z y Matt Meowth
y después de tres segundos lo vamos a quitar.
Entonces pongo aquí Time Out notificación punto Classe.
Punto remó y ponemos visible entonces si hay un error en el código se muestra la notificación.
La creamos creamos usamos JavaScript para crear un elemento nuevo en el html le damos un error lo insertamos
justo antes del leyen esperamos una décima parte de segundo para agregarle esta clase que es nada prácticamente
imperceptible.
Y después de tres segundos se le remueve esa clase.
Recargamos limpia caché como si fuera control férreo control F5 para que aparezca correctamente cargue
la última copia del CSS y aquí vamos a dar.
Añadir que viene un error después de que aquí dice clase hubo un error pues el que si lo doy nuevamente
aparece visible visible 3 segundos y quita esa clase.
Podemos utilizar ese esas clases para mostrar o ocultar lo que viene siendo este elemento el que aquí
dice hubo un error dos veces tenemos que quitarla de alguna forma y la mejor forma es hacerlo con CSS
no tanto como la mejor pero podemos agregarle una pequeña transición algo que no puedes hacer de otra
forma entonces vamos a ponerle aquí está el Pontus CSS hasta abajo.
Crear un comentario que llegan notificaciones
y vamos a poder aquí nada más visible punto visible iba a tener uno pase de uno pero algo muy importante
es que de momento nada más tenemos este vacío no tiene nada voy a ir a la J.V donde creo mi elemento
lo voy a generar.
Voy a dar una nueva clase y nada más le pones notificación punto Class lista junto a AP y les das un
nombre y eso ya lo va a generar un nuevo elemento con la clase y después con el contenido que se genera
se le agrega una clase y luego el contenido es bastante fácil.
Una vez que te acostumbras a destapar esta clase de scripting JS JavaScript es mucho mejor hacerlo de
esta forma.
Aquí está el punto CSS y voy a escribir también el que viene siendo la notificación.
Puedes ver que esa notificación está como flotante si doy click aquí vemos que queda aquí a este lado.
Eso se logra con un pocillo fixed fijo arriba y luego le das coordenadas top es decir hasta arriba a
qué distancia a un Reem que no quede tan pegado a la orilla y right.
También un Reem le damos un poco de Padín un Reem y tres es decir uno arriba y tres a los lados para
que quede más ancho la notificación y luego uno Pacini de cero.
Entonces se crea la notificación va a tener una pausa de cero cuando tenga la clase de visible que es
inmediatamente que se crea una décima parte de segundo agrega visible es decir pasa de visible cero
a 1 se muestra tres segundos después se oculta.
Entonces guardamos cambios abrimos el proyecto nuevamente como si fuera Quattrocchi Ferre para limpiar
caché damos clic en Añadir vemos que aparece aquí hubo un error tienen notificación visible y luego
se quita de esta parte la clase de notificación se mantiene y puedes ver que incluso se asco ver aquí
la notificación está arriba solamente que tiene una pausa de cero.
Si lo volvemos a agregar vemos que aparece visible que visible tiene uno.
Por eso se muestra y se oculta y se ve bastante bien.
Pero puedes ver que tengo ahora dos notificaciones en mi Dom eso no es bueno no es como que vaya afectar
mucho ese HTML que está ahí no es como que va a ser muy lenta mi aplicación tan poquito código HTML
pero si comienzas o comienzas a generar mucho contenido y no desaparece totalmente el Dom es muy probable
que si suman poco más de memoria a las horas de estar utilizando esta aplicación con muchas notificaciones
de esta forma puede ser que se comience a alentar la aplicación para eso podemos utilizar notificación
punto remoto y hacemos que JavaScript elimine totalmente ese elemento una vez que ya no lo ocupamos.
Recargamos nuevamente y voy a colocarme aquí sobre el leyéndose que es donde se inserta.
Añadir vemos que aparece notificación y visible y una vez que desaparece se va totalmente del DOM y
ahí es donde entra algo que se conoce como Garbage Collection es decir que JavaScript se encargue de
eliminar algo y no consuma más memoria en la computadora.
Ahora cuando tengo esto de mostrar notificación de momento nada más tengo mostrará notificación y tiene
esta parte.
Si vemos el proyecto final aquí se agregó por ejemplo 1 2 y 3 lo voy a añadir tengo contacto creado
exitosamente.
Es decir utilizo la misma notificación para mostrar algo correcto o incorrecto entonces tenemos que
hacer un poco más inteligente nuestra función primero aquí donde tenemos este error voy a pasarle un
parámetro mejor dicho dos y vamos a poner un comentario que diga dos parámetros texto y clase.
Entonces vamos a ponerle aquí dos parámetros un texto que diga por ejemplo se hace clic en Añadir todos
los campos son obligatorios para todos los campos son obligatorios y eso se pasa si aquí se estaba tomar
un parámetro de un mensaje y ese mensaje pasa a ser parte del texto contener todos podemos eliminar
este aquí y ponemos mensaje y una clase entonces Koma y agregamos error entonces podemos utilizarla
en muchos lugares porque por ejemplo cuando sea exitoso Podemos con éxito eliminar esto y quería aquí
contacto creado correctamente o contacto editado correctamente etc..
Esto nos va a dar mucha flexibilidad a hacerlo de esta forma le puede pasar error aquí pongo Comas error
aquí donde tengo las clases voy a agregar ese error mejor dicho esa clase que no sabemos si va a ser
éxito o error en este caso es error pero puede ser cualquier cosa y por eso nos permite hacerlo más
dinámico X clase.
Va a tomar una clase como parámetro que puede ser error o puede ser correcto y se va a agregar aquí
haciendo nuestra nuestra notificacion un poco más versátil en ese aspecto y que iba a poner una coma.
También porque voy a agregar la clase de sombra que agrega una pequeña sombra y un borde Radius se va
abriendo bastante bien al está el portugués entonces tenemos que agregar a esas clases no es como que
vayan a aparecer automáticamente colores de la notificación tenemos un correcto este 1 lo hemos utilizado
y ponemos un error entonces si quieres agregar más clases las tendrás que agregar aquí y pasarlas como
parámetro en las notificaciones digamos un color amarillo para algún posible error o algo similar entonces
van a ser más fijos estos porque no pienso cambiarlos color verde y azul correcto volverme a poner RGB
179 coma 241 Koma y 117 son colores que obtuve por parte de Crom developer tools.
De esta forma podríamos usar el hexadecimal o HCl no hay ningún problema y el color del texto va a ser
Grin en el error vamos a poner una copia de este y aquí va a cambiar los valores 2 3 8 1 4 8 1 6 6 eso
nos va a dar un color más rosa que es el color de fondo y el color del texto se va a poner como RGB
y aquí va a poner 163 Zero y 33 un color más oscuro entonces vamos a recargar esto ya debe de funcionar
correctamente.
Recargamos di clic en Añadir y vemos todos los campos son obligatorios tres segundos y el elemento desaparece
totalmente del DOM.
Ahora aquí puedes ver que debía añadir y aparece y desaparece muy repentinamente.
Podríamos utilizar una transición o pacis y te permite utilizar transiciones.
Si lo hubiéramos utilizado como Display con display no te lo va a permitir o pasitas.
Si te permite crear transiciones transición capacity .5 segundos.
Y puedes utilizar cualquier valor aquí recargamos añadir todos los campos son obligatorios y puedes
ver que aquí está la parte de la animación entra bien pero cuando se va se quita muy repentinamente
y esto es por lo que viene siendo este remó podríamos esperarlo también otro septima out
si recuerdas estos son los arroyos rescribir Fonso no escribes nada más el paréntesis si está como Flecha
y ahí sí podríamos lo dejamos después bueno como nuestra animación toma medio segundo pues también le
ponemos 500px a medio segundo recargamos añadir aparece el error pasan los 3 segundos se quita y después
desaparece totalmente del DOM si lo revisamos aquí puedes ver que no hay nada en el Dom se ha ido totalmente.
Puedes utilizar JavaScript para la parte interactiva de tu aplicación no es lo recomendado De hecho
no es que tenga algo de malo entonces ya tenemos esta parte lista ya valida correctamente si vemos nuestro
código estamos validando ya esta parte pero qué pasa cuando el usuario llena los campos correctamente.
Aquí es donde vamos a comenzar a hacer nuestros peticiones nuestros llamados Ayax y toda esa parte.
Así que comenzaremos con eso en el próximo video.