Trying to figure out how to get fade to work

Is there a way to improve this? https://jsfiddle.net/w3Lrt6o8/3/

  function exitClickHandler(e) {
    if (e.target.classList.contains("exit")) {
      document.querySelector(".container2").classList.add("hide");
      document.querySelector(".container3").classList.add("hide");
      document.querySelector(".container1").classList.remove("hide");
      console.log('Page1');
    }
    if (e.target.classList.contains("exitPage2")) {
      document.querySelector(".container1").classList.add("hide");
      document.querySelector(".container3").classList.add("hide");
      document.querySelector(".container2").classList.remove("hide");
      console.log('Page2');
    }
    if (e.target.classList.contains("exitPage3")) {
      document.querySelector(".container2").classList.add("hide");
      document.querySelector(".container1").classList.add("hide");
      document.querySelector(".container3").classList.remove("hide");
      console.log('Page3');
    }
    window.scrollTo(0, 0);
  }

What if you had a 10,000 containers? How would you handle that? When you figure out the algorithm for that, you will have your improved solution.

When you start answering the other questions I already posted, I am willing to guide you further.

There will only be 3, right now.

Because it deals with 3 pages, not just a single page.

You seem to be really going out of your way to ignore or disregard any advice you don’t want to hear. You seem to only want us to write code for you. That’s not what we do here though.

I think you would really benefit from learning JavaScript fundamentals. It would really make things easier for you. The basics can be boring but they are really important.

You would also benefit from more of a big picture design. Right now you have ‘spaghetti code’ - you scavenge little pieces of code for specific tasks and stick them together like a bowl of spaghetti. Your pieces aren’t fitting together well without a big picture design though.

I was able to figure out this one: Improving it.

Would I be able to write it similar to this?

The other code is more bigger.

https://jsfiddle.net/zmaj1b6k/3/

  function resetVideos(videoSelector) {
    const allVideos = document.querySelectorAll(videoSelector);

    function showVideo(video) {
      video.classList.remove("active");
    }
    allVideos.forEach(showVideo);
  }

  function resetContainer(containerSelector) {
    const showContainer = document.querySelector(containerSelector);
    showContainer.classList.remove("hide");
  }

  function hideContainers(containerSelector) {
    const allContainers = document.querySelectorAll(containerSelector);

    function hideContainer(container) {
      container.classList.add("hide");
    }
    allContainers.forEach(hideContainer);
  }


  function resetPage() {
    resetVideos(".embed-youtube");
    hideContainers(".container1, .container2, .container3");
    resetContainer(".button-container");
  }

  function exitClickHandler() {
    resetPage();
    window.scrollTo(0, 0);
    console.log('here')
    //document.querySelector(".container1").classList.add("hide");
    // document.querySelector(".container2").classList.add("hide");
    // document.querySelector(".container3").classList.add("hide");
    // document.querySelector(".button-container").classList.remove("hide");
  }

I was able to improve it like this. https://jsfiddle.net/ancx6j5L/2/

 function resetVideos(videoSelector) {
    const allVideos = document.querySelectorAll(videoSelector);

    function showVideo(video) {
      video.classList.remove("active");
    }
    allVideos.forEach(showVideo);
  }

  function hideContainers(containerSelector) {
    const allContainers = document.querySelectorAll(containerSelector);

    function hideContainer(container) {
      container.classList.add("hide");
    }
    allContainers.forEach(hideContainer);
  }

  function showContainers(containerSelector) {
    const allContainers = document.querySelectorAll(containerSelector);

    function showContainer(container) {
      container.classList.remove("hide");
    }
    allContainers.forEach(showContainer);
  }

  function resetPage() {
    resetVideos(".embed-youtube");
     
  }

  function exitClickHandler(e) {
    if (e.target.classList.contains("exit")) {
     hideContainers(".container2, .container3");
      showContainers(".container1");
      resetPage();
      console.log('Page1');
    }
    if (e.target.classList.contains("exitPage2")) {
      hideContainers(".container1, .container3");
      showContainers(".container2");
      resetPage();
      console.log('Page2');
    }
    if (e.target.classList.contains("exitPage3")) {
      hideContainers(".container2, .container1");
      showContainers(".container3");
      resetPage();
      console.log('Page3');
    }
    window.scrollTo(0, 0);
  }

Having a tremendous amount of difficulty getting play buttons to work from inside their own container, separate from the HTML

