Cris Augusto
@Cristhyam-AugustoAll comments
- @larisn@Cristhyam-Augusto
Ola Larissa, tudo bem? Parabéns por concluir o desafio, a solução ficou realmente bem parecida. 🎉🎉 Se você me permite, gostaria de pontuar algumas melhorias para essa solução:
- Ao inves de utilizar display block, absolute, relative e outros para posicionar os elementos da maneira que deseja, você pode utilizar display:flex e alinhar os elementos de forma flexivel dentro de uma box que vai se ajustar dependendo do tamanho da tela.
- Ademais, notei que você utiliza margem para gerar espaço entre os elementos, você pode substituir esse tipo e atividade pela propriedade gap, juntamente com o display flex.
- Para centralizar o seu container principal no meio da tela, você pode utilizar as seguintes propriedades:
body { display: flex; align-items: center; justify-content: center; height: 100vh; }
- Por fim, caso você se interesse em aprender mais sobre padrões de projeto no css, recomendo a leitura sobre ITCSS, SMACSS ou/e BEM.
Parabéns novamente pela solução, qualquer dúvida pode me chamar. Caso meus comentários tenham sido útels, não esqueça de marcar como útil. Happy Coding! 😊
- @rockdoginafog@Cristhyam-Augusto
Congratulations for the work and for the interest in modifying the layout to make it more beautiful. 👏👏
Keep coding, happy coding. 💪
- @JcCaldas@Cristhyam-Augusto
Hello @JcCaldas, how are you? Congratulations for the work, it turned out very well. I noticed that you used a javascript function to change the color of items when hovering the mouse (mouseover), however, you can do this with just css
.item:hover { background color: hsl(25, 97%, 53%); color: hsl(0, 0%, 100%); }
The same goes for the submit button. I hope the feedback was helpful, please don't hesitate to MARKED AS HELPFUL, thanks. Happing coding.
Marked as helpful - @furkankucukkiris@Cristhyam-Augusto
Hi Furka how are you?? Congratulations on the design, it was really identical. I did a project like this yesterday, and I got some feedback that might be useful for you too: I noticed that I can send a review even without filling in the value, so you can change the code as below to avoid this.
rate.addEventListener("click", () => { rate.style.backgroundColor = "grey"; rate.style.color = "white"; rating.innerHTML = rate.innerHTML; submitButton.addEventListener("click", () => { mainContainer.style.display = "none"; thanksContainer.style.display = "flex"; }); }); });
I also noticed that in the html you used ID and class references for the LI, but I don't think that's necessary, because you used only classes in css. In general I think that's it, congratulations on the work, it was really good.