1
00:00:00,650 --> 00:00:02,670
OK, volveremos en este video.

2
00:00:02,670 --> 00:00:05,040
Vamos a trabajar en algunas características nuevas.

3
00:00:05,040 --> 00:00:08,190
El primero es cuando gano el juego.

4
00:00:08,460 --> 00:00:09,410
Me dice correcto.

5
00:00:09,630 --> 00:00:15,440
Y luego puedo volver a hacer clic en jugar para obtener nuevos colores y si todavía no he ganado.

6
00:00:15,530 --> 00:00:19,460
Pero también quiero nuevos colores porque por alguna razón no me gustan los colores que tengo.

7
00:00:19,680 --> 00:00:21,750
También puedo hacer clic en el botón de nuevos colores.

8
00:00:21,930 --> 00:00:27,300
aleatorio entre los seis colores aleatorios y volveremos al último modo fácil y difícil.

9
00:00:27,300 --> 00:00:32,770
Básicamente, necesitamos un botón que restablezca la selección del juego. Elija un nuevo color

10
00:00:32,940 --> 00:00:35,870
Entonces este botón hace lo mismo.

11
00:00:36,040 --> 00:00:42,240
Sin embargo, el texto cambia si ganamos el juego y nos pregunta si queremos volver a jugar, así podemos volver

12
00:00:42,240 --> 00:00:44,150
a jugar y eso lo restablecerá.

13
00:00:44,220 --> 00:00:48,540
Pero también puedo hacer clic en nuevos colores y eso también lo restablecerá.

14
00:00:48,570 --> 00:00:49,840
Entonces eso es en lo que nos enfocaremos.

15
00:00:50,010 --> 00:00:55,590
Y para comenzar voy a continuar y agregar el botón y agregar esa franja que se extiende de

16
00:00:55,590 --> 00:01:00,290
modo que la franja contenga este botón para un nuevo color o para jugar de nuevo.

17
00:01:00,870 --> 00:01:02,890
Y contiene el mensaje que ya tenemos.

18
00:01:03,060 --> 00:01:04,970
Y luego los dos botones que haremos más tarde.

19
00:01:05,250 --> 00:01:11,590
Entonces, si vamos lo primero que tenemos que hacer, ya tenemos un div. Voy a darle un id. De franja

20
00:01:12,750 --> 00:01:14,240
y luego podemos usar eso.

21
00:01:14,550 --> 00:01:19,560
Y luego ya tenemos nuestro lapso dentro que mostrará algo como correcto o intenta nuevamente.

22
00:01:19,590 --> 00:01:27,990
Y aquí dentro solo agregaremos nuestro botón y este botón comenzará diciendo nuevos colores que podemos guardar

23
00:01:28,780 --> 00:01:29,820
y refrescamos.

24
00:01:30,160 --> 00:01:33,140
OK que se ve tan mal como cabría esperar.

25
00:01:33,330 --> 00:01:39,330
Avancemos y agreguemos el color de fondo blanco y centremos todo en este div. Entonces, a nuestro div se

26
00:01:39,330 --> 00:01:40,210
le llama raya.

27
00:01:40,590 --> 00:01:45,220
Vayamos a nuestros C Ss y vamos a seleccionar Strype, que es una identificación.

28
00:01:45,360 --> 00:01:48,970
Entonces, necesitamos usar la banda con una ocurrencia tardía.

29
00:01:49,260 --> 00:01:54,580
Y vamos a establecer un fondo de color de fondo para que sea blanco.

30
00:01:54,660 --> 00:02:02,460
Voy a configurar la altura para que sea de 30 píxeles, de modo que tengamos un div agradable y alto que

31
00:02:02,460 --> 00:02:09,030
sea un div relativamente alto y voy a configurar el alineamiento de texto para que sea Center.

32
00:02:09,300 --> 00:02:13,330
Y ahora si actualizo, obtienes un div blanco que cruza todo.

33
00:02:13,350 --> 00:02:15,220
Es un poco más alto de lo que era.

34
00:02:15,240 --> 00:02:17,230
Tenemos un botón aquí solo para cualquier cosa.

35
00:02:17,400 --> 00:02:23,640
Y si gano o pierdo o recibo una respuesta incorrecta, hay un lapso que simplemente no puede ver.

36
00:02:23,640 --> 00:02:27,290
Y eso es porque el texto de ese tramo es blanco.

37
00:02:28,380 --> 00:02:34,950
Entonces, lo que podrías pensar es entrar en nuestra sección del div y decir que el color

