I’m sorry, I thought you had instructed me to move the functions out.
Here I copied them. https://jsfiddle.net/bgqc9su5/
If this is good, we can work on Step 3, which is below this.
function createCoverClickHandler(playerOptions) {
return function coverClickHandler(evt) {
const cover = evt.currentTarget;
const wrapper = cover.nextElementSibling;
managePlayer.show(wrapper);
const player = managePlayer.createPlayer(wrapper, playerOptions);
wrapper.player = player;
};
}
function addPlayer(coverSelector, playerOptions) {
const clickHandler = managePlayer.createCoverClickHandler(playerOptions);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
return {
add: addPlayer,
createCoverClickHandler,
createPlayer,
show
};
}());
function onYouTubeIframeAPIReady() {
function createCoverClickHandler(playerOptions) {
return function coverClickHandler(evt) {
const cover = evt.currentTarget;
const wrapper = cover.nextElementSibling;
managePlayer.show(wrapper);
const player = managePlayer.createPlayer(wrapper, playerOptions);
wrapper.player = player;
};
}
function addPlayer(coverSelector, playerOptions) {
const clickHandler = managePlayer.createCoverClickHandler(playerOptions);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
After that is Step 3,
Step 3: Rename managePlayer.add to use the addPlayer function in onYouTubeIframeAPIReady
I did that here: Code Works: https://jsfiddle.net/zsf9yjkq/
If that is good, we can work on Step 4, which is below this.
return {
addPlayer: addPlayer,
};
}());
managePlayer.addPlayer(".playa", {});
managePlayer.addPlayer(".playb", {});
managePlayer.addPlayer(".playc", {});
managePlayer.addPlayer(".playd", {});
managePlayer.addPlayer(".playe", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
managePlayer.addPlayer(".playf", {});
managePlayer.addPlayer(".playg", {});
managePlayer.addPlayer(".playh", {});
managePlayer.addPlayer(".playi", {});
Link from completed Step 3: https://jsfiddle.net/zsf9yjkq/
Here is Step 4:
Step 4: Move parts of the functions back in to manageCover and managePlayer
Are some parts being added to the already existing addCoverHandler function?
How do I add parts of this:
function addPlayer(coverSelector, playerOptions) {
const clickHandler = managePlayer.createCoverClickHandler(playerOptions);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
to the: addCoverHandler function?
How do I do that?
const manageCover = (function makeManageCover() {
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
This was an attempt: That did not work in the code.
function addCoverHandler(coverSelector, handler, clickHandler) {
const cover = document.querySelector(coverSelector);
manageCover.addCoverHandler(coverSelector, clickHandler);
cover.addEventListener("click", handler);
}
Then I tried this: That did not work either.
Maybe I am doing it wrong.
function addCoverHandler(coverSelector, handler, clickHandler) {
const cover = document.querySelector(coverSelector);
cover.addCoverHandler(coverSelector, clickHandler);
cover.addEventListener("click", handler);
}
If I am not doing that, am I then creating a new function that is placed below
the addCoverHandler function?
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
When you were referring to: manageCover and managePlayer.
I was thinking inside each of these:
const manageCover = (function makeManageCover() {
const managePlayer = (function makeManagePlayer() {
I think I am right, and if I am not supposed to be doing that, then I am misunderstanding the instructions and am confused then.
We can work on moving parts of the functions back in to manageCover if that is where you say I am up to.
I will wait for further instructions on what I should be doing.
Last Updated Code:
From Step 3 completed. https://jsfiddle.net/zsf9yjkq