Javascript- Review

1. Click button - Change innerHTML

export const addNumber = () => {
  const followButton = document.querySelector(".follow-button");
  let followerNumber = document.querySelector(".follower-number");
  if (followButton) {
    followButton.addEventListener("click", ()=> {
      followerNumber.innerHTML = parseInt(followerNumber.innerHTML) + 1
      followerNumber.innerHTML = String(followerNumber.innerHTML) // string "701" >> 700
      followButton.classList.add('active');
    })
  }
}

1. Click Button - Change CSS

export const clickBugerButton = () => {
  const popup = document.querySelector(".dropup-content")
  const button = document.querySelector(".dropbtn")
  button.addEventListener("click", ()=> {

    if (popup.style.display == "none" || popup.style.display == "" ){
      // if your click
      popup.style.display = "block";
      button.style.color = "FD5C3A";
    } else {
      popup.style.display = "none";
      button.style.color = "#868686";
    }
  })
}

1. Read More

export const readMore = () => {
  const buttons = document.querySelectorAll(".myBtn");
  buttons.forEach( (button) => {
    // button.parentElement.getElementsByClassName("dots")[0].style.display = "block";
    // button.parentElement.getElementsByClassName("dots")[0].style.display = "none";
    button.addEventListener("click", ()=> {
      openMorePage(button);
    })
  })
}

const openMorePage = (button) => {
  const dots = button.parentElement.getElementsByClassName("dots")[0];
  const moreText = button.parentElement.getElementsByClassName("more")[0];
  const btnText = button;

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
};