@elaineleung
Posted
Hi Niña, well done here! About making the code work but having it all kinda messy, I can definitely relate, and that's why one of my favourite things to do is refactoring, as that helps me see how I can make the code cleaner or even rewriting it differently.
For the JS you've written, things can be more DRY, and what I'd suggest is to use iteration to loop through the buttons instead of writing them out one by one. For an example on how to use iteration (namely using forEach), you can check out this CodePen I wrote as a mini version of this challenge: https://codepen.io/elaineleung/pen/RwMqMxZ
For the CSS, I generally don't recommend using id selectors because they can be hard to troubleshoot since their specificity is quite high. For me it's best to use class selectors and then element selectors if needed.
Lastly, do be careful about using percentage widths for your containers. Things may look fine at large widths, but at smaller widths, if you have a 25% width, then the container could end up looking really small and squished, like how it looks like to me even at just around a 1050px breaktpoint.
Anyway, hope some of this can help you out, and happy refactoring!
