Article Preview Component

What are you most proud of, and what would you do differently next time?

How to toggle between states based on screen sizes, might not be the most effiecient way to do so but glad I got it to functional state.

const shareIcon = document.getElementById("shareIcon");
const cardProfileContainer = document.getElementById("cardProfileContainer");
const originalContent = document.getElementById("cardProfileInfo");
const cardProfileInfoActive = document.getElementById("cardProfileInfoActive");
const nonMobileProfileActive = document.getElementById(
  "share-active-icons-non-mob"
);
let isActive = false;

shareIcon.addEventListener("click", () => {
  isActive = !isActive;

  if (window.matchMedia("(min-width: 48em)").matches) {
    // Tablet or larger view
    nonMobileProfileActive.style.display = isActive ? "block" : "none";
  } else {
    // Mobile View
    if (isActive) {
      originalContent.style.display = "none";
      cardProfileInfoActive.style.display = "flex";
      cardProfileContainer.style.backgroundColor = "hsl(217, 19%, 35%)";
    } else {
      originalContent.style.display = "flex";
      cardProfileInfoActive.style.display = "none";
      cardProfileContainer.style.backgroundColor = "hsl(210, 46%, 95%)";
    }
  }
});

What challenges did you encounter, and how did you overcome them?

Getting the positioning of the share icons in tablet and desktop view, still not sure they are right as i was getting differnt results using inspect to live site visuals.

What specific areas of your project would you like help with?

Any suggestions I could have made this easier using JS or position of the share icons in tablets and desktop views.