Responsive Card with Popup Javascript

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 4 months ago

  Hello @MoonAmon

  My response for your comment " need help with the DOM manipulation part of JavaScript. I believe the logic is not functioning correctly." -> I went through your Javascript code and you actually do not need 90% of the logic. The only place where Javascript is needed is when you click on the share button to show/hide the tooltip. That's all.

  My advice is that before writing the Javascript, spend some time to plan what you need to build.

  1. When user clicks on share button, the tooltip will show
  2. Next time, when user clicks on share button, the tooltip will hide
  3. and so on...

  That means you need the following logic (i.e, how you will build the above steps):

  1. You need to select the share button
  2. You need to select the tooltip element so that you can hide/show it
  3. After selecting the share button, you need to add an event listener to it (The click event)
  4. Inside the callback function, you write the logic for hiding/showing the tooltip.

  Image your HTML is as follows:

  <div class="tooltip">
  // Rest of the tooltip content goes here
  </div>
  <button>Share</button>
  

  Your CSS has the following class. This will be handy in hiding/showing the tooltip

  .invisible {
   visibility:hidden;
  }
  

  A sample JS logic

  // 1. You need to select the share button
  const shareButton = document.querySelector("button");
  
  // 2. You need to select the tooltip element so that you can hide/show it
  const tooltip = document.querySelector(".tooltip"); 
  
  // 3. After selecting the share button, you need to add an event listener to it (The click event)
  shareButton.addEventListener("click",()=>{
    // 4. Inside the callback function, you write the logic for hiding/showing the tooltip.
    tooltip.classList.toggle("invisible");   // The invisible class that is defined in the CSS
  })
  

  You can refer to my solution

  You can refer to the following Javascript resources. It is the best resource so far in my 10 years of working with Javascript:

  • Learn Javascript

  Hope this helps!

  Marked as helpful

  1