38
00:02:34,950 --> 00:02:38,690
del texto debe ser negro, pero desafortunadamente eso no funciona.

39
00:02:38,880 --> 00:02:45,390
la idea de la franja debe ser negro, color de texto, negro, y uno pensaría bien, es

40
00:02:45,390 --> 00:02:52,110
súper específico, si se puede recordar nuestras primeras conferencias e ID de especificidad de CSS son muy específicas.

41
00:02:52,170 --> 00:02:58,890
Y este es un problema de especificidad porque estamos diciendo que con esta línea, todo dentro de la

42
00:02:58,890 --> 00:02:59,710
cosa con

43
00:02:59,790 --> 00:03:05,440
El asunto es que esto está configurando los colores para que sean negros en el div con banda de ID.

44
00:03:05,970 --> 00:03:13,080
Y luego estamos configurando todos los tramos para que pueda ver aquí que son de color blanco para que esto sea blanco y eso

45
00:03:13,140 --> 00:03:17,820
lo hace más específico porque en realidad estamos apuntando al elemento en sí mismo en lugar

46
00:03:17,820 --> 00:03:20,630
de al padre y haciendo que herede el color.

47
00:03:21,090 --> 00:03:22,570
Entonces tenemos algunas opciones.

48
00:03:22,590 --> 00:03:25,960
Lo que haré es en realidad deshacerme de esto por ahora.

49
00:03:26,040 --> 00:03:31,710
Ya no vamos a configurar el color para que sea blanco y podemos actualizar y verás que esto no cambia de color,

50
00:03:31,710 --> 00:03:36,720
es un lapso de tiempo en blanco a pesar de que nos deshicimos de la línea que decía que todos

51
00:03:37,050 --> 00:03:42,960
los tramos son blancos y eso es porque está dentro de un H1 y hereda el color de texto H1 que es blanco.

52
00:03:42,990 --> 00:03:45,590
De la misma manera que este tramo aquí es negro.

53
00:03:45,600 --> 00:03:51,720
Heredó el color del texto de negro o simplemente el negro de color regular de la división div que

54
00:03:51,720 --> 00:03:55,160
está a su alrededor, que se puede ver aquí color negro.

55
00:03:55,410 --> 00:03:56,770
Y ese es nuestro golpeado.

56
00:03:57,060 --> 00:03:57,660
DE ACUERDO.

57
00:03:57,810 --> 00:04:06,720
Así que trabajemos en obtener este botón para reiniciar el juego, así que para empezar necesitamos agregar un detector de eventos.

58
00:04:06,870 --> 00:04:09,750
Y antes de que podamos hacer eso, tenemos que seleccionar ese botón.

59
00:04:09,960 --> 00:04:18,000
Así que voy a dar ese botón e ID aquí, simplemente lo llamaremos ID igual a restablecer y luego seleccionaremos ese

60
00:04:18,000 --> 00:04:21,000
botón de reinicio en lugar de un Javascript.

61
00:04:21,000 --> 00:04:31,980
Entonces, el botón var reset equivale a documentar ese selector de consulta con nuestra octava o reinicio.

62
00:04:31,980 --> 00:04:37,120
Y, como siempre, me gustaría agregar mi sencillo detector de eventos de prueba.

63
00:04:37,140 --> 00:04:40,680
Entonces, el botón de reinicio agrega el detector de eventos.

64
00:04:40,860 --> 00:04:51,990
y cuando haga clic en todo lo que haremos es hacer un simple botón de reinicio rápido de alerta, así como se actualice.

65
00:04:52,070 --> 00:04:52,820
Haga clic

66
00:04:52,970 --> 00:04:57,590
Y si hago clic en esto, recibo mi alerta y eso significa que estamos listos para continuar.

67
00:04:57,590 --> 00:05:01,030
Así que, luego, podemos trabajar en la lógica para reiniciar.

68
00:05:01,250 --> 00:05:03,890
Entonces, lo que tenemos que hacer vamos a escribir el pseudo código.

69
00:05:03,890 --> 00:05:10,030
Cuando haces clic en ese botón, necesitas generar todos los colores nuevos.

70
00:05:10,040 --> 00:05:20,750
Necesitamos elegir un nuevo color aleatorio del conjunto y luego tenemos que cambiar los colores de los cuadrados en

71
00:05:20,750 --> 00:05:22,030
la página.

72
00:05:22,280 --> 00:05:28,310
Entonces, para generar todos los colores nuevos, ya tenemos esa función existente que genera colores aleatorios.

73
00:05:29,030 --> 00:05:33,940
Así que simplemente diremos que los colores ahora son iguales para generar colores aleatorios de seis.

74
00:05:34,580 --> 00:05:41,270
Y luego seleccionaremos un nuevo color aleatorio para elegir el color que ahora es igual a elegir el color del método

75
00:05:41,270 --> 00:05:42,860
o la función que definimos.

76
00:05:42,860 --> 00:05:48,890
Hay una cosa más que necesitamos hacer, que es cambiar este color de visualización para que coincida con el color de las

77
00:05:48,890 --> 00:05:49,540
nuevas selecciones.

78
00:05:49,850 --> 00:05:52,040
Entonces, diremos que cambie la visualización

79
00:05:55,250 --> 00:06:01,090
en color para que coincida con el color elegido, de modo que uno sea simple.

80
00:06:01,160 --> 00:06:08,870
si actualizamos nuestra página e intentamos hacer clic en nuevos colores, lo que está haciendo es generar seis nuevos colores.

81
00:06:12,890 --> 00:06:21,890
Todo lo que tenemos que hacer es decir que el contenido del texto del punto de la pantalla a color es igual al

82
00:06:21,890 --> 00:06:23,110
color elegido y

83
00:06:23,120 --> 00:06:25,400
Todavía no los vemos porque no tenemos ese código.

84
00:06:25,580 --> 00:06:30,750
Y luego selecciona uno de esos colores y luego cambia lo que vemos aquí para que coincida con el

85
00:06:30,770 --> 00:06:31,410
color picta.

86
00:06:31,730 --> 00:06:36,220
Por lo tanto, nos da un nuevo color aleatorio y seis colores aleatorios detrás de escena.

87
00:06:36,230 --> 00:06:42,230
Así que la última pieza es reflejar esos seis nuevos colores en la página y ya lo hemos hecho antes.

88
00:06:42,260 --> 00:06:49,070
estamos recorriendo todos los cuadrados y estamos cambiando el estilo del fondo para que sean colores.

89
00:06:49,460 --> 00:06:50,440
Aquí abajo

90
00:06:50,450 --> 00:06:56,060
Así que voy a empezar simplemente duplicando todo eso aquí y vamos a refactorizar esto.

91
00:06:56,350 --> 00:06:58,340
Pero comenzar a poner todo aquí.

92
00:06:58,370 --> 00:07:07,170
Así que recorra todos los cuadrados cuadrados para flanquear I plus plus y luego todo lo que tenemos que hacer

93
00:07:07,450 --> 00:07:12,600
es decir cuadrados. Estilo que el fondo es igual a los colores.

94
00:07:13,020 --> 00:07:15,820
Yo salvaré.

95
00:07:16,070 --> 00:07:21,660
Y si actualizamos y hacemos clic en nuevos colores, genera 60 colores aleatorios.

96
00:07:21,740 --> 00:07:22,820
Elige uno.

97
00:07:22,820 --> 00:07:29,090
Actualiza la pantalla para reflejar el color de la imagen y cambia los seis cuadrados para que coincida con

98
00:07:29,090 --> 00:07:30,360
los seis nuevos colores.

99
00:07:30,710 --> 00:07:34,730
Entonces, probemos y veamos si nuestra lógica anterior también se mantiene.

100
00:07:35,240 --> 00:07:35,850
DE ACUERDO.

101
00:07:36,290 --> 00:07:39,130
Entonces esta es una buena cantidad de rojo.

102
00:07:39,140 --> 00:07:41,460
Muy poco verde y una buena cantidad de azul.

103
00:07:41,840 --> 00:07:45,280
Intentemos hacer clic en algunos que no creemos que sean correctos.

104
00:07:46,160 --> 00:07:48,880
Y ahora vamos por uno de los morados.

105
00:07:49,070 --> 00:07:50,940
Entonces parece un poco más rojo el azul.

106
00:07:50,960 --> 00:07:56,510
Así que voy a adivinar esto y estamos en lo cierto y parece que las cosas siguen funcionando bien.

107
00:07:56,540 --> 00:07:58,470
Nuevos colores rápidos nuevamente.

108
00:07:58,610 --> 00:08:00,320
Queremos restablecer esto

109
00:08:00,320 --> 00:08:01,960
Esa es una cosmetica realmente menor.

