1
00:00:00,370 --> 00:00:03,440
En este video vamos a ver cómo agregar una barra de progreso.

2
00:00:03,630 --> 00:00:09,660
Por ejemplo si tenemos dos proyectos perdón dos tareas y por ejemplo aquí tengo una completada y otra

3
00:00:09,660 --> 00:00:14,340
no una barra de progreso que nos muestre que llevamos el 50 por ciento de avance.

4
00:00:14,430 --> 00:00:15,840
Veamos cómo hacerlo.

5
00:00:15,900 --> 00:00:18,240
La mayoría de algo así se hace con JavaScript.

6
00:00:18,240 --> 00:00:23,190
Así que vamos a abrir nuestro código y quién y vamos a abrir el script apuntó.

7
00:00:23,640 --> 00:00:33,230
Primero lo que voy a hacer es acomodar aquí es que voy a crear el DOM contan Loret es decir cuando es

8
00:00:33,260 --> 00:00:36,280
como el Document Ready de Kairi.

9
00:00:36,610 --> 00:00:44,880
Recuerda que este proyecto no utiliza nada de cuero y solamente utiliza código de JavaScript aquí document

10
00:00:44,880 --> 00:00:55,040
Ready y que va a poner document punto advenediza Mer elemento similar al de document Rayes Dom así en

11
00:00:55,040 --> 00:01:02,580
mayúsculas contén mayúsculas se logra mayúscula L y esto va a ejecutar una función.

12
00:01:02,820 --> 00:01:12,230
Esta función la voy a nombrar aquí vamos a ponerle a actualizar PROGRESO. de esta forma voy a copiar

13
00:01:12,230 --> 00:01:20,450
el nombre de esta de esta función actualizar PROGRESO. y lo voy a colocar hasta abajo hasta abajo está

14
00:01:20,450 --> 00:01:26,970
bien toda la función hasta abajo todo el código poner aquí un comentario que diga qué es lo que hace

15
00:01:26,970 --> 00:01:35,600
esta función actualiza el avance del proyecto y ponemos un Folsom y ponemos el llamado a la función

16
00:01:35,650 --> 00:01:42,650
un consolador nada más que diga desde actualizar PROGRESO. solamente para probar que se esté comunicando

17
00:01:42,650 --> 00:01:43,920
correctamente.

18
00:01:44,150 --> 00:01:50,540
Quiero dar inspeccionar abrimos la consola recargamos y vemos que desde actualizar PROGRESO. entonces

19
00:01:50,540 --> 00:01:57,110
la idea de esto es que una vez que cargue por ejemplo la página que recargue aquí por ejemplo se ejecute

20
00:01:57,110 --> 00:01:59,200
esta función para que nos muestre el progreso.

21
00:01:59,360 --> 00:02:06,170
Pero también a la hora de eliminar un registro una tarea completarla o completarla así que veremos cómo

22
00:02:06,170 --> 00:02:07,280
hacerlo.

23
00:02:07,280 --> 00:02:11,030
Primero vamos a abrir también en el Index apuntó PHP.

24
00:02:11,030 --> 00:02:17,510
Este es el archivo que cuenta con todo y antes del cierre del menú aquí voy a colocar un nuevo Dip con

25
00:02:17,510 --> 00:02:25,840
una clase de avance para darle un poco de estilos y una HD2 que va a decir avance del proyecto y lospuntos

26
00:02:25,850 --> 00:02:32,450
lo demás aquí antes y ponemos un dip con una Heydi que se va a llamar barra avance y una clase que se

27
00:02:32,450 --> 00:02:33,360
va a llamar barra avance.

28
00:02:33,370 --> 00:02:42,120
También y un dip con un Heydi porcentage y un Claas de porcentaje.

29
00:02:42,340 --> 00:02:48,940
Más que nada lo hago porque lo que son los Eiriz los voy a utilizar para JavaScript y las clases lo

