Exercícios 2: rotas, objetos e condicionais na visão

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

A ideia dessa página é mostrar uma lista com 5 produtos. Para isso:

Crie uma nova classe controladora chamada ProductController.java;
Crie um novo método chamado list e mapeie esse método para uma rota também chamada list;
Dentro do método crie 5 variáveis do tipo String com 5 nomes de produtos de sua escolha;
Crie uma visão chamada list.html;
Envie os 5 nomes de produtos do controlador para a visão que acabou de criar;
Na visão, crie uma lista não ordenada com os cinco produtos recebidos do controlador;
Teste a aplicação em http://localhost:8080/list

Mostrar detalhes de um produto

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

Crie um novo método no controlador ProductController chamado show;
Mapeie uma rota /show para o método recém criado;
Crie um classe chamada Product com pelo menos: um nome, uma descrição e um preço;
No método show, crie um objeto Product com informações sobre um produto qualquer;
Mande esse produto recém criado para uma visão chamada show;
Na visão exiba as 3 informações do produto (nome, descrição e preço)
Teste a aplicação em http://localhost:8080/show

Tabela de produtos

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

Crie um novo método no controlador ProductController chamado table
Mapeie uma rota /table para o método recém criado
Crie 5 objetos do tipo Product com pelo menos, um nome, uma descrição e um preço
Mande os 5 objetos para uma visão chamada table
Crie uma visão chamada table, nela crie uma tabela que mostra os 5 produtos e suas respectivas informações
Teste a aplicação em http://localhost:8080/table

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.

Crie um novo controller chamado GameController.java;
Crie um novo método chamado dice e mapeie esse método para uma rota chamada dice;
Dentro do método utilize a classe Random para gerar um número aleatório de 1 a 5. O método nextInt() pode receber um número que será utilizado como valor final para geração. Por exemplo, se você passar o valor 10 para o método nextInt(10), isso significa que o número gerado será de 0 a 9;
Crie uma nova visão chamada dice e utilize o código HTML e CSS mostrado abaixo para ilustrar as faces do dado;
Passe o número sorteado para a visão e exiba somente a face correspondente ao número sorteado;
Preencha o link com a URL para a realização de um novo sorteio;
Teste a aplicação

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sorteio</title>
  </head>
  <body>
    <main>
      <h1>O número sorteado foi:</h1>
      <div class="faces">
        <!--FACE 1-->
        <div class="dado face1">
          <span class="ponto"></span>
        </div>
        <!--FACE 2-->
        <div class="dado face2">
          <span class="ponto"></span>
          <span class="ponto"></span>
        </div>
        <!--FACE 3-->
        <div class="dado face3">
          <span class="ponto"></span>
          <span class="ponto"></span>
          <span class="ponto"></span>
        </div>
        <!--FACE 4-->
        <div class="dado face4">
          <div class="coluna">
            <span class="ponto"></span>
            <span class="ponto"></span>
          </div>
          <div class="coluna">
            <span class="ponto"></span>
            <span class="ponto"></span>
          </div>
        </div>
        <!--FACE 5-->
        <div class="dado face5">
          <div class="coluna">
            <span class="ponto"></span>
            <span class="ponto"></span>
          </div>
          <div class="coluna">
            <span class="ponto"></span>
          </div>
          <div class="coluna">
            <span class="ponto"></span>
            <span class="ponto"></span>
          </div>
        </div>
        <!--FACE 6-->
        <div class="dado face6">
          <div class="coluna">
            <span class="ponto"></span>
            <span class="ponto"></span>
            <span class="ponto"></span>
          </div>
          <div class="coluna">
            <span class="ponto"></span>
            <span class="ponto"></span>
            <span class="ponto"></span>
          </div>
        </div>
      </div>
      <a href="">SORTEAR NOVAMENTE</a>
    </main>
  </body>
</html>

body {
  font-family: Arial, Helvetica, sans-serif;
}

main {
  text-align: center;
}

.faces {
  display: flex;
  flex-wrap: wrap;
}

.dado {
  padding: 1rem;
  background-color: #e7e7e7;
  width: 120px;
  height: 120px;
  border-radius: 10%;
  margin: 1rem;
  box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;
}

.ponto {
  display: block;
  width: 24px;
  height: 24px;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
  border-radius: 100%;
}

.face1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.face2 {
  display: flex;
  justify-content: space-between;
}

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

.face3 {
  display: flex;
  justify-content: space-between;
}

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

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

.face4 {
  display: flex;
  justify-content: space-between;
}

.face5 {
  display: flex;
  justify-content: space-between;
}

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

.face6 {
  display: flex;
  justify-content: space-between;
}

.face4 .coluna,
.face6 .coluna,
.face5 .coluna {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}