@Disney-Banje
Posted
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';
}
@meryemctnky
Posted
@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:
if (window.innerWidth > 767): This line checks the width of the browser window usingwindow.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.- Inside this condition, there's another
ifstatement:if (tooltip.style.display == 'block'). This checks if thedisplayproperty of the 'tooltip' element is set to 'block'. If it is, it means that the tooltip is currently visible on the webpage. - If the
displayproperty is set to 'block', it toggles it to 'none' by executingtooltip.style.display = 'none';. This hides the tooltip. - If the
displayproperty is not 'block' (i.e., the tooltip is not visible), it toggles it to 'block' by executingtooltip.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!
@Disney-Banje
Posted
Hey @meryemctnky
Thanks again for the clarification.