110
00:08:02,030 --> 00:08:08,470
Pero cuando hacemos clic en nuevos colores, debemos restablecer la pantalla aquí para que vuelva a ser

111
00:08:08,510 --> 00:08:11,000
negra o a este color gris oscuro.

112
00:08:11,000 --> 00:08:16,670
hacer es que cuando queremos queremos decir que vuelva a jugar como pueden ver aquí, así que ganaré aquí.

113
00:08:17,030 --> 00:08:18,480
La otra cosa que queremos

114
00:08:18,530 --> 00:08:20,350
Este es mucho verde.

115
00:08:20,540 --> 00:08:24,980
Yo gano y me dice que vuelva a jugar y hace lo mismo.

116
00:08:24,980 --> 00:08:29,260
Funcionalmente, realmente no cambia, somos nosotros y un texto diferente.

117
00:08:29,300 --> 00:08:31,060
Entonces eso es simple de hacer.

118
00:08:31,100 --> 00:08:35,150
Todo lo que tenemos que hacer es encontrar dónde está el código para verificar si ganas.

119
00:08:35,180 --> 00:08:36,240
Eso está aquí.

120
00:08:36,620 --> 00:08:39,500
Y luego solo queremos cambiar el contenido de texto de ese botón.

121
00:08:39,740 --> 00:08:41,820
Entonces el botón se llamó botón de reinicio.

122
00:08:41,930 --> 00:08:51,740
Entonces, reinicie el botón para que el contenido de texto sea igual a jugar nuevamente con un signo de interrogación actualizar dice nuevos colores.

123
00:08:52,790 --> 00:08:54,560
Ahora intentemos jugar uno de estos.

124
00:08:54,740 --> 00:08:58,750
Este es mucho rojo y mucho verde y un poco azul.

125
00:08:58,790 --> 00:09:02,070
Así que mucho rojo y mucho verde nos va a dar un color amarillo.

126
00:09:02,210 --> 00:09:04,100
Así que reduzcamos algunos de ellos.

127
00:09:04,100 --> 00:09:08,180
Y luego, un poco de azul lo hará más claro y brillante.

128
00:09:08,480 --> 00:09:13,590
Entonces, si probamos uno de estos como este o este, verán que no están del todo bien.

129
00:09:13,880 --> 00:09:17,230
Y esta es nuestra respuesta aquí y nos dice que juguemos de nuevo.

130
00:09:17,300 --> 00:09:20,120
Y muy rápido y hace exactamente lo mismo.

131
00:09:20,180 --> 00:09:23,570
Lo último que mencioné es cambiar el color de fondo.

132
00:09:23,570 --> 00:09:28,430
Así que aquí podemos hacer eso al final del botón de reinicio.

133
00:09:28,520 --> 00:09:30,950
Solo vamos a seleccionar ese H-1.

134
00:09:31,200 --> 00:09:34,610
Es un punto que seleccionamos aquí.

135
00:09:34,670 --> 00:09:37,090
Eso es fondo de acceso telefónico.

136
00:09:37,160 --> 00:09:40,600
UPS es igual.

137
00:09:40,640 --> 00:09:47,600
Y es ese hexadecimal 2 3 2 3 2 3 que es si te olvidaste de que podrías ir a buscar en VER para evaluar

138
00:09:47,900 --> 00:09:49,560
el color de fondo del cuerpo.

139
00:09:49,800 --> 00:09:55,410
O lo configuramos aquí cuando eliminamos uno de los colores si eliges el color equivocado.

140
00:09:55,580 --> 00:09:58,680
Cambiamos el color de fondo para que sea igual al cuerpo.

141
00:09:59,150 --> 00:10:02,130
OK, refresquemos nuevos colores.

142
00:10:02,330 --> 00:10:03,820
Vamos a ganar ahora

143
00:10:04,010 --> 00:10:10,760
Simplemente rápido al azar solo por el tiempo, hacemos clic en jugar nuevamente y cambia a un fondo

144
00:10:10,760 --> 00:10:11,300
negro.

145
00:10:11,310 --> 00:10:13,060
O el fondo gris oscuro.

146
00:10:13,570 --> 00:10:15,530
OK, así que eso es todo por este video.

147
00:10:15,530 --> 00:10:19,790
A continuación, vamos a agregar los botones para elegir entre el modo fácil y el modo difícil.

148
00:10:19,820 --> 00:10:22,590
Y finalmente, vamos a estilizar las cosas para que se vean bien