web_project_around_pt

🌍 Projeto 8: Around The U.S. (Versão PT) 🚀 Desenvolvimento Web – TripleTen | JavaScript + DOM + Modais + Templates

Este projeto apresenta uma galeria interativa de cartões com fotos, onde o utilizador pode:

Editar o perfil

Adicionar novos cartões

Remover cartões

Curtir cartões

Abrir imagens em tamanho maior

Fechar pop-ups de várias formas (botão, overlay e tecla ESC)

Tudo implementado com JavaScript puro, manipulando diretamente o DOM, aplicando template HTML, e usando uma abordagem modular e clara no código.

✨ Funcionalidades 🧑‍💼 Editar perfil

Atualiza o nome e a descrição diretamente na página

Formulário abre e fecha com modal

Preenchimento automático dos campos com os valores atuais

🖼️ Cartões dinâmicos

Os cartões iniciais são renderizados via JavaScript a partir do array initialCards

Usa a tag

Cada cartão possui:

Imagem

Título

Botão de curtir

Botão de excluir

Clique para abrir modal de imagem grande

➕ Adicionar novos cartões

Formulário no popup “Novo Local”

Cria um cartão no topo da lista com:

Nome inserido

Link da imagem

Fecha automaticamente após criar

❤️ Like nos cartões

Alterna o estado visual do coração ao clicar

Feito via classList.toggle()

🗑️ Excluir cartões

Remove o cartão completamente do DOM

Funciona para cartões iniciais e novos

🔍 Visualização ampliada da imagem

Ao clicar em qualquer imagem do cartão, abre-se um modal com:

Imagem em tamanho maior

Legenda correspondente ao nome do cartão

❌ Fechamento de modais

Botão de fechar (X)

Clicar no overlay (zona escura ao redor)

Tecla ESC

🛠️ Tecnologias utilizadas

HTML5

CSS3 (BEM Methodology)

JavaScript (ES6+)

Manipulação do DOM

Eventos e Forms

Estrutura modular

Template HTML

Git / GitHub Pages

📁 Estrutura do Projeto

. ├── index.html ├── pages/ │ └── index.css ├── scripts/ │ └── index.js ├── blocks/ │ ├── card.css │ ├── cards.css │ ├── popup.css │ ├── profile.css │ ├── header.css │ ├── footer.css │ └── (outros ficheiros BEM) ├── images/ ├── vendor/ │ ├── normalize.css │ └── fonts.css └── README.md

🌍 Projeto 9: Around The World

Este projeto faz parte do curso de Desenvolvimento Web da TripleTen.
O objetivo é implementar funcionalidades interativas usando JavaScript moderno, incluindo:

Validação de formulários com HTML5 + JavaScript
Manipulação do DOM
Criação dinâmica de elementos
Janelas modais acessíveis (pop-ups)
Edição de perfil
Adição e remoção de cartões
Abertura de imagens em tamanho grande

🚀 Funcionalidades Principais

✏️ Editar Perfil

Abre um pop-up que permite alterar o nome e a descrição do utilizador.
Validação ativa dos campos:
- Nome: 2–40 caracteres
- Sobre: 2–200 caracteres
Botão “Salvar” só fica ativo quando todos os campos são válidos.

🖼️ Adicionar Novo Local

Formulário em pop-up onde é possível inserir:
- Título (2–30 caracteres)
- URL da imagem (validada com type="url")
Ao enviar, um novo cartão é adicionado dinamicamente à galeria.
Cada cartão inclui:
- Imagem clicável (abre em pop-up grande)
- Botão para “Curtir”
- Botão para apagar o cartão

🔍 Pop-up de Imagem

Exibe a imagem com proporções corretas.
Fecha ao clicar no overlay ou ao pressionar a tecla Esc.

✔️ Validação Universal

Todos os formulários utilizam uma função de validação universal.
Erros são exibidos abaixo dos campos.
Estado do botão Submit é controlado automaticamente.

🛠️ Tecnologias Utilizadas

HTML5
CSS3 (BEM / Flexbox)
JavaScript (ES6+)
Manipulação do DOM
Validity API do HTML5
Git e GitHub Pages

📁 Estrutura do Projeto

/ ├── index.html ├── pages/ │ └── index.css ├── blocks/ │ └── (arquitetura BEM) ├── images/ ├── scripts/ │ └── index.js └── README.md

🌍 Projecto 10: Around the World

Este projeto faz parte do curso de Desenvolvimento Web da TripleTen e corresponde ao Projeto 10 — Introdução à Programação Orientada a Objetos.

O objetivo principal deste sprint foi refatorar o código existente, aplicando os princípios de Programação Orientada a Objetos (POO) e JavaScript modular, sem alterar o comportamento visual ou funcional da aplicação.

🚀 Funcionalidades

Visualização de uma galeria de cartões com imagens e títulos
Abertura de imagem em pop-up
Curtir e remover cartões
Edição do perfil do utilizador
Adição de novos cartões
Validação de formulários com feedback visual
Fecho de pop-ups através de:
- botão de fechar
- clique no overlay
- tecla Esc

🧠 O que foi feito neste projeto

Neste sprint, toda a funcionalidade já estava implementada.
O foco foi organizar e estruturar o código, aplicando boas práticas de JavaScript moderno.

Principais melhorias:

Refatoração do código para classes ES6
Separação clara de responsabilidades
Modularização do JavaScript
Remoção de código duplicado
Melhoria da legibilidade e manutenção do código

