Two versions of a playButton Binding Audio With a grid link structure


#417

Then I won't use it if it doesn't make sense here, but knowing how to wouldn't hurt.


#418

Would I be adding 2 additional ones of these?

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

#419

Okay.

You create a function with a good name, such as removePlaying, and put the code in there.

function removePlaying() {
    button.classList.remove("playing");
}
// button.classList.remove("playing");

Then, you figure out what that function needs, which in this case is the button variable, and put that in the pararmeters list.

function removePlaying(button) {
    button.classList.remove("playing");
}

Sometimes you make the parameter less specific, so that it's appropriate to use that function in a wider range of situations, with any element for example.

function removePlaying(el) {
    el.classList.remove("playing");
}

Then you can call that function from the code:

// button.classList.remove("playing");
removePlaying(button);

#420

I got it, thanks.
https://jsfiddle.net/zy1boLhf/1/


#421

I'm ready to work on this:
https://jsfiddle.net/02me2fvk/18/

#73

Also, the second code assigns an event listener before the function. The code related to adding the event listener should appear below the function. It is preferable to have the functions grouped together, with all of the other code organised after all of the functions.

So, I would place this line where?
playButton.addEventListener("click", showLinks);

After it's working, it'll look like this:

document.querySelector(".myLink").classList.add("hide");

   function show(el) {
     el.classList.remove("hide");
   }

   function hide(el) {
     el.classList.add("hide");
   }


   function togglePlayButton(button) {
     var wrap = upTo(button, "wrap");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     show(wrap.querySelector(".myLink"));
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

#422

ReferenceError: playButtonClickHandler is not defined

playButton.addEventListener("click", playButtonClickHandler);


#423

But first, where do I place this line?

playButton.addEventListener("click", showLinks);

Inside here:

  function showLinks() {
  playButton.addEventListener("click", showLinks);

#424

The structure that is wanting to be applied to your code is similar to the module pattern.

var MODULE = (function () {
    var state = {
        moduleProperty: 1,
    };
    var privateVariable = 1;

    function privateMethod() {
        console.log(state.moduleProperty);
        // ...
    }
    function publicMethod() {
        if (privateVariable === 1) {
            privateMethod();
        }
        // ...
    }
    return Object.assign(state, {
        moduleMethod: publicMethod
    });
}());

We are not using all parts of the module pattern, but as things grow we can benefit from keeping that structure in mind. The module pattern makes things easier because you know where everything is going to be.

When you are in the middle of a group of functions, you don't have to hunt up and down through the code to find out where that function is being used. When the functions are all grouped together, and sit above the code that uses them, you then know that you only have to scroll down to find what uses the function taht you're looking at.

It's like going in to a kitchen and knowing that you are most likely to find the eating utensils in a top-drawer of the bench.

When the code gets big and bulky, the module pattern makes it easier to split off code to a separate module too. For example, the upTo and show/hide functions can easily be moved out to a utils module instead.

So with your existing code, the functions need to move up together to be above all of the code that uses them.


#425

Wait, I just did something here:
https://jsfiddle.net/02me2fvk/24/


#426

How do I have it not start playing? When you click on it?


#427

Updated:

https://jsfiddle.net/02me2fvk/25/

(function iife() {
  "use strict";

  document.querySelector(".myLink").classList.add("hide");
  var playButton = document.querySelector(".playButton");
  var player = document.querySelector("audio");


  function showLinks() {
    playButton.addEventListener("click", showLinks);
    document.querySelector(".myLink").classList.remove("hide");
    var button = document.querySelector(".playButton");
    button.querySelector('.initial').classList.remove("hide");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.querySelector(".play").classList.add("hide");
    playButton.querySelector(".pause").classList.remove("hide");
    button.classList.add("playing");
  }

  document.querySelector(".myLink").classList.add("hide");


  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }


  function togglePlayButton(button) {
    var wrap = upTo(button, "wrap");
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("playing");
    hide(button.querySelector(".initial"));
    show(wrap.querySelector(".myLink"));
    player.volume = 1.0;
    if (player.paused) {
      hide(play);
      show(pause);
      player.play();
    } else {
      show(play);
    }
  }
  var playButton = document.querySelector(".playButton");
  playButton.addEventListener("click", playButtonClickHandler);

  function getPlayButton(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
  }

  function upTo(el, className) {
    while (el.classList.contains(className) === false) {
      el = el.parentNode;
    }
    return el;
  }
  var button = upTo(evt.target, "playButton");
}());

#428

And it's fixed?


#429

I just need to put this into the short syntax form.

  document.querySelector(".myLink").classList.add("hide");
  var playButton = document.querySelector(".playButton");
  var player = document.querySelector("audio");


  function showLinks() {
    playButton.addEventListener("click", showLinks);
    document.querySelector(".myLink").classList.remove("hide");
    var button = document.querySelector(".playButton");
    button.querySelector('.initial').classList.remove("hide");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.querySelector(".play").classList.add("hide");
    playButton.querySelector(".pause").classList.remove("hide");
    button.classList.add("playing");
  }

#430

I almost got it:

Click on it.
https://jsfiddle.net/02me2fvk/34/


#431

Click on it twice music is playing:
https://jsfiddle.net/02me2fvk/35/


#432

I did something wrong. audio is not supposed to start right away.


#433

The first thing that I think you should do, is to deal with the issues from the browser console.


#434

Going step by step I got this far:
https://jsfiddle.net/02me2fvk/45/

I just removed the id:

var player = document.querySelector("audio");

https://jsfiddle.net/02me2fvk/47/


#435

What should my next step be from that point?

I'm trying to use this code as a template:
https://jsfiddle.net/q76sf3f2/40/


#436

Would you recommend me copying and pasting this code into the other one?

     }

   }
   var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", playButtonClickHandler);

   function getPlayButton(el) {
     while (el.classList.contains("playButton") === false) {
       el = el.parentNode;
     }
     return el;
   }

   function playButtonClickHandler(evt) {
     var button = getPlayButton(evt.target);
     togglePlayButton(button);
   }

   function upTo(el, className) {
     while (el.classList.contains(className) === false) {
       el = el.parentNode;
     }
     return el;
   }
   var button = upTo(evt.target, "playButton");