Adding a jacket over my page

JavaScript
21

Good. When the jacket is clicked, you can add an event listener that reveals the container.

document.querySelector(".jacket").addEventListener("click", function() {
    document.querySelector(".container").classList.remove("hide");
});
1 Like
22

javescript removed:
wrapper.classList.add("inactive");

html Removed

.jacket.active,
.jacket .cover {
  background: #000000;
}
.jacket.active {
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.jacket .cover {
  display: none;
}

.jacket.inactive .cover {
  display: block;
}
23

jslint:

This function needs a “use strict” pragma.
document.querySelector(".jacket").addEventListener("click", function() {

How do I fix that?

24

I’ve shown you three times today how to do that already.

25

But it already is using it, isn’t it?
function iife
use strict

(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");
}());
document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});
26

Can I replace this with:

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

this?

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

or do I keep it?

27

It all looks like this and it’s telling me to use strict pragma when I already am.

Maybe something is out of place.

  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");
}());
document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});
28

It’s better to keep it as a function so that you retain information that easily tells you what that code does.

30

I didn’t say that. It was you that said that.

Please don’t make it look like I said something when you were the one that said it.

31

I figured out how to do it:


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

  var wrapper = document.querySelector(".jacket");
  wrapper.addEventListener("click", initialOverlayClickHandler);
}());
32

I removed the quotes…

I didn’t realize I did that.

I just copied and pasted it.

When you copy and paste things it automatically adds quotes to it.

33

And you changed the whole context of who said what to make it look like I said what you said.

My anger at you is sky-high right now.

34

I apologize.

35

Anything you copy and paste on here it automatically adds quotation marks to it.

I said I was sorry.

36

jslint was saying that:

37

I removed the quotes as soon as you brought it to my attention.

38

I was thinking doing this, but that wouldn’t make sense.

(function iife() {
  "use strict";

document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});
39

I tried this:

  var wrapper = document.querySelector(".jacket");
  wrapper.addEventListener("click", initialOverlayClickHandler);
  document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
}());
40

It looks to me that this is out of place:

Maybe it goes in a different spot.

document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});

(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");
}());
document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});
41

How do you add strict pragma to a code that is already using it?

That’s why I was asking you.

I already know how to add strict pragma.

But jslint is telling me to add something that is already in the code.

Which doesn’t make any sense.

Maybe this would need to go into its own function.

document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});