Llegamos a la asignación final de este curso.
En esta cuarta asignación,
vas a trabajar con bootstraps,
soporte jQuery y también un poco de Sass.
Esta asignación consta de cuatro tareas.
Su primera tarea sería eliminar todos esos
atributos de datos tanto del enlace de inicio de sesión aquí como de la reserva de tablas aquí.
Ahora, en esta tarea,
vamos a activar los modelos usando código JavaScript.
Por lo tanto, para hacer eso,
primero eliminaremos los atributos de datos,
tanto del modelo de reserva como del modelo de inicio de sesión como nuestra primera tarea en esta asignación.
Su segunda tarea es agregar
código JavaScript apropiado utilizando los métodos de modelos,
métodos JavaScript que están disponibles, de
modo que cuando se hace clic en el patrón de tabla de reserva,
entonces el modelo de reserva correspondiente se mostrará como se ve aquí.
Por lo tanto, vemos que esta visualización y ocultación del modelo
se activa completamente usando los métodos JavaScript de ese modelo.
Su tercera tarea sería, de nuevo,
insertar el código apropiado en el script de manera que cuando haga clic en el enlace de inicio de sesión aquí,
se mostrará el modelo de inicio de sesión.
Ahora, para que esto funcione,
debe dar los ID apropiados tanto al botón de la tabla de reserva como al
enlace de inicio de sesión para que luego puedan ser referenciados en su código JavaScript.
Entonces, eso es una pista para usted,
cómo puede seguir adelante y continuar con la implementación de esto.
El uso de los métodos JavaScript debe ser bastante sencillo.
El enlace a la documentación de arranque que describe
los métodos JavaScript está disponible en
la sección de recursos adicionales de esta asignación.
Como es posible que ya se haya dado cuenta de que estos modelos ahora se ven mucho más colorido.
Así que aquí está el modelo de tabla de reserva,
y aquí está el modelo de inicio de sesión.
Por lo tanto, como parte de la cuarta tarea de esta asignación,
va a agregar algún código SCSS en el archivo de inicio de estilos SCSS, de
modo que los colores se establecen adecuadamente.
Así que aquí, verá que ese encabezado del modelo tiene
el color oscuro de fondo establecido y el texto aquí se muestra en color blanco.
Y también, esta clase en particular
mediante el uso de una clase anidada aquí en su código SCSS,
puede definir esto también para usar un color plano o blanco aquí.
A continuación, el cuerpo del modelo utiliza el color de fondo pálido.
Por lo tanto, inserte el código SCSS apropiado en su
archivo SCSS de inicio de estilo para permitir que esto funcione para el modelo de reserva del encabezado y el cuerpo, para
que pueda ver que el mismo color oscuro de fondo se aplica al encabezado y
el color pálido de fondo se aplica al cuerpo de su modelo.
Y al completar esta tarea,
es posible que desee hacer un buen comentario para guardar los cambios con la asignación de mensajes cuatro.