Frontend Mentor - Multi-step form solution

Esta é uma solução para o desafio do Multi-step form no Frontend Mentor. Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação construindo projetos realistas.

Sumário

• Visão Geral
  • O desafio
  • Links
  • Funcionalidades implementadas
• Meu processo
  • Tecnologias utilizadas
  • O que eu aprendi
• Autor

Visão Geral

O desafio

O objetivo do projeto é construir este formulário de múltiplas etapas e deixá-lo o mais próximo possível do design proposto, garantindo uma experiência fluida tanto em computadores quanto em dispositivos móveis.

Os usuários devem ser capazes de:

• Concluir cada etapa da sequência lógica do formulário.
• Voltar para uma etapa anterior para atualizar suas seleções de planos ou add-ons.
• Ver um resumo detalhado de suas escolhas na etapa final e confirmar o pedido.
• Visualizar o layout perfeitamente otimizado para qualquer tamanho de tela (Mobile First).
• Interagir com elementos da página visualizando estados de hover, focus e transições suaves.

Links

• Código no GitHub: https://github.com/danilo-guimaraes/multi-step-form
• Site ao vivo (Live Preview): https://danilo-guimaraes.github.io/multi-step-form/

Funcionalidades implementadas

• Layout Fluido com Tailwind v4: Estruturação 100% responsiva que transforma a barra lateral desktop em um topo compacto no celular, sem quebras ou vazamento de conteúdo.
• Alternador Inteligente (Mensal/Anual): Um controle centralizado que altera os cards visíveis, atualiza preços e redireciona os botões de navegação dinamicamente.
• Gerenciamento de Foco Dinâmico: Funções em JavaScript que limpam as seleções anteriores e destacam o plano ativo com bordas personalizadas.

Meu processo

Tecnologias utilizadas

• HTML5 – Marcação estrutural e semântica.
• Tailwind CSS v4 – Estilização utilitária avançada, uso de classes flexíveis e grid responsivo.
• Vanilla JavaScript (ES6+) – Controle das etapas, manipulação ativa do DOM e lógica de alternância de faturamento.

O que eu aprendi

Durante o desenvolvimento deste projeto, consegui consolidar conceitos importantes de arquitetura CSS e controle de eventos no JavaScript:

1. Evitar a quebra de layouts no celular: Aprendi a trabalhar com larguras fluidas (w-full) combinadas com limites máximos inteligentes (max-w-md), garantindo que os componentes se ajustem perfeitamente a telas pequenas.
2. Prevenção de Event Bubbling: Entendi como estruturar cliques em botões internos sem disparar funções indesejadas em elementos contêineres que ficam como pais no HTML.
3. Gerenciamento de Estado Limpo: Criação de funções otimizadas que limpam classes dinamicamente com forEach antes de aplicar novos estilos ao elemento focado.

function selecionarPlano(cardClicado) {
    const todosOsCards = document.querySelectorAll('#escolha-mensal > div');
    todosOsCards.forEach(card => {
        card.classList.remove('border-blue-950');
        card.classList.add('border-gray-200');
    });
    cardClicado.classList.remove('border-gray-200');
    cardClicado.classList.add('border-blue-950');
}