30
00:02:48,940 --> 00:02:54,950
voy a utilizar para el CSS si guardamos cambios y abrimos este proyecto recargamos para hacer que se

31
00:02:54,960 --> 00:02:56,630
avance del proyecto.

32
00:02:56,850 --> 00:03:05,970
Vamos a darle un poco de estilos a este avance que vamos a abrir CSS a salir de Staël y de nueva cuenta

33
00:03:05,970 --> 00:03:16,090
usar las tabajo que vamos a poner un comentario que va a decir la barra de avance del proyecto esta

34
00:03:16,240 --> 00:03:19,910
forma y vamos a poner aquí punto barra avance.

35
00:03:19,960 --> 00:03:27,700
Esto va a ser como el contenedor primero a poner un Jaitt de 30 pixeles a la altura de la barra un borde

36
00:03:27,790 --> 00:03:31,960
de un píxel Solid y el color es 9 9 9.

37
00:03:32,050 --> 00:03:38,990
La idea de este color o este color más bien es el mismo color que tenemos en esta parte de aquí de guardar

38
00:03:38,990 --> 00:03:45,170
cambios en ambos y recargar es el que queda de esta forma en ese mismo color del borde el fondo no porque

39
00:03:45,170 --> 00:03:53,280
el fondo el fondo de te mostrará cómo va a quedar aquí por poner también un UIT-T del 90 por ciento

40
00:03:54,270 --> 00:04:02,470
margen cero auto para que quede centrado y un máximo de 800 píxeles eso va a hacer que se vea como el

41
00:04:02,470 --> 00:04:05,320
de arriba o al menos alineado al de arriba.

42
00:04:05,370 --> 00:04:10,540
Después por ejemplo vamos a simular este porcentaje y voy a mostrarte como más o menos va a quedar.

43
00:04:10,660 --> 00:04:15,610
Puedes ver que le di una clase que se llama procentaje por lo tanto aquí voy a poner punto porcentage

44
00:04:17,080 --> 00:04:22,860
y digamos que le ponemos un de 50 por ciento una altura del 100 por ciento para que tome todo el tamaño

45
00:04:23,430 --> 00:04:29,780
y un background color que va a ser raro como Grin de momento si guardamos cambios si recargamos puedes

46
00:04:29,780 --> 00:04:32,120
ver que la barra va a aparecer de esta forma.

47
00:04:32,340 --> 00:04:34,490
Ahora estoy aquí le puse width 50 por ciento.

48
00:04:34,500 --> 00:04:38,970
La idea es que JavaScript controle el ancho de esta barra pero más o menos puedes ver que se va a ver

49
00:04:38,970 --> 00:04:40,180
de esta forma.

50
00:04:40,260 --> 00:04:46,980
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

51
00:04:46,980 --> 00:04:51,900
es el mismo color que utilizamos cuando marcamos completaba una tarea.

52
00:04:51,900 --> 00:04:59,030
Ahora si por ejemplo vemos vostra work tienen estas barras de progreso que son similares a esta en algunos

53
00:04:59,030 --> 00:05:07,760
aspectos algo que podemos hacer aquí es por ejemplo copiar este color de fondo este color es muy muy

54
00:05:07,760 --> 00:05:10,820
claro pegarlo aquí como background color

55
00:05:16,070 --> 00:05:23,220
recargamos y quedaría de esta forma más o menos para que se vea el progreso aquí es un poco más claro

56
00:05:23,220 --> 00:05:28,690
en vostra creo si es un color más claro y sobretodo no obtiene el borde por eso se ve diferente.

57
00:05:28,710 --> 00:05:33,540
Por ejemplo si damos un poco de scroll puedes ver que aquí vienen estas barras con estas líneas puedes

58
00:05:33,540 --> 00:05:39,520
darle a inspeccionar en alguna de estas barras por ejemplo esta aquí puedes ver que ellos la aplica

59
00:05:39,520 --> 00:05:44,720
en este CSS entonces no lo podemos robar en nuestro proyecto y copiarlo y pegarlo aquí.

