Posting Page

Uma aplicação web simples e elegante para criação e publicação de posts, com integração à API JSONPlaceholder. Este projeto simula a funcionalidade de criação de posts semelhante a redes sociais como Facebook e LinkedIn.

✨ Funcionalidades

• ✏️ Criação de posts com título e conteúdo
• 🔌 Integração com API REST (JSONPlaceholder)
• 👁️ Preview em tempo real do post
• ✅ Feedback visual de sucesso/erro
• 📱 Design responsivo e adaptável
• ♿ Acessibilidade com atributos ARIA
• 🎨 Interface moderna com gradientes e animações

Tecnologias Utilizadas

• HTML5 - Estrutura semântica
• CSS3 - Estilização e responsividade
• JavaScript (ES6+) - Lógica e integração com API
• Fetch API - Requisições HTTP
• JSONPlaceholder - API REST para testes

Como Executar

Opção 1: Live Server (Recomendado)

1. Clone ou baixe este repositório:

git clone https://github.com/flaviare1s/posting--page.git
cd posting--page

2. Abra o projeto no Visual Studio Code

3. Instale a extensão Live Server (se ainda não tiver)

4. Clique com botão direito no arquivo index.html

5. Selecione "Open with Live Server"

Opção 2: Abrir Diretamente no Navegador

1. Navegue até a pasta do projeto

2. Dê duplo clique no arquivo index.html

3. O projeto abrirá no seu navegador padrão

Estrutura do Projeto

posting--page/
│
├── index.html          # Estrutura HTML da página
├── style.css           # Estilos e layout
├── main.js             # Lógica JavaScript e integração com API
└── README.md           # Documentação do projeto

Como Usar

1. Digite o Título: Insira o título do seu post no primeiro campo

2. Escreva o Conteúdo: Digite o conteúdo do post na área de texto

3. Publique: Clique no botão "Publicar Post"

4. Visualize: Veja o preview do seu post no card à direita

5. Confirmação: Uma mensagem de sucesso aparecerá com o ID do post criado

Integração com API

A aplicação utiliza a API JSONPlaceholder para simular requisições POST:

• URL: https://jsonplaceholder.typicode.com/posts
• Método: POST
• Headers: Content-type: application/json; charset=UTF-8
• Body: Objeto JSON com title, body e userId

Exemplo de Requisição:

const data = {
  title: "Meu Título",
  body: "Meu conteúdo",
  userId: 1,
};

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
});

Características de Design

• Gradiente moderno em tons de laranja
• Cards com sombras suaves
• Animações suaves nos botões
• Layout responsivo para mobile
• Tipografia limpa e legível
• Feedback visual para interações

Funcionalidades Extras Implementadas

• Preview em Tempo Real: Visualize o post enquanto digita
• Validação de Campos: Previne envio de campos vazios
• Feedback de Status: Mensagens de sucesso, erro e carregamento
• Limpeza Automática: Formulário é resetado após publicação bem-sucedida
• Console Logging: Logs para debug e acompanhamento

Responsividade

O projeto é totalmente responsivo e se adapta a diferentes tamanhos de tela:

• Desktop: Layout em duas colunas
• Tablet/Mobile: Layout em uma coluna empilhada

Tratamento de Erros

A aplicação possui tratamento de erros para:

• Falhas na requisição à API
• Campos vazios
• Problemas de conexão
• Respostas inválidas

📚 Aprendizados e Conceitos Aplicados

Este projeto foi desenvolvido como parte do projeto de certificação da trilha 2 do curso da DEVstart, aplicando conceitos fundamentais de desenvolvimento web:

• Manipulação do DOM: Seleção e modificação de elementos HTML
• Event Listeners: Captura e tratamento de eventos do usuário
• Async/Await: Requisições assíncronas modernas
• Fetch API: Integração com APIs REST
• ES6+ Features: Arrow functions, template literals, destructuring
• CSS Grid & Flexbox: Layout responsivo moderno
• Boas Práticas: Código limpo, semântico e acessível

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou enviar pull requests.

Deploy

https://flaviare1s.github.io/posting--page/

📝 Licença

Este projeto é de código aberto e está disponível sob a licença MIT.

👤 Autor

Flavio Reis

• GitHub: @flaviare1s

---

⭐ Se este projeto foi útil para você, considere dar uma estrela!

🌐 English Version