Responsive Article Preview Component Using SCSS, Javascript

Solution retrospective
This is my JS code. Not sure if this is the optimal way but it works just fine for this challenge.
What should I have done differently? Any thoughts?
const shareIcon = document.querySelector(".fa-share"); const iconContainer = document.querySelector(".icon-container"); const picture = document.querySelector(".picture"); const profile = document.querySelector(".profile"); const socialMedia = document.querySelector(".social-media"); const mobile = window.matchMedia("(max-width: 977px)");
if (mobile.matches) { shareIcon.addEventListener("click", mobileButton); } else { shareIcon.addEventListener("click", desktopButton); }
function mobileButton() { shareIcon.classList.toggle("icon-color"); iconContainer.classList.toggle("bg-color"); picture.classList.toggle("hidden"); profile.classList.toggle("hidden"); socialMedia.classList.toggle("hidden"); }
function desktopButton() { socialMedia.classList.toggle("overlay"); }
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Brian Carlo Birondo's solution.
Join 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