60
00:05:44,910 --> 00:05:51,710
Este Granny match con un linear Gradiant y background CEIS también recargamos y puedes ver que tenemos

61
00:05:51,710 --> 00:05:54,950
esta barra de esta forma que creo que se ve un poco mejor.

62
00:05:54,950 --> 00:06:03,950
Voy a quitar creo que sería buena idea quitar el borde o el back en alguno de los dos tendremos que

63
00:06:03,950 --> 00:06:09,340
quitar creo que este se lo quitó y se ve mucho mejor que la otra forma.

64
00:06:09,340 --> 00:06:11,370
Entonces creo que se ve bastante bien.

65
00:06:11,370 --> 00:06:16,590
Ahora vamos a agregar la interacción porque por ejemplo si yo le doy completar este tiene que marcarse

66
00:06:16,590 --> 00:06:19,590
como 100 o si es completo 50 o 0.

67
00:06:19,650 --> 00:06:26,880
De momento está este Weed 0 huid 50 tenemos que dejarlo como cero y eso lo va a dejar vacío y el ancho

68
00:06:26,880 --> 00:06:33,930
de de la barra va a agregarse por medio de JavaScript servir el script y dentro de la función que creamos

69
00:06:33,930 --> 00:06:35,220
anteriormente.

70
00:06:35,220 --> 00:06:39,960
Primero tenemos que tomar todas las tareas que haya disponibles en esta página actual y si lo de aquí

71
00:06:39,960 --> 00:06:46,400
por ejemplo inspeccionar inspecciona cada tarea puede ser que si recuerdas tenemos este que dice tarea

72
00:06:47,290 --> 00:06:55,610
entonces podemos seleccionar las tareas que pueden tener todas las tareas y ponemos cons tareas igual

73
00:06:55,670 --> 00:07:02,170
a document punto que vamos a utilizar cuál es el lector o el porqué queremos todas y vamos a obtener

74
00:07:02,170 --> 00:07:10,090
todos los LP que tengan la clase de tarea que le puedes dar un Consol log a tareas resguardamos cambios

75
00:07:10,090 --> 00:07:15,550
de nueva cuenta recargamos si abrimos la consola puede ser que tengo dos para acceder a la cantidad

76
00:07:15,580 --> 00:07:21,310
porque esto me va a traer los elementos podemos utilizar puntos Leng eso nos va a traer cuantos elementos

77
00:07:21,310 --> 00:07:26,560
tenemos en las tareas que tenemos dos ahora hay que seleccionar las que estén completadas.

78
00:07:26,760 --> 00:07:33,900
Por ejemplo si completo está y inspeccion el código nuevamente la tarea completada la tenemos en las

79
00:07:33,900 --> 00:07:43,340
acciones puede ser que aquí tenemos esté completo y esta dentro esté y vamos a poner aquí obtener las

80
00:07:43,340 --> 00:07:44,960
tareas completadas.

81
00:07:45,940 --> 00:07:54,880
Const tareas completadas va a ser igualas document .4 selector o nuevamente vamos a seleccionar todos

82
00:07:54,880 --> 00:08:03,300
los iconos con la clase completo y de nueva cuenta puedo enviar esto a la consola con el punto log.

83
00:08:03,550 --> 00:08:09,400
Tareas completadas punto length para que me diga cuántas tareas llevo completadas.

84
00:08:09,400 --> 00:08:10,600
Este es el código.

85
00:08:10,720 --> 00:08:14,650
Abrimos la consola y recargamos y puedes ver que tengo dos de arriba.

86
00:08:14,680 --> 00:08:15,700
Cuántas tareas tengo.

87
00:08:16,260 --> 00:08:17,640
Y cuántas tengo completadas.

88
00:08:17,650 --> 00:08:18,620
Nada más es una.

89
00:08:18,910 --> 00:08:20,480
Entonces es correcto.

