1

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

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

Veremos então a construção da última página do projeto.  
Veja a imagem do layout nesse link:
https://postimg.cc/NLp4m2yq


Uma questão diferente das demais é que eu acrescentei uma id no body para deixá-lo com a barra de rolagem do navegador automática e visível, caso algum usuário venha cadastrar um número de pets que ultrapasse o tamanho da tela - uma vez que as outras páginas foram estilizadas para ocupar 100% da tela do dispositivo e a barra fica oculta - mas isso poderá ser visto melhor no próximo artigo.

Outra questão é sobre o script; aqui, ele precisa ser executado antes da página ser carregada, pois o conteúdo da consulta (que é uma lista) só ficará visível quando for chamado pela função listarCadastros(); e por esse motivo ele foi inserido dentro do head e não antes da tag de fechamento do body.
A primeira vez que for utilizada o formulário, a página exibirá uma mensagem dizendo que ainda não foi feito nenhum cadastro.

Como o conteúdo ficou bem resumido, dessa vez vou dispor a estrutura do nosso HTML sem divisões:  

<!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">
  <script src="js/script.js"></script>
</head>

 <body id="vertical">

  <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>


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

        <!-- Imagem -->
        <div class="pet-image image-consultar">
          <img src="images/8.png">
        </div>


        <!-- Conteúdo de interação -->
        <div id="consulta-content">
          <script>listarCadastros();</script>
        </div>

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

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

</body>
</html>


GitHub do projetinho:
https://github.com/fegoncalves/petshop-sistem

Se quiser o formulário simples, pode vê-lo e copiar aqui no 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 4 - Construção do layout (consulta.html)
https://bityli.com/Ow8tU

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


No próximo artigo irei trazer o estilo das páginas.
Até+
2
32

Comentários (2)

0
Fernanda Oliveira

Fernanda Oliveira

04/01/2021 13:15

Obrigada Vitor <3 ... Ahh eu acho que te achei lá no gitHub !!

1
V

Vitor Silva

01/01/2021 16:15

Vc já é PRO. Gosto muito do seu trabalho! ^^

Futura dev full stack <3

Brasil