Not seeing the square links with javascript disabled

JavaScript
388

That’s why you suggested I do it like this:


<div class="buttone">

  initButton(".buttone");

.buttone {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.buttone a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
389

Yes, because it keeps the unique part about it all in the one place, tied to the .buttone name, instead of being scattered all over the place as linke and covere and activee and playe and so on and on and on.

1 Like
390

Am I now able to remove:
button from this one, or no?

hideAllButtons(button);

It didn’t come up in jslint, and is the only (button); left in the code.


    function initButton(selector) {
        wrapper = document.querySelector(selector);
        button = wrapper.querySelector(".playButton");
        wrapper.classList.add("inactive");
        wrapper.addEventListener("click", initialOverlayClickHandler);
        hideAllButtons(button);
391

Let me look at the code?

392
393

var button is defined at the top of the code, so that variable is available. Does it contain anything useful? When initButton us run it does so that’s all good. The button variable is available from everywhere inside of that IIFE function.

The hideAllButtons() function no longer has any parameters and uses button, which will reference that var button variable which is good.

Yes, the button can be removed from that hideAllButtons line you were speaking about.

1 Like
394

I assume here, playButton, should be changed to button:

That’s what you changed all the other ones to.

    var wrapper = document.querySelector(".wrap");
    var playButton = wrapper.querySelector(".playButton");
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
    hideAllButtons(playButton);

to this:

    var wrapper = document.querySelector(".wrap");
    var button = wrapper.querySelector(".playButton");
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
    hideAllButtons(button);
395

button

button

playButton
https://jsfiddle.net/6Lb1f2Le/215/

playButton
https://jsfiddle.net/6Lb1f2Le/217/

396

When deciding whether to use var button or var playButton I looked through the code and saw that button was more frequently used. Being lazy (or efficient), I chose the name that was more frequently used. Both work just as well as the other.

3 Likes
397

Having said that though, because we are in code that’s all about dealing with the play button, there’s no need to repeat ourselves by calling it playButton all over the place.

It could be called clickHandlerButton, or InitialOverlayButton, or iconParents, or imageContainer, or anything else like that.

Usually though, there’s a word or phrase that does an 80% good job of explaining things. That 80/20 rule you will come across a lot. The first 80% is much easier to achieve than the remaining 20%. People use 80% and rarely use the other 20%. It’s all over. The word button while not perfect, is good enough in the context of how it’s being used in the code to explain and represent what is happening there.

1 Like
398

It as in what?

399

You’re refering to this:

var playButton

var button

400

Yes indeed.

1 Like
401

I just did this one on my own.

I got rid of the suffixes.

 function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .playa, .playb, .playc, .pausea, .pauseb, .pausec, .initial, .speaker").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play, .playa, .playb, .playc");
  }

  function getPause(button) {
    return button.querySelector(".pause, .pausea, .pauseb, .pausec");
  }

There, that’s better:


  function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .playa, .playc, .pausea, .pausec, .initial, .speaker").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play, .playa, .playc");
  }

  function getPause(button) {
    return button.querySelector(".pause, .pausea, .pausec");
  }
402

Compare yours:

To how I did it:

Can you see if you can fix mine up.

or did I do a good job?

403

If you’r talking about the suffixes, your code is still full of them.

1 Like
404

Which ones are still there?

405

.playButtonc requires these:

.playa, .playc, .pausea, .pausec,

How is that considered full of them?

406

More than the playButton suffixes is considered unnecessary.

407

I’m using margin on them, so the left and right button get uneven.

.wrapc .playa,
.wrapc .playc {
  margin: 15px 36px;
}

.wrapc .pausea,
.wrapc .pausec {
  margin: 15px 37px;
}

.wrapc .play {
  margin: 15px 41px;
}

.wrapc .pause {
  margin: 15px 42px;
}