Can anyone explain the following code for me?

JavaScript
1 
  const itemNumber = movieLists[i].querySelectorAll("img").length;
  let clickCounter = 0;
  arrow.addEventListener("click", () => {
    const ratio = Math.floor(window.innerWidth / 270);
    clickCounter++;
    if (itemNumber - (4 + clickCounter) + (4 - ratio) >= 0) {
      movieLists[i].style.transform = `translateX(${                                                                        (line11)
        movieLists[i].computedStyleMap().get("transform")[0].x.value - 300
      }px)`;
    } else {
      movieLists[i].style.transform = "translateX(0)";
      clickCounter = 0;
    }
  });

Can anyone tell me what the ‘[i]’ stands or represents for?
What does the ‘x.value’ represent for?

Please view the full set of code in the link of Codepen below.

2

It’s supposed to be an image carousel of sorts when you click the arrow icon but it doesn’t work, among other issues. Since you are asking how it works I am assuming it is not your code. Does the code do what you think it should do?

Also, if I’m wrong on the following someone correct me:

const itemNumber = movieLists[i].querySelectorAll("img").length;

movieLists is a variable which was previously queried on the DOM returning a node list:

const movieLists = document.querySelectorAll(".movie-list");

querySelectorAll queries the DOM.

moviesLists is a variable which is a node list not the DOM, so this is invalid:

const itemNumber = movieLists[i].querySelectorAll("img").length;

because movieLists is not the DOM.

So, I think this is bad code. But like I said if I’m wrong I would like to know, I’m always willing to learn something.

3

Thank you for your response. I will pore over them.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.