Article Preview Component

Community feedback

• 

  Kenpachi-bit•200

  @Kenpachi-bitPosted 2 months ago

  while the desktop version is alright, the mobile version is lacking specifically with the share section. I would suggest using event listeners within Javascript to add and remove classes and allow for CSS editing, below is a snippet of my JS code

  let shareButton = document.querySelector(".share-icon-container");
  let footer = document.querySelector(".profile");
  let container = document.querySelector("main");
  let deskTooltip = document.querySelector(".desktop-share");
  const head = document.querySelector("h1");
  
  
  let containerLength = container.offsetWidth;
  
  
  deskTooltip.classList.add("invisible");
  
  
  window.addEventListener("resize", () => {
    containerLength = container.offsetWidth;
    if (containerLength > 340) {
      footer.classList.remove("dark");
      
    }
  
    if (containerLength <= 340) {
      deskTooltip.classList.add("invisible");
    }
  });
  
  shareButton.addEventListener("click", () => {
    if (containerLength <= 340) {
    
      if (footer.classList.contains("dark")) {
        footer.classList.remove("dark");
        console.log("removed");
      } else {
        footer.classList.add("dark");
        console.log("added");
      }
    } else if (containerLength > 340) {
      footer.classList.remove("dark");
      deskTooltip.classList.toggle("invisible");
    }
  });
  

  the CSS styles can be added within CSS and be toggled in Javascript, I suggest using display:none for elements you want removed within your html. With regards to the share icon, I was also unable to change its color. Apologies if this explanation is a bit confusing I also had some difficulty with this exercise until I figured it out

  Marked as helpful

  0
• 

  Ghozy•250

  @Ghozy165Posted 2 months ago

  Thank you, it really helped me in setting up responsive with JS to edit its CSS

  0