Frontend Mentor - Solução de Componente de Visualização de Artigo (Article Preview Component)

Esta é a minha solução para o desafio "Article preview component" do Frontend Mentor. Os desafios do Frontend Mentor ajudam você a aprimorar suas habilidades de codificação construindo projetos realistas.

Visão Geral

O Desafio

Os usuários devem ser capazes de:

• Visualizar o layout ideal para o componente dependendo do tamanho da tela do dispositivo (responsividade completa).
• Visualizar os links de compartilhamento em redes sociais ao clicar no ícone de compartilhamento.
• Funcionalidade Extra (Bônus): Fechar o menu de compartilhamento automaticamente ao clicar em qualquer lugar fora do balão flutuante (tooltip) no desktop ou do botão de compartilhar.

Captura de Tela

Links

• Código no GitHub: Visualizar Repositório
• Site Online (Live Preview): Acessar Projeto

---

Meu Processo

Tecnologias Utilizadas

• HTML5 Semântico
• Variáveis CSS (Custom Properties)
• Flexbox
• Fluxo de desenvolvimento Mobile-first
• Vanilla JavaScript (Manipulação de DOM e manipulação de eventos)

---

O que eu aprendi neste projeto

Durante este projeto, aprofundei meus conhecimentos sobre como as imagens se comportam dentro de containers flexíveis no CSS e como funciona a propagação de eventos (event bubbling) no JavaScript.

No CSS, enfrentei um bom desafio no layout de desktop para fazer com que a imagem do artigo escalasse e preenchesse o espaço corretamente sem distorcer.

No JavaScript, implementei um recurso robusto de "Clique Fora" (Click Outside) para melhorar a experiência do usuário. Aprendi a monitorar cliques globais no documento usando o método .contains() para verificar se a ação do usuário ocorreu fora dos limites dos componentes ativos:

document.addEventListener("click", (event) => {
  if (!shareContainer.classList.contains("hidden")) {
    if (
      !shareContainer.contains(event.target) &&
      !buttonShare.contains(event.target)
    ) {
      shareContainer.classList.add("hidden");
      buttonShare.classList.remove("active");
    }
  }
});

---

Próximos passos

Nos próximos projetos, pretendo focar em:

• Posicionamento CSS avançado (alinhamentos com absolute e relative em tooltips complexas).
• Refatoração de ouvintes de eventos globais (event listeners) no JavaScript para otimizar a performance.
• Escrita de classes utilitárias mais limpas e modulares para animações em CSS.

---

Colaboração com IA (Gemini)

Colaborei com o Gemini durante as etapas de depuração e refinamento deste projeto.

• Como utilizei: Discussão de correções de alinhamento estrutural para a transição de layout entre celular e computador, e resolução de conflitos de lógica de classes ativas nos scripts de alternância (toggle).
• O que funcionou bem: O assistente identificou com precisão os pontos de quebra do layout com base em análises de comportamento do Chrome DevTools, poupando tempo na investigação de transbordamentos (overflow) de CSS. Também ajudou a estruturar o código limpo para a validação do evento de clique fora do componente.

---

Autor

• Frontend Mentor - @mnyellison
• GitHub - @mnyellison