En este video vamos a ver cómo agregar una barra de progreso.
Por ejemplo si tenemos dos proyectos perdón dos tareas y por ejemplo aquí tengo una completada y otra
no una barra de progreso que nos muestre que llevamos el 50 por ciento de avance.
Veamos cómo hacerlo.
La mayoría de algo así se hace con JavaScript.
Así que vamos a abrir nuestro código y quién y vamos a abrir el script apuntó.
Primero lo que voy a hacer es acomodar aquí es que voy a crear el DOM contan Loret es decir cuando es
como el Document Ready de Kairi.
Recuerda que este proyecto no utiliza nada de cuero y solamente utiliza código de JavaScript aquí document
Ready y que va a poner document punto advenediza Mer elemento similar al de document Rayes Dom así en
mayúsculas contén mayúsculas se logra mayúscula L y esto va a ejecutar una función.
Esta función la voy a nombrar aquí vamos a ponerle a actualizar PROGRESO. de esta forma voy a copiar
el nombre de esta de esta función actualizar PROGRESO. y lo voy a colocar hasta abajo hasta abajo está
bien toda la función hasta abajo todo el código poner aquí un comentario que diga qué es lo que hace
esta función actualiza el avance del proyecto y ponemos un Folsom y ponemos el llamado a la función
un consolador nada más que diga desde actualizar PROGRESO. solamente para probar que se esté comunicando
correctamente.
Quiero dar inspeccionar abrimos la consola recargamos y vemos que desde actualizar PROGRESO. entonces
la idea de esto es que una vez que cargue por ejemplo la página que recargue aquí por ejemplo se ejecute
esta función para que nos muestre el progreso.
Pero también a la hora de eliminar un registro una tarea completarla o completarla así que veremos cómo
hacerlo.
Primero vamos a abrir también en el Index apuntó PHP.
Este es el archivo que cuenta con todo y antes del cierre del menú aquí voy a colocar un nuevo Dip con
una clase de avance para darle un poco de estilos y una HD2 que va a decir avance del proyecto y lospuntos
lo demás aquí antes y ponemos un dip con una Heydi que se va a llamar barra avance y una clase que se
va a llamar barra avance.
También y un dip con un Heydi porcentage y un Claas de porcentaje.
Más que nada lo hago porque lo que son los Eiriz los voy a utilizar para JavaScript y las clases lo
voy a utilizar para el CSS si guardamos cambios y abrimos este proyecto recargamos para hacer que se
avance del proyecto.
Vamos a darle un poco de estilos a este avance que vamos a abrir CSS a salir de Staël y de nueva cuenta
usar las tabajo que vamos a poner un comentario que va a decir la barra de avance del proyecto esta
forma y vamos a poner aquí punto barra avance.
Esto va a ser como el contenedor primero a poner un Jaitt de 30 pixeles a la altura de la barra un borde
de un píxel Solid y el color es 9 9 9.
La idea de este color o este color más bien es el mismo color que tenemos en esta parte de aquí de guardar
cambios en ambos y recargar es el que queda de esta forma en ese mismo color del borde el fondo no porque
el fondo el fondo de te mostrará cómo va a quedar aquí por poner también un UIT-T del 90 por ciento
margen cero auto para que quede centrado y un máximo de 800 píxeles eso va a hacer que se vea como el
de arriba o al menos alineado al de arriba.
Después por ejemplo vamos a simular este porcentaje y voy a mostrarte como más o menos va a quedar.
Puedes ver que le di una clase que se llama procentaje por lo tanto aquí voy a poner punto porcentage
y digamos que le ponemos un de 50 por ciento una altura del 100 por ciento para que tome todo el tamaño
y un background color que va a ser raro como Grin de momento si guardamos cambios si recargamos puedes
ver que la barra va a aparecer de esta forma.
Ahora estoy aquí le puse width 50 por ciento.
La idea es que JavaScript controle el ancho de esta barra pero más o menos puedes ver que se va a ver
de esta forma.
En cuanto al color no va a ser ese color verde sino que va a ser aquí vamos a ponerle 0 0 7 6 2 que
es el mismo color que utilizamos cuando marcamos completaba una tarea.
Ahora si por ejemplo vemos vostra work tienen estas barras de progreso que son similares a esta en algunos
aspectos algo que podemos hacer aquí es por ejemplo copiar este color de fondo este color es muy muy
claro pegarlo aquí como background color
recargamos y quedaría de esta forma más o menos para que se vea el progreso aquí es un poco más claro
en vostra creo si es un color más claro y sobretodo no obtiene el borde por eso se ve diferente.
Por ejemplo si damos un poco de scroll puedes ver que aquí vienen estas barras con estas líneas puedes
darle a inspeccionar en alguna de estas barras por ejemplo esta aquí puedes ver que ellos la aplica
en este CSS entonces no lo podemos robar en nuestro proyecto y copiarlo y pegarlo aquí.
Este Granny match con un linear Gradiant y background CEIS también recargamos y puedes ver que tenemos
esta barra de esta forma que creo que se ve un poco mejor.
Voy a quitar creo que sería buena idea quitar el borde o el back en alguno de los dos tendremos que
quitar creo que este se lo quitó y se ve mucho mejor que la otra forma.
Entonces creo que se ve bastante bien.
Ahora vamos a agregar la interacción porque por ejemplo si yo le doy completar este tiene que marcarse
como 100 o si es completo 50 o 0.
De momento está este Weed 0 huid 50 tenemos que dejarlo como cero y eso lo va a dejar vacío y el ancho
de de la barra va a agregarse por medio de JavaScript servir el script y dentro de la función que creamos
anteriormente.
Primero tenemos que tomar todas las tareas que haya disponibles en esta página actual y si lo de aquí
por ejemplo inspeccionar inspecciona cada tarea puede ser que si recuerdas tenemos este que dice tarea
entonces podemos seleccionar las tareas que pueden tener todas las tareas y ponemos cons tareas igual
a document punto que vamos a utilizar cuál es el lector o el porqué queremos todas y vamos a obtener
todos los LP que tengan la clase de tarea que le puedes dar un Consol log a tareas resguardamos cambios
de nueva cuenta recargamos si abrimos la consola puede ser que tengo dos para acceder a la cantidad
porque esto me va a traer los elementos podemos utilizar puntos Leng eso nos va a traer cuantos elementos
tenemos en las tareas que tenemos dos ahora hay que seleccionar las que estén completadas.
Por ejemplo si completo está y inspeccion el código nuevamente la tarea completada la tenemos en las
acciones puede ser que aquí tenemos esté completo y esta dentro esté y vamos a poner aquí obtener las
tareas completadas.
Const tareas completadas va a ser igualas document .4 selector o nuevamente vamos a seleccionar todos
los iconos con la clase completo y de nueva cuenta puedo enviar esto a la consola con el punto log.
Tareas completadas punto length para que me diga cuántas tareas llevo completadas.
Este es el código.
Abrimos la consola y recargamos y puedes ver que tengo dos de arriba.
Cuántas tareas tengo.
Y cuántas tengo completadas.
Nada más es una.
Entonces es correcto.
El siguiente paso es determinar el avance y para ello si tenemos dos tareas y he completado una.
Eso quiere decir que tengo un avance del 50 por ciento.
Aquí voy a colocar determinar el avance
y vamos a poner aquí.
Y esto se va a ver muy como Matemáticas de la escuela de primaria más bien vamos a suponer que icons
avance y avance lo vamos a determinar por las tareas completadas.
Es decir este código de aquí las tareas que tengamos completadas entre la cantidad de tareas que sería
este otro aquí si enviamos eso a la consola con los avance y guardamos cambios y recargamos eso nos
va a decir 0.5.
Lo único que nos falta es multiplicarlo por 100 como si fuera una regla de tres entonces ponemos paréntesis
porque queremos que esta operación se realice primero igual que las matemáticas de la escuela en Javascript
por 100 porque me interesa que traiga 50 por ciento por ejemplo 1 punto o 0.5 entonces de esta forma
me va a traer un número o 50 por ciento del avance porque tenemos una de dos ser que se ve correctamente.
Voy a agregar otra media agregar una tarea nueva elegir imágenes y doy clic en Agregar los personas
que cuando recargó aquí dice puntos vienen muchos 33 no nos interesa que sean tantos números.
Queremos que sea un poco más corto porque el avance va a determinar el ancho de este entonces aquí vamos
a utilizar Maat para operaciones de matemáticas de que más puntos Rawat y rodeamos todo y eso va a redondear
y eliminar un poco lo que vienen siendo estos números.
Por ejemplo puedes ver que con 33 entonces eso le asignaría este DIV que está aquí al resultado la barra
un avance de 33 por ciento que se lo asignamos al width y nos daría 33 por ciento de avance.
Si por ejemplo completo esta otra recarga aquí sería 67 y ya me daría dos terceras partes de avance
ahora cómo le asignamos este avance a la barra esta barra que tenemos aquí de porcentaje vamos a asignar
el avance a la barra y vamos a poner Conce porcentaje voy a seleccionar primero el elemento con un documento
y selector solamente me interesa un porcentaje ahí porcentaje y utilizamos porcentaje punto esta el
punto UIT-T para que nos dé o poder cambiar el ancho que va a poner avance pero muy importante lo requerimos
como porcentaje.
Por lo tanto utilizo el chino además para concatenar un porcentaje de equipo con eso es suficiente.
Guardamos cambios recargamos y puedes ver qué se pinta y si lo de inspeccionar puedes ver qué dice cubitera
33 por ciento si marco una de estas recargo puedes ver que tengas 66 y si marco una más puedes ver que
tengo todo el porcentaje completo del avance de este proyecto.
Ahora sí lo marco incompleto y recargo pues ver que vuelve hacia atrás.
El detalle es que estoy teniendo que recargar para poder ver el avance y me gustaría que por ejemplo
cuando lo marque se actualice la barra va a ser muy sencillo gracias a todo lo que ya tenemos hecho
y voy a copiar el nombre de esta función voy a copiar toda esta parte también el llamado a la función
y la función sobreproteger acopiado es una que está aquí arriba que se llama cambiar el estado de la
tarea entonces es que aquí tenemos el Heydi y la acción del Estado en esta parte donde hacemos la ejecución
Ayax aquí donde tenemos este Consol log.
Voy a poner el llamado a la función para que actualice el progreso una vez que yo marco o marco lo que
vienen siendo mis tareas.
Entonces si recargo doy click aquí puedes ver que se actualiza lo que viene siendo el avance.
Ahora supongamos que tengo estas dos marcadas pero esta otra decido ya que no la ocupo a la hora de
eliminarla puedes ver que ya debería de marcarse al 100.
Entonces tenemos que mandar llamar también nuestra función donde eliminamos las tareas que se esta parte
damos un poco de scroll y aquí es donde dice comprobar que haya tareas restantes aquí vamos a poner
actualizar el progreso
la respuesta de Ayax.
De hecho este mismo código tendría que ir acá para al menos comentar o qué es lo que hace esta función
guardamos cambios en recargamos y por ejemplo tendría que crear una nueva aquí además Hola.
Agregar puedes ver que tenemos esto y si por ejemplo yo elimino esta tarea de borrar puedes ver que
ya se marca.
Ahora pudiste ver que por ejemplo aquí le di a agregar la tarea Hola y en este caso cuando creó una
nueva tarea también debería de actualizarse.
Tenemos que de nueva cuenta utilizar este mismo código y llamar esta función cuando creamos una nueva
tarea.
Vamos a darle hasta arriba.
Aquí tenemos nueva tarea y el método se llama agregar tareas.
Entonces vamos hacia este método y es donde tenemos el llamado a quienes le status quieren estar correcto
todo este código que tenemos bastante código.
Después de limpiar el formulario vamos a ejecutar actualizar el progreso tiene que ser en todos los
distintos métodos tanto completar o completar tareas.
Tenemos que mandar a llamar a actualizar el progreso eliminarlas o crear nuevas y con eso por ejemplo
voy a darle que eliminar y voy a recargar puedes ver que tengo dos tareas completado el 100 por ciento.
Pero digamos que agregó una nueva.
Crear el seleccionar imágenes y lo voy a agregar.
Puedes ver que se actualiza lo que viene siendo el avance y aquí vamos a poner otro que va a decir enviar
propuestas agregar y puedes ver que ya vamos por la mitad.
Pero si marco esta se actualiza y si decido eliminar esta porque la requiero se actualiza también.
Entonces será importante tener o mandar llamar esta nueva función en las distintas acciones que hacemos
en nuestro sistema.
Entonces ya para finalizar puedes ver que por ejemplo si desmarca estas tareas se ve medio raro ese
salto no queda así como medio extraño podemos abrir hasta el punto CSS y aquí en el porcentaje ponerle
una transición Transition al UIT-T al ancho que sea 2.5 segundos y ponerla aquí.
Cualquiera de estas animaciones mi caso is in out y recargamos damos clic aquí pues el que aparece es
la animación y click acá y se verá autocompletado y vemos esta animación que hace que no se vea como
tan aburrido.
De esta forma puedes agregar un avance a tu proyecto y saber cuánto llevas avanzado si tienes muchas
tareas obviamente pues vas a dar una idea de qué tanto se ha avanzado en tu proyecto ahora si por ejemplo
marcas todas completas el proyecto y te gustaría mostrar como una alerta es muy sencillo voy a copiar
algunos de estos xual que tenemos anteriormente un poco de scroll hasta nuestra función que vamos a
poder enviar o mostrar una alerta al completar el 100 por ciento el que va a hacer y el avance es igual
al 100 por ciento.
En este caso es igual a 100.
Entonces ponemos Sexwale que va a decir proyecto terminado
y en el texto vamos a poner ya no tienes tareas pendientes pues guardamos cambios recargamos tendrá
que desmarcar algunas de estas y puede ser que cuando por ejemplo le dé clic aquí y después está otra
desde el que se proyecto terminado ya no tienes tareas pendientes y podemos poner ok entonces este fue
uno de mis proyectos favoritos.
La verdad de los que más disfruté hacer y enseñar cómo se hace espero haya sido de tu agrado.