This code I am trying to get working has the play buttons at the bottom inside their own container.

How the code works is, click on a button, and then a video should appear on the screen.

https://jsfiddle.net/kxhyLdr8/

<div class="playButtonContainer">
    <button class="playa cover" type="button"></button>
    <button class="playb cover" type="button"></button>
    <button class="playc cover" type="button"></button>
    <button class="playd cover" type="button"></button>
    <button class="playe cover" type="button"></button>
    <button class="playf cover" type="button"></button>
    <button class="playg cover" type="button"></button>
    <button class="playh cover" type="button"></button>
    <button class="playi cover" type="button"></button>
</div>

What is weird about the above code is that after clicking on the buttons, no errors are appearing, when there should be.

By errors I mean, in the console log, I was referring to, usually errors will appear in there if something is broken. I am stuck trying to figure out how to get the broken code working.

For comparison, here is a demo code of it working with the play buttons not inside their own container.

The only difference between the demo code and the code I am working on is that in the code I am working on, the play buttons are inside their own container.

To test jsitor code, press run, not update.

https://jsfiddle.net/24xf0avp/

The only difference between the working and non working example is just the extra layer of HTML.

Nothing was touched in any other part of the code.

Would anyone be able to check and see if their able that code to work, the code with the play buttons in their own container?

No one has been able to figure out how that would be done, getting the play buttons to work inside their own container.

I was told by my instructor, the code needs to work with the play buttons inside their own container, separate from the HTML.

I have no idea how that would be done, and because there are no errors appearing in the code, that further confuses me.

I was told this:

Could it be that you just need to extend your JS code so that it reaches the inner html node?

on the button click event it probably captures the parent element instead of the target element?

Binding of the click of the play button

So you should either wrap them together, put the play button in the outer, and then go to the closest(‘.outer’) then querySelector(‘.video’) or whatever you want to do. Or put an attribute on the .playa button (eg data-player-id=“play1”) that you can use to directly find from the click and then use this to call the .container.play1 element

Here I created a very simple demo with one button.

Here is the working demo code with only 1 button.

https://jsfiddle.net/1bmrwuzn/

Here is the broken code with only 1 button.

https://jsfiddle.net/gt57k29h/

What is meant by broken is, is that it is not working or functioning the same way as the demo code I provided.

Mapping buttons to containers

I am not familiar with how this works, but this is what I have been told.

If anyone on here would like to give more input, or if there may be a better way to write this code, feel free to give as much information.

Is there a more simpler way to write this code?

Is there a better way to do this? A better way to write it?

Is any of it able to be improved?

Maybe it could be written using less code, I don’t know.

That could be done by adding a data-container attribute to each button which stores a class or an id of the container it should act upon. If you did that, you’d need a different class or id for each container (you already do that with play1 and play2 ). Add a data-container attribute to each button with its value as the corresponding container class (like for example: data-container="play1" to the .playa button and data-container="play2" to the .playb button) and replace cover.previousElementSibling.querySelector(".container") with document.getElementsByClassName(playButton.dataset.container)[0] .

First Solution: https://jsfiddle.net/6vughped/

 function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const playButtonContainer = playButton.parentElement;
    const container = document.getElementsByClassName(playButton.dataset.container)[0];
    playButtonContainer.classList.add("active");
    container.classList.add("active");
    show(playButtonContainer);
    show(container);
  }
<div class="playButtonContainer with-curtain">
  <button class="playa cover" type="button" data-container="play1"></button>
  <button class="playb cover" type="button" data-container="play2"></button>
  <button class="playc cover" type="button" data-container="play3"></button>
</div>

Second Solution: https://jsfiddle.net/xhe4bczt/

 function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const playButtonContainer = playButton.parentElement;
    const playButtonIndex = Array.from(document.getElementsByClassName('cover')).findIndex(element => element == playButton)
    const container = config.containers[playButtonIndex]
    playButtonContainer.classList.add("active");
    container.classList.add("active");
    show(playButtonContainer);
    show(container);
  }
<div class="playButtonContainer with-curtain">
  <button class="playa cover" type="button"></button>
  <button class="playb cover" type="button"></button>
</div>

There are 2 other ways, one which maps buttons to containers by getting the last character of the class which starts with play, like in playa it’s a and in play1 it’s 1, so it maps “a” to “1”, and the other by creating an object with keys as button classes mapping to values as container classes, like { playa: 'play1' }. Remember that for the first way, you can only have 26 containers named play1 to play26 and 26 buttons named playa to playz, and for the second way, whenever you add or remove a button and a container you need to update the object inside the arguments of manageCover.init call inside the init function of players.

