buenodc

Exercícios para: i) manipulação de rotas; ii) exibição de dados na visão para tipos simples e objetos e iii) condicionais na visão.

Mostrar lista de produtos

Mostrar detalhes de um produto

Essa rota deverá exibir uma página que mostra informações de um produto apenas. Para isso:

Tabela de produtos

Essa página deverá exibir uma tabela HTML com 5 produtos e suas respectivas informações. Para isso:

Sortear número do dado

A partir dos códigos disponibilizados abaixo e o que você já produziu em exercícios anteriores crie uma página que realiza o sorteio de um número do dado e mostre a respectiva face do dado.

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Sorteio</title>
7
  </head>
8
  <body>
9
    <main>
10
      <h1>O número sorteado foi:</h1>
11
      <div class="faces">
12
        <!--FACE 1-->
13
        <div class="dado face1">
14
          <span class="ponto"></span>
15
        </div>
16
        <!--FACE 2-->
17
        <div class="dado face2">
18
          <span class="ponto"></span>
19
          <span class="ponto"></span>
20
        </div>
21
        <!--FACE 3-->
22
        <div class="dado face3">
23
          <span class="ponto"></span>
24
          <span class="ponto"></span>
25
          <span class="ponto"></span>
26
        </div>
27
        <!--FACE 4-->
28
        <div class="dado face4">
29
          <div class="coluna">
30
            <span class="ponto"></span>
31
            <span class="ponto"></span>
32
          </div>
33
          <div class="coluna">
34
            <span class="ponto"></span>
35
            <span class="ponto"></span>
36
          </div>
37
        </div>
38
        <!--FACE 5-->
39
        <div class="dado face5">
40
          <div class="coluna">
41
            <span class="ponto"></span>
42
            <span class="ponto"></span>
43
          </div>
44
          <div class="coluna">
45
            <span class="ponto"></span>
46
          </div>
47
          <div class="coluna">
48
            <span class="ponto"></span>
49
            <span class="ponto"></span>
50
          </div>
51
        </div>
52
        <!--FACE 6-->
53
        <div class="dado face6">
54
          <div class="coluna">
55
            <span class="ponto"></span>
56
            <span class="ponto"></span>
57
            <span class="ponto"></span>
58
          </div>
59
          <div class="coluna">
60
            <span class="ponto"></span>
61
            <span class="ponto"></span>
62
            <span class="ponto"></span>
63
          </div>
64
        </div>
65
      </div>
66
      <a href="">SORTEAR NOVAMENTE</a>
67
    </main>
68
  </body>
69
</html>

1
body {
2
  font-family: Arial, Helvetica, sans-serif;
3
}
4

5
main {
6
  text-align: center;
7
}
8

9
.faces {
10
  display: flex;
11
  flex-wrap: wrap;
12
}
13

14
.dado {
15
  padding: 1rem;
16
  background-color: #e7e7e7;
17
  width: 120px;
18
  height: 120px;
19
  border-radius: 10%;
20
  margin: 1rem;
21
  box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7,
22
    inset -5px 0 #d7d7d7;
23
}
24

25
.ponto {
26
  display: block;
27
  width: 24px;
28
  height: 24px;
29
  background-color: #333;
30
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
31
  border-radius: 100%;
32
}
33

34
.face1 {
35
  display: flex;
36
  justify-content: center;
37
  align-items: center;
38
}
39

40
.face2 {
41
  display: flex;
42
  justify-content: space-between;
43
}
44

45
.face2 .ponto:nth-of-type(2) {
46
  align-self: flex-end;
47
}
48

49
.face3 {
50
  display: flex;
51
  justify-content: space-between;
52
}
53

54
.face3 .ponto:nth-of-type(2) {
55
  align-self: center;
56
}
57

58
.face3 .ponto:nth-of-type(3) {
59
  align-self: flex-end;
60
}
61

62
.face4 {
63
  display: flex;
64
  justify-content: space-between;
65
}
66

67
.face5 {
68
  display: flex;
69
  justify-content: space-between;
70
}
71

72
.face5 .coluna:nth-of-type(2) {
73
  flex-direction: row;
74
  align-items: center;
75
}
76

77
.face6 {
78
  display: flex;
79
  justify-content: space-between;
80
}
81

82
.face4 .coluna,
83
.face6 .coluna,
84
.face5 .coluna {
85
  display: flex;
86
  flex-direction: column;
87
  justify-content: space-between;
88
}