I’m supposed to work on it in notepad, out of the browser?
It’s in here:
What do I do first?
No, you don’t make changes to it yet. Wait until it’s working first in your code before making changes to it.
I put it all inside here?
(function manageCover() {
"use strict";
const hide = (el) => el.classList.add("hide");
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
function onPlayerReady(event) {
const player = event.target;
player.setVolume(50); // percent
}
function onPlayerStateChange(event) {
const player = event.target;
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 606,
height: 344,
videoId: videoId,
playerVars: {
autoplay: 1,
controls: 1,
showinfo: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1,
loop: true,
start: 200,
end: 204
},
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
function init(opts) {
addVideo(opts.video, opts.playerVars || {});
}
return {
init
};
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
const load = (function() {
// Function which returns a function: https://davidwalsh.name/javascript-functions
function _load(tag) {
return function(url) {
// This promise will be used by Promise.all to determine success or failure
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = 'body';
const attr = 'src';
// Important success and error for the promise
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
// Need to set different attributes depending on tag type
switch (tag) {
case 'script':
element.async = true;
break;
case 'link':
element.type = 'text/css';
element.rel = 'stylesheet';
attr = 'href';
parent = 'head';
}
// Inject into document to kick off loading
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load('link'),
js: _load('script'),
img: _load('img')
}
})();
// Usage: Load different file types with one callback
Promise.all([
load.js('lib/highlighter.js'),
load.js('lib/main.js'),
load.css('lib/highlighter.css'),
load.img('images/logo.png')
]).then(function() {
console.log('Everything has loaded!');
}).catch(function() {
console.log('Oh no, epic failure!');
});
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
Now everything is all bunched up together.
Harder to understand.
It would be easier putting piece by piece into it.
Than throwing it all in there.
You can try that, but I don’t think that you’ll find the process to be easier.
If the code is already not working in it, how am I supposed to know I’m making the right changes in it?
I’ve never done this type of code before.
What is not working about it?
It’s not clickable
SyntaxError: expected expression, got ‘)’
That load code should go at the very top. You’ve also included the usage stuff that I explicitly instructed you to not include.
Like this?
It’s not at the very top yet.
Here:
const load = (function() {
// Function which returns a function: https://davidwalsh.name/javascript-functions
function _load(tag) {
return function(url) {
// This promise will be used by Promise.all to determine success or failure
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = 'body';
const attr = 'src';
// Important success and error for the promise
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
// Need to set different attributes depending on tag type
switch (tag) {
case 'script':
element.async = true;
break;
case 'link':
element.type = 'text/css';
element.rel = 'stylesheet';
attr = 'href';
parent = 'head';
}
// Inject into document to kick off loading
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load('link'),
js: _load('script'),
img: _load('img')
}
})();
(function manageCover() {
"use strict";
const hide = (el) => el.classList.add("hide");
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
function onPlayerReady(event) {
const player = event.target;
player.setVolume(50); // percent
}
function onPlayerStateChange(event) {
const player = event.target;
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 606,
height: 344,
videoId: videoId,
playerVars: {
autoplay: 1,
controls: 1,
showinfo: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1,
loop: true,
start: 200,
end: 204
},
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
function init(opts) {
addVideo(opts.video, opts.playerVars || {});
}
return {
init
};
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
load("https://www.youtube.com/player_api").then(function() {
videoPlayer.init({
video: wrapper.querySelector(".video")
});
});
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
Good one. Now lower down where you use load, it needs to be load.js instead.
Here:
How do I know what’s not needed in here?
const load = (function() {
// Function which returns a function: https://davidwalsh.name/javascript-functions
function _load(tag) {
return function(url) {
// This promise will be used by Promise.all to determine success or failure
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = 'body';
const attr = 'src';
// Important success and error for the promise
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
// Need to set different attributes depending on tag type
switch (tag) {
case 'script':
element.async = true;
break;
case 'link':
element.type = 'text/css';
element.rel = 'stylesheet';
attr = 'href';
parent = 'head';
}
// Inject into document to kick off loading
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load('link'),
js: _load('script'),
img: _load('img')
}
})();
Well, the parts that relate to css and img aren’t needed.
Is this staying, or am I deleting it???
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
Removing that is the whole purpose behind what we’re doing here.
Removed:
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
Now it doesn’t turn on.
Console isn’t telling me anything.