First Way: https://jsfiddle.net/uxkdgsc0/

  function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const playButtonContainer = playButton.parentElement;
    const playButtonClasses = playButton.className.split(' ')
    const playButtonPlayClass = playButtonClasses[playButtonClasses.findIndex(className => className.startsWith('play'))]
    const containerPlayClass = 'play' + (playButtonPlayClass[4].charCodeAt() - 96)
    const container = document.getElementsByClassName(containerPlayClass)[0]
    playButtonContainer.classList.add("active");
    container.classList.add("active");
    show(playButtonContainer);
    show(container);
  }
<div class="playButtonContainer with-curtain">
  <button class="playa cover" type="button"></button>
  <button class="playb cover" type="button"></button>
</div>

Second Way: https://jsfiddle.net/c1qnrxak/

  function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const playButtonContainer = playButton.parentElement;
    const playButtonClasses = playButton.className.split(' ')
    let containerClass
    for(var className of playButtonClasses) {
    	containerClass = config.playButtonsToContainers[className]
      if (containerClass) break;
    }
    const container = document.getElementsByClassName(containerClass)[0]
    playButtonContainer.classList.add("active");
    container.classList.add("active");
    show(playButtonContainer);
    show(container);
  }
  function init(selectors) {
    config.playButtonsToContainers = selectors.playButtonsToContainers;
  }
function init() {
    manageCover.init({
      container: ".container",
      playButton: ".cover",
      playButtonsToContainers: {
        playa: 'play1',
        playb: 'play2',
        playc: 'play3',
        playd: 'play4',
        playe: 'play5',
        playf: 'play6',
        playg: 'play7',
        playh: 'play8',
        plaei: 'play9'
      }
    });
<div class="playButtonContainer with-curtain">
  <button class="playa cover" type="button"></button>
  <button class="playb cover" type="button"></button>
</div>

or, maybe there is a different or better way to do this altogether, again, I don’t know.

How do I move the exit button below the fan?

Can you help me?

Currently the red exit button is on the spinning fan, I want to place it below it.

How do I do that in the code? https://jsfiddle.net/aqpoew6d/

.exit {
  position: absolute;
  top: 200px;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 1;
  clip-path: circle(50%);
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

Below on the z-axis or below on the y-axis?

All I know is that it is stuck and I can’t seem to move it.

Either of those ways, how would I be able to move it?

Where it is not floating off the page.

When you update the CSS bottom property, it moves along the y-axis, doesn’t it?

Yes it it moves along the y-axis.

I want to position it, or be able to where it is not floating off the screen.

Right now it’s positioned absolutely relative to .curtainInitial (the black box), and .curtainInitial has its overflow property set to hidden. Do you need to position the button relative to the black box?

Like this:

If you make top to be 385px for the exit class and move the exit button to be the last element of the outer div, you will achieve what you are wanting.

What ends up happening is, when the browser window gets smaller, the exit button floats away.

Yes, that is what happens when you use fixed values.

Cannot read properties of null (reading ‘querySelectorAll’) at line 258 col 28

When I click on the buttons I am getting that error.

Why is that, and how would it be fixed in the code?

What exactly is the issue here?

https://jsfiddle.net/1krodeh7/

It’s pointing to this line in the code:

wrappers = container.querySelectorAll(".wrap");

It’s telling me I don’t have any classes called remove, wrap, or container in the html elements listed, when I do.

Is there there a way to resolve this?

<div class="container2 hide">
<div class="container ">
<div class="curtain remove">

<div class="container3 hide">
  <div class="container ">
    <div class="curtain remove">
    <div class="button-container">
      <button class="exit exitPage3" type="button"><span>Page 3</span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit exitPage2" type="button"><span>Page 2</span></button>
    </div>
function removePlayerHandler(evt) {
    const el = evt.target;
    let container = el.closest(".container");
    let wrappers;
    if (container) { //if multiple players
      wrappers = container.querySelectorAll(".remove .wrap");
    } else { //if single player
      container = el.closest(".remove");
      wrappers = container.querySelectorAll(".wrap");
    }
    wrappers.forEach(function(wrapper) {
      if (wrapper.player) {
        removePlayer(wrapper);
      }
    });
  }