90
00:08:20,620 --> 00:08:26,140
El siguiente paso es determinar el avance y para ello si tenemos dos tareas y he completado una.

91
00:08:26,140 --> 00:08:28,820
Eso quiere decir que tengo un avance del 50 por ciento.

92
00:08:30,180 --> 00:08:34,620
Aquí voy a colocar determinar el avance

93
00:08:37,350 --> 00:08:38,860
y vamos a poner aquí.

94
00:08:39,230 --> 00:08:45,160
Y esto se va a ver muy como Matemáticas de la escuela de primaria más bien vamos a suponer que icons

95
00:08:45,220 --> 00:08:49,880
avance y avance lo vamos a determinar por las tareas completadas.

96
00:08:49,900 --> 00:08:57,910
Es decir este código de aquí las tareas que tengamos completadas entre la cantidad de tareas que sería

97
00:08:57,910 --> 00:09:09,730
este otro aquí si enviamos eso a la consola con los avance y guardamos cambios y recargamos eso nos

98
00:09:09,730 --> 00:09:12,100
va a decir 0.5.

99
00:09:12,100 --> 00:09:19,300
Lo único que nos falta es multiplicarlo por 100 como si fuera una regla de tres entonces ponemos paréntesis

100
00:09:19,300 --> 00:09:25,030
porque queremos que esta operación se realice primero igual que las matemáticas de la escuela en Javascript

101
00:09:26,380 --> 00:09:33,620
por 100 porque me interesa que traiga 50 por ciento por ejemplo 1 punto o 0.5 entonces de esta forma

102
00:09:33,620 --> 00:09:41,150
me va a traer un número o 50 por ciento del avance porque tenemos una de dos ser que se ve correctamente.

103
00:09:41,230 --> 00:09:50,120
Voy a agregar otra media agregar una tarea nueva elegir imágenes y doy clic en Agregar los personas

104
00:09:50,140 --> 00:09:58,030
que cuando recargó aquí dice puntos vienen muchos 33 no nos interesa que sean tantos números.

105
00:09:58,320 --> 00:10:04,200
Queremos que sea un poco más corto porque el avance va a determinar el ancho de este entonces aquí vamos

106
00:10:04,200 --> 00:10:14,940
a utilizar Maat para operaciones de matemáticas de que más puntos Rawat y rodeamos todo y eso va a redondear

107
00:10:14,940 --> 00:10:19,420
y eliminar un poco lo que vienen siendo estos números.

108
00:10:19,470 --> 00:10:26,130
Por ejemplo puedes ver que con 33 entonces eso le asignaría este DIV que está aquí al resultado la barra

109
00:10:26,340 --> 00:10:33,280
un avance de 33 por ciento que se lo asignamos al width y nos daría 33 por ciento de avance.

110
00:10:33,320 --> 00:10:39,150
Si por ejemplo completo esta otra recarga aquí sería 67 y ya me daría dos terceras partes de avance

111
00:10:40,490 --> 00:10:48,690
ahora cómo le asignamos este avance a la barra esta barra que tenemos aquí de porcentaje vamos a asignar

112
00:10:49,500 --> 00:10:58,200
el avance a la barra y vamos a poner Conce porcentaje voy a seleccionar primero el elemento con un documento

113
00:10:58,410 --> 00:11:09,520
y selector solamente me interesa un porcentaje ahí porcentaje y utilizamos porcentaje punto esta el

114
00:11:09,520 --> 00:11:18,110
punto UIT-T para que nos dé o poder cambiar el ancho que va a poner avance pero muy importante lo requerimos

115
00:11:18,110 --> 00:11:18,910
como porcentaje.

116
00:11:18,910 --> 00:11:26,030
Por lo tanto utilizo el chino además para concatenar un porcentaje de equipo con eso es suficiente.

117
00:11:26,140 --> 00:11:33,680
Guardamos cambios recargamos y puedes ver qué se pinta y si lo de inspeccionar puedes ver qué dice cubitera

