
Social links - CSS and JS to switch betwen template & personal styles
Design comparison
Solution retrospective
I decided to try and go a bit further than the template and add a second verison with colour and content adjustments. I used JavaScript to do this. I found this experience useful as I learnt a little bit about inheritence and precedence when trying to switch styles between CSS items with id selectors using classes. I also hadn't realised getElementByClassName returned a live collection vs. documentQuerySelectorAll returning a static nodelist.
What challenges did you encounter, and how did you overcome them?Just getting used to precedence.
Was initially a bit unsure on whether to use alternate classes in CSS for styling changes or whether to hard code the alternate styles values in JavaScript. I decided on the former approach as I think it's easier to manage future style adjustments if all style factors are in CSS. I think the content changes have to be hardcoded into JavaScript, at least without having a database?
What specific areas of your project would you like help with?Wondering if my JavaScript approach is relatively efficient or if there are better ways to do this?
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord