1

Mini sistema de cadastro de pets (acesso através do localStorage) parte4

#HTML #JavaScript #CSS
Fernanda Oliveira
Fernanda Oliveira
#meuPrimeiroProjeto
#parte4 - Construção do layout (cadastro.html)

Oii gente!!
Nesse artigo vamos tratar da página de cadastro do nosso sistema.
Veja a imagem do layout nesse link:
https://postimg.cc/vxHtCbNN

O desenvolvimento dessa página é similar ao da index.html pelo fato da estrutura ser a mesma, mas o que for diferente vou comentando.
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sistema Reformulado de PetShop do Prof Caio Delgado na Digital Innovation One</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>


Adicionando as informações:

1ª parte - Cabeçalho (não houve mudanças)

<body>

  <div class="geral">

    <header>
      <div class="logo">
        <a href="index.html"><img src="images/logo.jpg"></a>
      </div>

      <nav>
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="cadastro.html">Cadastrar</a></li>
          <li><a href="consultar.html">Consultar</a></li>
        </ul>
      </nav>
    </header>

(continua abaixo)


2ª parte - Conteúdo principal do nosso site

Na div que vai conter a imagem dos pets, dei um nome diferente para a classe (image-cadastro) para estilizar as dimensões dela, pois as imagem dessa div não tem um tamanho padronizado. Por isso foi necessário a estilização individual de cada uma.

Temos nosso formulário dentro da div cadastro-content. Foi criado o label com a informação do que deve ser preenchido o campo abaixo, o input, e este recebeu o atributo type onde o seu valor será do tipo texto, pois é esse que iremos utilizar (a princípio o valor do type na idade também será texto).  

Os id's de cada input servirão de parâmetros para a função preenchimentoCampos que criei dentro do evento onClick.

O placeholder não é obrigatório, mas coloquei pra deixar nosso formulário mais bonitinho rs.
(seções iniciais acima)

    <!-- Conteúdo principal do site -->
    <main>
      <div class="wrapper">

        <!-- Imagem -->
        <div class="pet-image image-cadastro">
          <img src="images/12.png">
        </div>
        
        <!-- Conteúdo de interação -->
        <div class="cadastro-content">        
          <h1>Cadastro de Pets</h1>
          <div class="bg-form">

            <form action="#">
              <div>
                  <label>Nº do Registro:</label>
                  <input type="text" id="registroPet" placeholder="Ex: 01" />
              </div>
              <div>
                  <label>Nome:</label>
                  <input type="text" id="nomePet" placeholder="Insira o nome" />
              </div>
              <div>
                  <label>Tipo:</label>
                  <input type="text" id="tipoPet" placeholder="Ex: cão, gato, peixe, ..." />
              </div>
              <div>
                  <label>Idade:</label>
                  <input type="text" id="idadePet" placeholder="Ex: 1 ano" />
              </div>


              <div id="btn-envio">
                <input type="button" value="Cadastrar" class="" onclick="preenchimentoCampos('registroPet', 'nomePet', 'tipoPet', 'idadePet')">
                <input type="reset" id="cancelar" class="" value="Cancelar"/>
              </div>
            </form>

          </div>
        </div>
      </div>
      <!-- /wrapper -->

    </main>
  </div>
  <!-- /geral -->


  <!-- Scripts -->
  <script src="js/script.js"></script>
  <script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>



</body>
</html>

Como prometido no artigo anterior, segue URL no gitHub para baixar esse projetinho - até onde estamos - caso queira baixar e ir acompanhando também.
https://github.com/fegoncalves/petshop-sistem

Se quiser o formulário simples, pode vê-lo e copiar aqui pelo codePen:
https://codepen.io/fegoncalves/pen/gOwRQBq


Quer acompanhar esse projeto desde início? Acesse os endereços:
Mini sistema de cadastro de pets (acesso através do localStorage)

Parte 3 - Construção do layout (index.html)
https://bityli.com/RgjWK

Parte 2 - Estrutura básica do nosso HTML
https://bityli.com/3ibcb

Parte 1 - Introdução
https://bityli.com/mIkjd

Espero que estejam gostando, mas principalmente ajudando a quem estiver começando.
Até a próxima!
2
42

Comentários (2)

0
Fernanda Oliveira

Fernanda Oliveira

04/01/2021 13:16

Oi Claudinei, fico grata rs

1
Claudinei Nobrega

Claudinei Nobrega

01/01/2021 21:16

Olá Fernanda.


Parabéns pelo projeto !!!

Futura dev full stack <3

Brasil