118
00:11:33,830 --> 00:11:43,170
33 por ciento si marco una de estas recargo puedes ver que tengas 66 y si marco una más puedes ver que

119
00:11:43,170 --> 00:11:48,280
tengo todo el porcentaje completo del avance de este proyecto.

120
00:11:48,630 --> 00:11:53,630
Ahora sí lo marco incompleto y recargo pues ver que vuelve hacia atrás.

121
00:11:53,730 --> 00:11:57,840
El detalle es que estoy teniendo que recargar para poder ver el avance y me gustaría que por ejemplo

122
00:11:57,840 --> 00:12:04,090
cuando lo marque se actualice la barra va a ser muy sencillo gracias a todo lo que ya tenemos hecho

123
00:12:04,810 --> 00:12:09,430
y voy a copiar el nombre de esta función voy a copiar toda esta parte también el llamado a la función

124
00:12:10,090 --> 00:12:17,710
y la función sobreproteger acopiado es una que está aquí arriba que se llama cambiar el estado de la

125
00:12:17,710 --> 00:12:23,740
tarea entonces es que aquí tenemos el Heydi y la acción del Estado en esta parte donde hacemos la ejecución

126
00:12:23,750 --> 00:12:26,470
Ayax aquí donde tenemos este Consol log.

127
00:12:26,470 --> 00:12:33,850
Voy a poner el llamado a la función para que actualice el progreso una vez que yo marco o marco lo que

128
00:12:33,850 --> 00:12:34,830
vienen siendo mis tareas.

129
00:12:34,840 --> 00:12:41,560
Entonces si recargo doy click aquí puedes ver que se actualiza lo que viene siendo el avance.

130
00:12:41,560 --> 00:12:46,810
Ahora supongamos que tengo estas dos marcadas pero esta otra decido ya que no la ocupo a la hora de

131
00:12:46,810 --> 00:12:50,750
eliminarla puedes ver que ya debería de marcarse al 100.

132
00:12:51,010 --> 00:12:56,710
Entonces tenemos que mandar llamar también nuestra función donde eliminamos las tareas que se esta parte

133
00:12:57,460 --> 00:13:03,220
damos un poco de scroll y aquí es donde dice comprobar que haya tareas restantes aquí vamos a poner

134
00:13:05,970 --> 00:13:07,240
actualizar el progreso

135
00:13:10,270 --> 00:13:13,440
la respuesta de Ayax.

136
00:13:13,590 --> 00:13:18,370
De hecho este mismo código tendría que ir acá para al menos comentar o qué es lo que hace esta función

137
00:13:20,430 --> 00:13:28,740
guardamos cambios en recargamos y por ejemplo tendría que crear una nueva aquí además Hola.

138
00:13:28,840 --> 00:13:35,480
Agregar puedes ver que tenemos esto y si por ejemplo yo elimino esta tarea de borrar puedes ver que

139
00:13:35,480 --> 00:13:36,830
ya se marca.

140
00:13:36,950 --> 00:13:42,080
Ahora pudiste ver que por ejemplo aquí le di a agregar la tarea Hola y en este caso cuando creó una

141
00:13:42,080 --> 00:13:44,280
nueva tarea también debería de actualizarse.

142
00:13:44,480 --> 00:13:50,390
Tenemos que de nueva cuenta utilizar este mismo código y llamar esta función cuando creamos una nueva

143
00:13:50,390 --> 00:13:51,580
tarea.

144
00:13:51,680 --> 00:13:53,910
Vamos a darle hasta arriba.

145
00:13:53,920 --> 00:13:57,260
Aquí tenemos nueva tarea y el método se llama agregar tareas.

146
00:13:57,740 --> 00:14:04,610
Entonces vamos hacia este método y es donde tenemos el llamado a quienes le status quieren estar correcto

147
00:14:04,640 --> 00:14:08,990
todo este código que tenemos bastante código.

148
00:14:09,130 --> 00:14:15,340
Después de limpiar el formulario vamos a ejecutar actualizar el progreso tiene que ser en todos los

