How would I be able to attach this timer to the javascript?
The numbers should only appear on the screen when the javascript gets loaded.
Timer Code
https://jsfiddle.net/ep0q48n7/
Code I want to add it to.
https://jsfiddle.net/tswezh6u/
(function manageCurtain() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
}
const cover = document.querySelector(".jacket");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
const shufflePlaylist = true;
if (!hasShuffled) {
player.setShuffle(shufflePlaylist);
player.playVideoAt(0);
hasShuffled = true;
}
}
function addVideo(video) {
const playlist = "M7lc1UVf-VE";
new YT.Player(video, {
width: 640,
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars: {
autoplay: 0,
controls: 1,
loop: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1,
playlist
},
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
function init(opts) {
load.js("https://www.youtube.com/player_api").then(function() {
YT.ready(function() {
addVideo(opts.video);
});
});
}
return {
init
};
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function initPlayer(wrapper) {
videoPlayer.init({
video: wrapper.querySelector(".video")
});
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.parentElement;
show(wrapper);
initPlayer(wrapper);
}
const cover = document.querySelector(".jacket");
cover.addEventListener("click", coverClickHandler);
}());