@Ikuewumi
Posted
Hi Karen 👋. This solution is awesome👌. The JS logic is elegant. About semantics, I think you got it absolutely spot on. But I do have a few minor suggestions:
On the 🎲 button, it looks like an oval, probably because of the approach you used to form the "circle". I would suggest making the container/button a fixed width and height, greater than the icon, and then center the icon with, like, flex or something. This should lead to a perfect 🔵 at all sizes.
I saw that you defined a fixed width on the card. In this case is works fine with no overflow, but I'll suggest checking out this technique for making more fluid layouts with the css min function;
main {
width: min(350px, 90vw);
}
I hope this helps. Again, this solution is really cool. If you have any questions, don't hesitate to ask. Keep coding👍,
Ayobami
