Quiz

1. Did you have to make the reading quite so long? (I really enjoyed it, though!)

   I'm glad you enjoyed it. Yes, it was long. I aim for about 12-15 pages, and this was 19. Dynamically created elements is now and sometimes confusing, and delegated handlers go with dynamic elements, and they are complicated, so there was a lot to say. Bootstrap will be shorter.

2. also kind of forget what does <input> </input> and its type and value do

   Most of our form inputs are input, distinguished by its type:

   • type=text is for stuff like name, address, city...
   • type=password is for passwords (dots instead of characters)
   • type=date often gives you a date picker
   • type=radio is for a set of mutually exclusive options, like small, medium or large
   • type=checkbox is for a set of options, like pizza toppings
   • etc.

   The value is the value that the user types in or chooses.

3. can you explain the val method? what information does it act on?

   The jQuery .val() method, given a single form input, returns the value that the user typed in (or maybe that is already there, as with radio buttons).

4. can you explain what you mean by the event.target is similar to this? do we have to use arrow functions to preserve its value?

   Oh, I didn't mean that event was a special keyword like this. The event variable is a normal variable (the parameter of our event handler) and the event.target stores the DOM element that the event happened to.

   For example event.target in a click handler is the thing that got clicked on.

5. I am confused about question 3, could you explain what all the answers do?

   Sure. Here it is:

   If you've created two DOM elements, p and c, you can make p be the parent of c by
       A. $(p).parent(c)
       B. $(p).child(c)
       C. $(p).append(c)
       D. $(p).attach(c)
   

   None of those methods exists except .append(), which we used in the reading to the input element a child of the label element.

6. Can you explain question 4

   Sure. Here's the question:

   to create a div with class foo, you can use (check all that apply)
       A.  $('div').attr('class','foo');
       B.  $('<div>').attr('class','foo');
       C.  $('<div>', {'class':'foo'});
       D.  $('div').class('foo'); 
   

   Only B and C create new elements. They use different but equivalent ways to set an attribute.

7. how does CheckList class in CoffeeRun do the checking again?

   Here's the constructor:

       constructor(selector) {
           if (!selector) {
               throw new Error('No selector provided');
           }
   
           // find the container element and store it for later
           this.$element = $(selector);
   
           if(this.$element.length == 0) {
               throw new Error(`No element was found for selector ${selector}`)
           }
           if(this.$element.length > 1) {
               throw new Error(`Too many elements were found for selector ${selector}`);
           }
       }
   

   It selects the container element and then checks that exactly one element was selected by looking at $element.length. Remember that the dollar sign is allowed in variable names, just like an underscore. So, the object just has an instance variable named $element, which is the thing that it will append checklist items to.