149
00:14:15,430 --> 00:14:19,540
distintos métodos tanto completar o completar tareas.

150
00:14:19,540 --> 00:14:27,380
Tenemos que mandar a llamar a actualizar el progreso eliminarlas o crear nuevas y con eso por ejemplo

151
00:14:27,410 --> 00:14:34,550
voy a darle que eliminar y voy a recargar puedes ver que tengo dos tareas completado el 100 por ciento.

152
00:14:34,550 --> 00:14:36,480
Pero digamos que agregó una nueva.

153
00:14:36,820 --> 00:14:45,140
Crear el seleccionar imágenes y lo voy a agregar.

154
00:14:45,140 --> 00:14:52,160
Puedes ver que se actualiza lo que viene siendo el avance y aquí vamos a poner otro que va a decir enviar

155
00:14:52,160 --> 00:14:58,440
propuestas agregar y puedes ver que ya vamos por la mitad.

156
00:14:58,590 --> 00:15:06,300
Pero si marco esta se actualiza y si decido eliminar esta porque la requiero se actualiza también.

157
00:15:06,510 --> 00:15:12,690
Entonces será importante tener o mandar llamar esta nueva función en las distintas acciones que hacemos

158
00:15:12,750 --> 00:15:14,020
en nuestro sistema.

159
00:15:14,340 --> 00:15:18,870
Entonces ya para finalizar puedes ver que por ejemplo si desmarca estas tareas se ve medio raro ese

160
00:15:18,870 --> 00:15:26,500
salto no queda así como medio extraño podemos abrir hasta el punto CSS y aquí en el porcentaje ponerle

161
00:15:26,500 --> 00:15:33,440
una transición Transition al UIT-T al ancho que sea 2.5 segundos y ponerla aquí.

162
00:15:33,460 --> 00:15:41,400
Cualquiera de estas animaciones mi caso is in out y recargamos damos clic aquí pues el que aparece es

163
00:15:41,400 --> 00:15:47,310
la animación y click acá y se verá autocompletado y vemos esta animación que hace que no se vea como

164
00:15:47,410 --> 00:15:49,250
tan aburrido.

165
00:15:49,250 --> 00:15:53,620
De esta forma puedes agregar un avance a tu proyecto y saber cuánto llevas avanzado si tienes muchas

166
00:15:53,620 --> 00:15:59,760
tareas obviamente pues vas a dar una idea de qué tanto se ha avanzado en tu proyecto ahora si por ejemplo

167
00:15:59,800 --> 00:16:05,920
marcas todas completas el proyecto y te gustaría mostrar como una alerta es muy sencillo voy a copiar

168
00:16:05,920 --> 00:16:13,230
algunos de estos xual que tenemos anteriormente un poco de scroll hasta nuestra función que vamos a

169
00:16:13,220 --> 00:16:21,570
poder enviar o mostrar una alerta al completar el 100 por ciento el que va a hacer y el avance es igual

170
00:16:21,570 --> 00:16:23,010
al 100 por ciento.

171
00:16:23,400 --> 00:16:24,690
En este caso es igual a 100.

172
00:16:25,230 --> 00:16:29,970
Entonces ponemos Sexwale que va a decir proyecto terminado

173
00:16:33,000 --> 00:16:42,470
y en el texto vamos a poner ya no tienes tareas pendientes pues guardamos cambios recargamos tendrá

174
00:16:42,470 --> 00:16:48,730
que desmarcar algunas de estas y puede ser que cuando por ejemplo le dé clic aquí y después está otra

175
00:16:48,800 --> 00:16:55,580
desde el que se proyecto terminado ya no tienes tareas pendientes y podemos poner ok entonces este fue

176
00:16:55,580 --> 00:16:56,960
uno de mis proyectos favoritos.

177
00:16:56,960 --> 00:17:01,840
La verdad de los que más disfruté hacer y enseñar cómo se hace espero haya sido de tu agrado.