@mattstuddert
Posted
Awesome work on this challenge, Alex! Your solution looks really good and scales down beautifully to mobile. What was your reasoning for how you coded it all with JS?
My main recommendation is to avoid setting click listeners on non-interactive elements, like the div element for the toggle. These can't be accessed by anyone not using a mouse/trackpad to navigate the content, which is a bad practice. Instead, add click listeners to interactive elements like a or button. This will ensure the element is focusable and can be accessed by people not using a mouse/trackpad.
I hope you enjoyed this challenge. Keep up the great work!
@awexli
Posted
@mattstuddert Thanks for the feedback! I changed the div element to a and set its role to a button. I hope that's a better solution since I've always had such a hard time styling buttons.
As for why I coded it with JS, I just wanted to practice DOM manipulation haha
Thanks Matt, I'm having a lot of fun with Frontend Mentor!
@mattstuddert
Posted
@awexli haha, fair enough! It's a great way to learn more about DOM manipulation.
I'd recommend just using a button to be honest. If you ever find yourself setting the role of an element to another element that already exists that's normally the sign of a code smell. The main thing with styling button elements is that you normally need to just remove the border and set the font-family. Apart from that, it's pretty much the same as an anchor tag (except they're inline-block by default).
That's great to hear you're enjoying Frontend Mentor! 🥳
@awexli
Posted
@mattstuddert Ah I see! Thanks, I'll start applying that moving forward!
@mattstuddert
Posted
@awexli no problem!