🧱 Estrutura do JavaScript

O código JavaScript foi dividido em módulos, cada um com uma responsabilidade específica:

scripts/ ├── Card.js ├── FormValidator.js ├── utils.js └── index.js

📦 Descrição dos módulos

`Card.js`

Contém a classe Card
Responsável pela criação e funcionamento de cada cartão
Cada cartão é uma instância da classe

`FormValidator.js`

Contém a classe FormValidator
Responsável pela validação dos formulários
Cada formulário possui sua própria instância

`utils.js`

Contém funções utilitárias
Abre e fecha pop-ups
Gerencia eventos de teclado (Esc) e clique no overlay

`index.js`

Arquivo principal
Importa os módulos
Cria instâncias das classes
Conecta eventos e inicializa a aplicação

🛠️ Tecnologias Utilizadas

HTML5
CSS3 (BEM)
JavaScript (ES6+)
Programação Orientada a Objetos
JavaScript Modular
Git e GitHub
Live Server (ambiente de desenvolvimento)

🌐 Executar o projeto localmente

Este projeto utiliza JavaScript Modules, portanto deve ser executado através de um servidor local.

Opção recomendada:

Extensão Live Server no VSCode

Passos:

Instala a extensão Live Server
Abre o projeto no VSCode
Clica com o botão direito no index.html
Seleciona “Open with Live Server”

📌 Aprendizagens principais

Aplicação prática de Programação Orientada a Objetos em JavaScript
Uso de classes, construtores e métodos
Modularização de código com import e export
Separação de responsabilidades
Organização de projetos JavaScript em larga escala

Projeto 11: Around the U.S. (Tripleten)

📌 Descrição

Projeto de refatoração com programação orientada a objetos (POO), implementando classes para popups, formulários, renderização de cartões e informações do usuário.

⚙️ Funcionalidades

Edição de perfil (nome e descrição)
Adição de novos cartões
Visualização de imagem em popup
Fechar popup com: botão (X), clique no overlay e tecla ESC
Validação de formulários

🧱 Tecnologias

HTML5
CSS3 (BEM)
JavaScript (ES6 Modules)
POO (Classes)

🗂️ Estrutura

src/ — arquivos principais do projeto (HTML/CSS/JS/assets)
src/components/ — classes JavaScript (Card, Section, Popup, etc.)
src/pages/ — entry point (index.js) e estilos (index.css)

🚀 Como executar

Clonar o repositório
Abrir src/index.html no navegador

✅ Checklist (Project 11)

Classes criadas: Section, Popup, PopupWithImage, PopupWithForm(s), UserInfo
Cada classe em ficheiro separado
index.js contém apenas criação de instâncias e listeners de UI
Código modular com imports/exports

👤 Autor

Projeto desenvolvido por Pedro Faustino
Curso de Desenvolvimento Web — TripleTen

🔗 GitHub Pages

https://p3drofaustino-lang.github.io/web_project_around_pt/

Projeto 12 — EUA Afora (Around the U.S.)

Este projeto é uma aplicação web interativa onde os usuários podem criar um perfil, adicionar cartões com imagens, curtir/descurtir cartões, excluir cartões próprios e atualizar a foto de perfil.
O projeto utiliza JavaScript orientado a objetos e integra-se com uma API REST para persistência de dados.

🛠️ Tecnologias e Ferramentas Utilizadas

HTML5
CSS3 (BEM)
JavaScript (ES6+, Programação Orientada a Objetos)
API REST
Fetch API
Promise / Promise.all
Validação de formulários (HTML5 + JavaScript)
Git & GitHub
GitHub Pages

📌 Funcionalidades

Carregamento das informações do usuário a partir do servidor
Carregamento inicial dos cartões a partir da API
Edição do perfil do usuário
Atualização da foto de perfil (avatar)
Adição de novos cartões
Exclusão de cartões próprios com confirmação
Curtir e remover curtidas de cartões
Interface reativa com feedback visual (“Salvando…” durante requisições)
Fechamento de pop-ups ao clicar no overlay ou pressionar ESC
Validação de formulários com feedback ao usuário

🧩 Arquitetura do Projeto

O projeto segue uma arquitetura modular baseada em classes:

Api — responsável por todas as requisições ao servidor
Card — criação e gerenciamento dos cartões
Section — renderização de listas de cartões
Popup — classe base para todos os pop-ups
PopupWithForm — pop-ups com formulário
PopupWithImage — visualização de imagens
PopupWithConfirmation — confirmação de exclusão
FormValidator — validação de formulários
UserInfo — gerenciamento das informações do usuário

Todas as requisições ao servidor são centralizadas na classe Api.
O carregamento inicial dos dados utiliza Promise.all() para garantir que os cartões só sejam renderizados após o carregamento das informações do usuário.

🌐 Acesso ao Projeto

🔗 GitHub Pages

https://p3drofaustino-lang.github.io/web_project_around_pt/

📷 Layout e Design

O layout foi desenvolvido com base no design fornecido no Figma pela Tripleten, seguindo princípios de responsividade e usabilidade.

🚀 Status do Projeto

✅ Concluído
✅ Atende a todos os requisitos do Projeto 12 da Tripleten

👤 Autor

Projeto desenvolvido por Pedro Faustino
Curso de Desenvolvedor Web — Tripleten