Chegamos à tarefa final deste curso.
Nesta quarta tarefa,
você vai trabalhar com bootstraps,
suporte jQuery e também um pouco de Sass.
Esta tarefa consiste em quatro tarefas.
Sua primeira tarefa seria remover todos os
atributos de dados do link de login aqui e da reserva de tabelas aqui.
Agora, nesta atribuição,
vamos acionar os modelos usando código JavaScript.
Então, para fazer isso,
primeiro removeremos os atributos de dados,
tanto do modelo de reserva quanto do modelo de login como nossa primeira tarefa nesta atribuição.
Sua segunda tarefa é adicionar
código JavaScript apropriado usando os métodos models,
métodos JavaScript que estão disponíveis, de
modo que quando o padrão de tabela de reserva é clicado,
então o modelo de reserva correspondente será exibido como visto aqui.
Então, vemos que essa exibição e ocultação do modelo
é acionada completamente usando os métodos JavaScript desse modelo.
Sua terceira tarefa seria, novamente,
inserir o código apropriado no script de forma que quando você clicar no link de login aqui,
o modelo de login será exibido.
Agora, para que isso funcione,
você precisa dar IDs apropriados tanto para o botão de tabela de reserva quanto para
o link de login, de modo que eles possam ser referenciados em seu código JavaScript.
Então, isso é uma dica para você,
como você pode ir em frente e prosseguir com a implementação deste.
O uso dos métodos JavaScript deve ser bastante simples.
O link para a documentação de bootstrap que descreve
os métodos JavaScript está disponível
na seção de recursos adicionais desta atribuição.
Como você já deve ter percebido que esses modelos agora parecem muito mais coloridos.
Então aqui está o modelo de tabela de reserva,
e aqui está o modelo de login.
Então, como parte da quarta tarefa desta atribuição,
você vai adicionar em algum código SCSS nos estilos iniciar arquivo SCSS, de
modo que as cores são adequadamente definidas.
Então, aqui, você vê que esse cabeçalho do modelo tem
a cor escura de fundo definida e o texto aqui é exibido na cor branca.
E também, esta classe particular
usando uma classe aninhada aqui em seu código SCSS,
você pode definir isso também para usar uma cor plana ou branca aqui.
Em seguida, o próprio corpo do modelo usa a cor de fundo pálida.
Então, insira o código SCSS apropriado em seu estilo iniciar
arquivo SCSS para habilitar isso para funcionar para o modelo de reserva do cabeçalho e o corpo, para que
você possa ver que a mesma cor escura de fundo é aplicada ao cabeçalho e
a cor pálida do plano de fundo é aplicada ao corpo do seu modelo.
E ao concluir esta tarefa,
você pode querer fazer um bom comentário para salvar suas alterações com a atribuição de mensagem quatro.