I’ll just leave it 2 different colors until I decide that.
Will I need 2 classes then?
You might need the help from CSS people to make it look good, but with that “controls” class JavaScript can then take over from there.
var controls = document.querySelector(".controls");
controls.addEventListener("click", controlsClickHandler);
With the controlsClickHandler preventing the default action of the link, and taking over from there to play/pause the player.
function controlsClickHandler(evt) {
evt.preventDefault();
// then, call the function that does play/pause from here
}
Couldn’t I just replace the link with a regular div block instead?
You could, but then you would have to duplicate the CSS styles from the anchor tags to that div tag, and you end up with duplication all over again and changing one style then means changing all of the other styles that you duplicated, and it all becomes much too much like hard work to properly manage and maintain your own code.
tl;dr - No.
ok…
.controls{
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
}
<div class="controls "></div>
Quite possibly.
That code makes several assumptions that are invalid when it comes to your new situation. The code can be updated to work more easily in both situations.
But, that’s something that will have to wait until I return from my holiday break next week.
I don’t mind if the code looks different, just that it is set up properly, that’s what I care about.
If I were to attempt this myself. It would work properly, but it would be set up entirely wrong.
Here’s what we are starting with:
function playButtonClickHandler() {
var button = document.querySelector(".playButton");
var player = document.querySelector("#player");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton .play").style.display = "none";
document.querySelector(".playButton .pause").style.display = "inline-block";
player.play();
} else {
button.classList.remove("playing");
document.querySelector(".playButton .play").style.display = "inline-block";
document.querySelector(".playButton .pause").style.display = "none";
player.pause();
}
}
The Handler aspect of things and the playButton function really need to be separated, for better flexibility.
function playButton() {
}
function playButtonClickHandler(evt) {
playButton();
...
}
The button and the player really need to be passed in to the function, so that they can be easily configured for different things:
function playButton(button, player) {
// var button = document.querySelector(".playButton");
// var player = document.querySelector("#player");
...
}
function playButtonClickHandler(evt) {
var button = document.querySelector(".playButton");
var player = document.querySelector("#player");
playButton(button, player);
}
Then the button can be obtained from what the click event occurred on.
function playButtonClickHandler(evt) {
var button = evt.target;
var player = document.querySelector("#player");
playButton(button, player);
}
Directly adding and changing style attributes from JavaScript is a bad idea, so a separate class name of “hide” is standard for hiding and showing content.
For example:
.hide {
display: none;
}
// document.querySelector(".playButton .play").style.display = "none";
document.querySelector(".playButton .play").classList.add("hide");
// document.querySelector(".playButton .pause").style.display = "inline-block";
document.querySelector(".playButton .pause").classList.remove("hide");
The play and pause information is also currently assumed by the playButton function, so that needs to be passed in to the function too.
function playButton(button, player, play, pause) {
...
play.classList.add("hide");
pause.classList.remove("hide");
...
play.classList.remove("hide");
pause.classList.add("hide");
...
}
function playButtonClickHandler(evt) {
...
var play = document.querySelector(".playButton .play");
var pause = document.querySelector(".playButton .pause");
playButton(button, player, play, pause);
}
The play and pause selectors need to stop assuming that .playButton will always be where they are searching from.
function playButtonClickHandler(evt) {
...
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
playButton(button, player, play, pause);
}
And we now have a lot of configuration options being given to the playButton function.
This is where a best-practice technique of using an options object is used instead.
function playButton(opts) {
// instead of button, player, play, and pause
// use opts.button, opts.player, opts.play, and opts.pause
...
}
function playButtonClickHandler() {
var button = evt.target;
playButton({
button: button,
player: document.querySelector("#player"),
play: button.querySelector(".play"),
pause: button.querySelector(".pause")
});
}
There are now a lot less assumptions being made by the player code, and it’s much easier to configure it to work in a much wider range of possible scenarios.
Warning! Don’t copy/paste any of this code. These code excepts are not designed for that.
These code excerpts are instead designed to demonstrate the types of changes that are required to move from one set of code to another.
2 Likes
Will I be doing this?
.cover, .playButton {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
None of that’s relevant to the JavaScript. You’ll be doing nothing with that.
oh ok.
Will there be a
.playButton class
or
only
.controls
There should be both. We’ll find out how it turns out after we start working on next week.
ok…
If controls refer to both,
.play
.pause
Wouldn’t I need to name those two as separate classes?
The “controls” class only indicates what will trigger the play and pause of the player.
The things that get shown can be anywhere at all. They don’t have to be inside of the controls area.
oh, ok. We’ll figure this out next week then.
You’re not alone here. Others can help you out if they want. There’s plenty of information here about what you want to achieve, and I’ve provided some good guidelines on how progress can be made.