Esta é uma solução para o desafio de gerador de conselhos do Frontend Mentor.
Os usuários devem ser capazes de:
- Visualizar o layout ideal para o aplicativo, dependendo do tamanho da tela de seus dispositivos;
- Ver estados de hover para todos os elementos interativos na página;
- Gerar um novo conselho clicando no ícone de dado.
Durante o desenvolvimento deste projeto, enfrentei alguns desafios, especialmente na estruturação do componente dice. A codificação geral foi tranquila, mas precisei revisar as propriedades de margin para garantir que o layout estivesse alinhado com o design desejado. Além disso, percebi que era necessário adicionar padding ao cartão para que os elementos se ajustassem de maneira otimizada.
Ao trabalhar na barra divisora, me confundi bastante, especialmente ao tentar utilizar o elemento <picture>. Inicialmente, ele não funcionava como esperado, mas após revisar os padrões necessários, consegui resolver o problema. Isso me ajudou a entender melhor a importância de seguir certas boas práticas no desenvolvimento.
Em relação ao componente dice, tive uma pequena confusão na fórmula final sobre a melhor maneira de implementá-lo. Após várias tentativas, percebi que poderia simplificar a implementação ao colocar o dado dentro de um botão no HTML, o que tornou o código mais prático e funcional.