Which would be the best way to add and remove?

asasass · October 30, 2018, 1:16pm

If all of these work, is one way more better to do it than the other?

Which is a better code for hiding and removing?

I think that depends on what type of code it is, and what I’m trying to do.

4.) for example works good with const because it uses only 1 "use strict";

1.)

(function iife() {
  "use strict";

  const show = (el) => el.classList.remove("hide");
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thevid = cover.parentNode.querySelector(".container");
    const thewrap = cover.parentNode;
    hide(cover);
    show(thevid);

  }
  const cover = document.querySelector(".jacketa ");
  cover.addEventListener("click", coverClickHandler);
}());

2.)
https://jsfiddle.net/zb6mkug3/167/

(function iife() {
  "use strict";

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

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thevid = cover.parentNode.querySelector(".container");
    const thewrap = cover.parentNode;
    hide(cover);
    show(thevid);

  }
  const cover = document.querySelector(".jacketa ");
  cover.addEventListener("click", coverClickHandler);
}());

3.)
https://jsfiddle.net/jdzkfw21/2/

(function iife() {
  "use strict";

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

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacketa");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacketa");
}());
(function iife() {
  "use strict";
  document.querySelector(".jacketa").addEventListener("click", function() {
    document.querySelector(".container").classList.remove("hide");
  });
}());

4.)
I think this way might be good just to hide the youtube overlays:
https://jsfiddle.net/zb6mkug3/172/

(function iife() {
  "use strict";

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

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thevid = cover.parentNode.querySelector(".wrap");
    const thewrap = cover.parentNode;
    hide(cover);
    show(thevid);

  }
  const cover = document.querySelector(".jacket ");
  cover.addEventListener("click", coverClickHandler);

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(100); // percent
  }
  window.onYouTubePlayerAPIReady = function() {
    new YT.Player(document.querySelector(".js-player"), {
      events: {
        "onReady": onPlayerReady
      }
    });
  };
}());

asasass · October 30, 2018, 1:38pm

About .4)

I changed this:

const show = (el) => el.classList.remove("hide");
  const hide = (el) => el.classList.add("hide");

to this:

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

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

Was doing that right, or better?

Paul_Wilkins · October 31, 2018, 2:24am

When it can be encapsulated into a single statement, functions are the old way of doing things. The arrrow functions (using =>) are the preferred modern way of doing it.

When multiple statements are required though, the normal function is the best way.

asasass · October 31, 2018, 2:28am

Because there’s 2, then go with function, if there is only 1, then the arrow can be used.

Paul_Wilkins · October 31, 2018, 3:00am

Incorrect.

Hide has only one statement, so arrow-notation is good to use.
Show has only one statement, so arrow-notation is good to use there too.

There’s no benefit gained from taking up 6 lines of code when two does the job just as well.

This is a waste of space:

// a waste of space
  function show(el) {
    el.classList.remove("hide");
  }
  function hide(el) {
    el.classList.add("hide");
  }

Whereas, the following is more efficient, without losing relevant information:

const show = (el) => el.classList.remove("hide");
const hide = (el) => el.classList.add("hide");

asasass · October 31, 2018, 3:03am

ok, I got it, understood.

Removed:

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

And replaced with:

const show = (el) => el.classList.remove("hide");
const hide = (el) => el.classList.add("hide");

All updated:

asasass · October 31, 2018, 4:07am

I have a question:

Do you think I should use this:

Because it is less code, and it might make sense to make the change.

And if I do that,

What would be a good name to replace “thevid” with?

What if I called it:
thewrap?

const thewrap

  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const thevid = cover.parentNode.querySelector(".container");
      hide(cover);
      show(thevid);

    }
    const cover = document.querySelector(".jacketa ");
    cover.addEventListener("click", coverClickHandler);
  }());

Instead of this?

(function iife() {
    "use strict";
    const hide = (el) => el.classList.add("hide");

    function hideInitialOverlay(wrapper) {
        hide(wrapper);
    }

    function initialOverlayClickHandler() {
        const wrapper = document.querySelector(".jacketa");
        hideInitialOverlay(wrapper);
        wrapper.removeEventListener("click", initialOverlayClickHandler);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", initialOverlayClickHandler);
    }
    initButton(".jacketa");
}());
(function iife() {
    "use strict";
    document.querySelector(".jacketa").addEventListener("click", function() {
        document.querySelector(".container").classList.remove("hide");
    });
}());

Then they would all look like this:
Which is way less code from before.

Implemented Here:

  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".container");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketa ");
      cover.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".wrapg");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketc ");
      cover.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".wraph");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketd ");
      cover.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".wrape");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketb ");
      cover.addEventListener("click", coverClickHandler);
  }());

asasass · October 31, 2018, 11:07pm

I want to use this code for the covers instead because I think it’s better to use.
I also think it’s more efficient and more manageable than the other code.

Do you agree?

 const show = (el) => el.classList.remove("hide");
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".wrap");
    hide(cover);
    show(thewrap);

  }
  const cover = document.querySelector(".jacket ");
  cover.addEventListener("click", coverClickHandler);
}());

Instead of this:


