Giter VIP home page Giter VIP logo

siteconsultarcep's Introduction

Site para Consultar CEP

Este é um projeto simples de consulta de CEP que permite aos usuários encontrar informações sobre endereços a partir de um CEP.

Layout Final do Projeto:

Visão da Página inicial

Vídeo de Apresentação e Link de Acesso ao Projeto

  • Você pode acessar o projeto aqui.

  • Assista a um vídeo de apresentação do projeto no LinkedIn aqui.

Funcionalidades

  • Consulta de CEP via formulário.
  • Apresentação das informações de rua, bairro, cidade e estado associadas ao CEP.
  • Validação do CEP antes de efetuar a consulta.

Tecnologias Usadas

  • HTML5
  • CSS3
  • JavaScript
  • API CEP Link

Instalação

Para começar a usar este projeto, siga os passos abaixo:

  1. Clone o repositório para o seu computador local usando o seguinte comando no seu terminal:
  • git clone https://github.com/tiagosfneves/siteConsultarCEP.git
  1. Ou se preferir pode baixar o zip:
  • Clique no botão CODE no cabeçalho desta página
  • Deposi clique em Download ZIP

Pré-requisitos

  • Navegador da web com suporte a JavaScript.

Uso

  1. Abra o arquivo index.html no seu navegador.
  2. Insira o CEP desejado no campo de entrada.
  3. Clique no botão "Pesquisar" ou pressione a tecla "Enter" no seu teclado.
  4. As informações do endereço associado ao CEP serão exibidas abaixo do formulário, se disponíveis.
  5. Se o CEP não for encontrado, uma mensagem de erro será exibida.

Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para abrir uma issue ou enviar um pull request para melhorar este projeto.

Contato com Autor

Tiago Neves | Desevolvedor Full Stack


Este Projeto teve início em 2022 no curso de Front End no Senai-SP.

Controle de Versões

Clique na versão para ver os detalhes e links!

Versão 1.0.0 (18-03-2023) ...Criação do Projeto

Criação do Projeto

JavaScript

  • Consumo de API CEP
  • Resposta da consulta:
    • Rua

CSS

  • Estilo básico (sem responsividade)

HTML

  • Marcações básicas (Sem Semântica)

README

  • Texto: Repositório Front End
  • Imagem do Layout

Detalhes adicionais

Versão 1.1.0 (19-09-2023) ...HTML Semântico e UI/UX

Refatoração, Boas Práticas, HTML Semântico e UI/UX

JavaScript

  • Incluindo Evento botão "Enter" além do "clique"
  • Incluindo Formulário de resposta com os campos:
    • Logradouro
    • Bairro
    • Cidade
    • Estado

CSS

  • Ajustes pontuais:
    • Formulário
    • imagem
  • Inclusão:
    • Footer
    • Copyright

HTML

  • Correções no texto
  • Inclusão HTML Semântico:
    • Header
    • Main
    • Footer

README

  • Atualização da imagem do Novo Layout
  • Adicionando topicos ao REDAME.md
    • Funcionalidades
    • Tecnologias usadas
    • Instalação
    • Pré-requisitos
    • Uso
    • Contribuição
    • Autor
    • Contato

Detalhes adicionais

Versão 1.2.0 (28-09-2023) ...Deploy, UI/UX e Tratativas de Erros

Refatoração, Boas Práticas, UI/UX e Tratativas de Erros

Deploy

JavaScript

  • Código mais moderno usando try catch
  • Validações dos Campos
  • Tratativas de Erros

CSS

  • Responsivo para celulares e tablets
  • Ajustes pontuais: Formulário, margin, padding...
  • Formulário "Mensagens de erros"
  • Formulário "Mensagens de sucesso"

HTML

  • Eliminando redundância "Consultar CEP" > "Informar CEP"
  • Atualização de placeholder "Ex: 06600-600" > "02200-100"
  • Adicionando Favicon personalizado

README

  • Atualização de imagem do Novo Layout
  • Atualização de texto geral

Detalhes adicionais

Versão 1.3.0 (29-09-2023) ...Temas Escuro e Claro

Refatoração, Boas Práticas e Temas Escuro e Claro

JavaScript

  • Separação de Modulos
    • cep.js
    • theme.js

CSS

  • Separação de Estilos
    • styles.css
    • medias.css
    • theme.css

HTML

  • Adicionando pastas
    • img: Logo
    • icons: icones tema

README

  • Atualização de imagem do Layout (Theme Dark e Light)
  • Atualização de texto geral
  • Inclusão do tópico "Controle de Versões"

Detalhes adicionais

siteconsultarcep's People

Contributors

tiagosfneves avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.