Article preview component

Community feedback

• 

  Cousnay•320

  @Disney-BanjePosted about 1 year ago

  Hey, I hope you doing well.

  Your code is really straight to the point and understandable.

  However, I have a question. Could you explain to me the below section in Javascript how it is working?

  I would love it if you could provide some explanation of your coding process.

  #Code

  if (window.innerWidth > 767) {
      if (tooltip.style.display == 'block') {
        tooltip.style.display = 'none';
      } else {
        tooltip.style.display = 'block';
      }
  

  0

  ---

  

  Meryem Çetinkaya•330

  @meryemctnkyPosted about 1 year ago

  @Disney-Banje

  Hey 👋, I hope you're doing well! 🚀

  Thank you for your kind words about the code. I'd be happy to explain the section of the JavaScript code you mentioned. This code snippet is used to control the visibility of a 'tooltip' element based on the width of the window.

  Here's a breakdown of how it works:

  1. if (window.innerWidth > 767): This line checks the width of the browser window using window.innerWidth. If the window's inner width is greater than 767 pixels, the code inside this condition will be executed. This condition is checking if the window is wider than 767 pixels.
  2. Inside this condition, there's another if statement: if (tooltip.style.display == 'block'). This checks if the display property of the 'tooltip' element is set to 'block'. If it is, it means that the tooltip is currently visible on the webpage.
  3. If the display property is set to 'block', it toggles it to 'none' by executing tooltip.style.display = 'none';. This hides the tooltip.
  4. If the display property is not 'block' (i.e., the tooltip is not visible), it toggles it to 'block' by executing tooltip.style.display = 'block';. This makes the tooltip visible.

  The purpose of this code is actually to modify the display behavior of the 'author' and 'tooltip' elements based on the screen size. By using the window.innerWidth property, the code makes adjustments to the visibility of these elements, ensuring they are displayed appropriately according to the size of the user's screen.

  I hope this explanation clarifies how this part of the code works. If you have any more questions or need further clarification, feel free to ask!

  1

  

  Cousnay•320

  @Disney-BanjePosted about 1 year ago

  Hey @meryemctnky

  Thanks again for the clarification.

  0