(function iife() {
  "use strict";

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

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());

(function iife() {
  "use strict";
  document.querySelector(".jacket").addEventListener("click", function() {
    document.querySelector(".wrap").classList.remove("hide");
  });
}());

Paul_Wilkins · November 1, 2018, 3:30am

Well that depends on …

Well in that case you would . . . on hang on

Then that would result in . . . ahh, but

All righty then.

asasass · November 1, 2018, 3:36am

These are all set up using this,
instead of the other way.

You said that depends.

What do you mean?

Do you see doing it this way better than the other way,
or is there no difference, except one is a smaller code than the other.

   (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".container");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketa ");
      cover.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".wrapg");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketc ");
      cover.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".wraph");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketd ");
      cover.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".wrape");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketb ");
      cover.addEventListener("click", coverClickHandler);
  }());

Instead of using this for each of those:

(function iife() {
  "use strict";

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

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());

(function iife() {
  "use strict";
  document.querySelector(".jacket").addEventListener("click", function() {
    document.querySelector(".wrap").classList.remove("hide");
  });
}());

Paul_Wilkins · November 1, 2018, 3:50am

Gah, my eyes get all confused looking back and forward between two different sets of code, attempting to compare the two.

Can you summarise the differences that are important to you?

asasass · November 1, 2018, 3:53am

This is one way which I seem to like better.

They both do the same thing, just set up differently.
One is less code to manage than the other.
I think that’s an important factor.

The 2nd code uses 3 EventListeners compared to only 1 on the first code.

Do you like how one is set up over the other?

I know this first one is how you originally set up the overlay youtube code.
I liked how you set that one up, then saw it would work with all the other covers I have too.

And then I thought, why not use this code instead of the other, and here I’m asking you for your opinion on two codes that do the same thing, just written differently.

What do you think?

Does using this first code make more sense to use than the other?

   (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".container");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketa ");
      cover.addEventListener("click", coverClickHandler);
  }());

Than how this one is set up:

(function iife() {
  "use strict";

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

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());

(function iife() {
  "use strict";
  document.querySelector(".jacket").addEventListener("click", function() {
    document.querySelector(".wrap").classList.remove("hide");
  });
}());

Paul_Wilkins · November 1, 2018, 5:01am

Yes.

asasass · November 1, 2018, 5:02am

I have another question.

If you were to combine them together, how would you have done it?

Would you have written this a different way?
Could it have been written a different way to combine them all?

or would you not have put them together to begin with?

I was trying to see if it was possible or not, turns out it is,
but not sure if this is a good idea or not.

What do you think?

I found this way works:

  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const thewrap = cover.parentNode.querySelector(".container");
      hide(cover);
      show(thewrap);
    }

    function coverClickHandlerb(evt) {
      const cover = evt.currentTarget;
      const thewrap = cover.parentNode.querySelector(".wrape");
      hide(cover);
      show(thewrap);
    }

    function coverClickHandlerc(evt) {
      const cover = evt.currentTarget;
      const thewrap = cover.parentNode.querySelector(".wrapg");
      hide(cover);
      show(thewrap);
    }

    function coverClickHandlerd(evt) {
      const cover = evt.currentTarget;
      const thewrap = cover.parentNode.querySelector(".wraph");
      hide(cover);
      show(thewrap);
    }
    const cover = document.querySelector(".jacketa");
    const coverb = document.querySelector(".jacketb");
    const coverc = document.querySelector(".jacketc");
    const coverd = document.querySelector(".jacketd");
    cover.addEventListener("click", coverClickHandler);
    coverb.addEventListener("click", coverClickHandlerb);
    coverc.addEventListener("click", coverClickHandlerc);
    coverd.addEventListener("click", coverClickHandlerd);
  }());

Paul_Wilkins · November 1, 2018, 5:23am

There’s an awful log of repetition there. Instead of using wrape, wrapg, wraph, I’d remove the need for so much repetition.

Those separately alphebatized classnames are the major blocker for you here that must be removed before further beneficial progress can occur.

asasass · November 1, 2018, 5:24am

Like this?

I don’t know how to set it up the right way.


  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const thewrap = cover.parentNode.querySelectorAll(".container, .wrape, .wrapg, .wraph");
      hide(cover);
      show(thewrap);
    }

    const cover = document.querySelectorAll(".jacketa, .jacketb, .jacketc, .jacketd");
    cover.addEventListener("click", coverClickHandler);
    
  }());

Paul_Wilkins · November 1, 2018, 5:25am

Nope, not at all. It won’t have been achieved while you use different classnames for the same or similar things.

asasass · November 1, 2018, 5:29am

I’ll keep them individually separated apart for now then.

   (function iife() {
      "use strict";
      const show = (el) => el.classList.remove("hide");
      const hide = (el) => el.classList.add("hide");

      function coverClickHandler(evt) {
          const cover = evt.currentTarget;
          const thewrap = cover.parentNode.querySelector(".container");
          hide(cover);
          show(thewrap);
      }
      const cover = document.querySelector(".jacketa ");
      cover.addEventListener("click", coverClickHandler);
  }());

dennisjn · November 1, 2018, 12:25pm

function toggle(el) {
el.classList.toggle(“hide”);
}

asasass · November 1, 2018, 1:06pm

Thank you for your help with this. After I finish the process of the youtube code supplying the player, I might start to work on this next.