1
00:00:03,560 --> 00:00:08,385
Chegamos à tarefa final deste curso.

2
00:00:08,385 --> 00:00:10,255
Nesta quarta tarefa,

3
00:00:10,255 --> 00:00:13,185
você vai trabalhar com bootstraps,

4
00:00:13,185 --> 00:00:19,075
suporte jQuery e também um pouco de Sass.

5
00:00:19,075 --> 00:00:23,910
Esta tarefa consiste em quatro tarefas.

6
00:00:23,910 --> 00:00:28,370
Sua primeira tarefa seria remover todos os

7
00:00:28,370 --> 00:00:36,120
atributos de dados do link de login aqui e da reserva de tabelas aqui.

8
00:00:36,120 --> 00:00:38,910
Agora, nesta atribuição,

9
00:00:38,910 --> 00:00:43,285
vamos acionar os modelos usando código JavaScript.

10
00:00:43,285 --> 00:00:44,915
Então, para fazer isso,

11
00:00:44,915 --> 00:00:46,990
primeiro removeremos os atributos de dados,

12
00:00:46,990 --> 00:00:54,895
tanto do modelo de reserva quanto do modelo de login como nossa primeira tarefa nesta atribuição.

13
00:00:54,895 --> 00:00:59,470
Sua segunda tarefa é adicionar

14
00:00:59,470 --> 00:01:07,050
código JavaScript apropriado usando os métodos models,

15
00:01:07,050 --> 00:01:08,985
métodos JavaScript que estão disponíveis, de

16
00:01:08,985 --> 00:01:13,300
modo que quando o padrão de tabela de reserva é clicado,

17
00:01:13,300 --> 00:01:18,375
então o modelo de reserva correspondente será exibido como visto aqui.

18
00:01:18,375 --> 00:01:23,250
Então, vemos que essa exibição e ocultação do modelo

19
00:01:23,250 --> 00:01:28,800
é acionada completamente usando os métodos JavaScript desse modelo.

20
00:01:28,800 --> 00:01:33,185
Sua terceira tarefa seria, novamente,

21
00:01:33,185 --> 00:01:42,985
inserir o código apropriado no script de forma que quando você clicar no link de login aqui,

22
00:01:42,985 --> 00:01:45,805
o modelo de login será exibido.

23
00:01:45,805 --> 00:01:47,995
Agora, para que isso funcione,

24
00:01:47,995 --> 00:01:52,140
você precisa dar IDs apropriados tanto para o botão de tabela de reserva quanto para

25
00:01:52,140 --> 00:01:57,850
o link de login, de modo que eles possam ser referenciados em seu código JavaScript.

26
00:01:57,850 --> 00:02:00,085
Então, isso é uma dica para você,

27
00:02:00,085 --> 00:02:05,590
como você pode ir em frente e prosseguir com a implementação deste.

28
00:02:05,590 --> 00:02:12,955
O uso dos métodos JavaScript deve ser bastante simples.

29
00:02:12,955 --> 00:02:17,669
O link para a documentação de bootstrap que descreve

30
00:02:17,669 --> 00:02:19,840
os métodos JavaScript está disponível

31
00:02:19,840 --> 00:02:24,120
na seção de recursos adicionais desta atribuição.

32
00:02:24,120 --> 00:02:29,700
Como você já deve ter percebido que esses modelos agora parecem muito mais coloridos.

33
00:02:29,700 --> 00:02:32,435
Então aqui está o modelo de tabela de reserva,

34
00:02:32,435 --> 00:02:34,590
e aqui está o modelo de login.

35
00:02:34,590 --> 00:02:40,620
Então, como parte da quarta tarefa desta atribuição,

36
00:02:40,620 --> 00:02:46,235
você vai adicionar em algum código SCSS nos estilos iniciar arquivo SCSS, de

37
00:02:46,235 --> 00:02:50,115
modo que as cores são adequadamente definidas.

38
00:02:50,115 --> 00:02:53,500
Então, aqui, você vê que esse cabeçalho do modelo tem

39
00:02:53,500 --> 00:03:00,940
a cor escura de fundo definida e o texto aqui é exibido na cor branca.

40
00:03:00,940 --> 00:03:05,700
E também, esta classe particular

41
00:03:05,700 --> 00:03:11,850
usando uma classe aninhada aqui em seu código SCSS,

42
00:03:11,850 --> 00:03:17,160
você pode definir isso também para usar uma cor plana ou branca aqui.

43
00:03:17,160 --> 00:03:26,135
Em seguida, o próprio corpo do modelo usa a cor de fundo pálida.

44
00:03:26,135 --> 00:03:30,620
Então, insira o código SCSS apropriado em seu estilo iniciar

45
00:03:30,620 --> 00:03:36,710
arquivo SCSS para habilitar isso para funcionar para o modelo de reserva do cabeçalho e o corpo, para que

46
00:03:36,710 --> 00:03:42,005
você possa ver que a mesma cor escura de fundo é aplicada ao cabeçalho e

47
00:03:42,005 --> 00:03:48,435
a cor pálida do plano de fundo é aplicada ao corpo do seu modelo.

48
00:03:48,435 --> 00:03:51,450
E ao concluir esta tarefa,

49
00:03:51,450 --> 00:03:59,370
você pode querer fazer um bom comentário para salvar suas alterações com a atribuição de mensagem quatro.