Quiz

1. What's the difference between a property and an attribute?

   Good question. The words are very similar in meaning (in an ordinary dictionary) and are used in very similar ways in coding.

   Both are ways to talk about parts, facets, or aspects of things (more synonyms).

   In this course, a property is a part of an object/dictionary. Like this:

   
   var obj = {name: 'Harry Potter', hair: 'black', house: 'Gryffindor'};
   
   

   An attribute is a part of an HTML element (tag). Like this:

   
   <img src="path/to/harry.jpg" alt="Harry Potter" data-role="target">
   
   

2. Could you explain more about how "data-" attributes are used in code? data-role="trigger" and data-image-url="imgs/otter1.jpg" seem to have been used in different ways.

   Sure. The data- attributes are things that we as developers can add information to the HTML for our own purposes.

   Beyond that, we can't say much, any more than we can say what, say, variables are used for: they hold information.

   In Ottergram, we use the following data- attributes:

   
           <li class="thumbnail-item">
               <a href="imgs/otter1.jpg"
                  data-role="trigger"
                  data-image-url="imgs/otter1.jpg"
                  data-image-title="Stayin' Alive">
                 <img src="imgs/otter1.jpg" alt="Barry the Otter">
               <span>Barry</span>
             </a>
   
             <img data-role="target" class="detail-image" src="imgs/otter1.jpg" alt="Barry the Otter">
             <figcaption data-role="title" class="detail-image-title" >Stayin' Alive</figcaption>
   
   

   • the data-role tells us what role the element plays. We have triggers (the clickable thumbnails) and also a target and a title. The latter two are modified by the JS.
   • the data-image-url is what value to change the target to
   • the data-image-title is what value to change the title to
3. How does the "each" method work? What is "elt"?

   elt is a common abbreviation for the word element, which is a member of a set, array or list. Or an HTML element.

   See MDN Array.map

   .each is a lot like .forEach which is similar to .map. The difference is that map and forEach work on regular JS arrays, but .each works on jQuery wrapped sets.

   • map executes the callback (the function argument) for each element and collects return values in a new array.
   • forEach executes the callback for each element but doesn't collect return values.
   • .each executes the callback for each element and doesn't collect return values.

   The callback function for map/forEach is function (elt, index, array) {}.

   For each, the callback function is function (index, elt){}

4. Can we talk more about the preventDefault method? Is it primarily for hyperlinks/are there other ways to make a button that visually looks like a hyperlink but isn't one?

   Yeah, it's used for hyperlinks a lot. Can also be used for form submission buttons, but we haven't gotten to those yet.

5. I was actually very confused by the reading starting from "data attributes" and all the way to "attaching the event handlers". I think the reading was rooted in examples that I couldn't always follow. I guess more specifically, could we talk about the implementation process in more detail? For example, what is happening in these sections of code:

   function setDetails(imageUrl, titleText) {
       $(detailImage).attr('src', imageUrl);
       $(detailTitle).text(titleText);
   }
   imageFromThumb(thumbLinks[0]);
   titleFromThumb(thumbLinks[0]);
   imageFromThumb(thumbLinks[1]);
   titleFromThumb(thumbLinks[1]);
   function setDetailsFromThumb(thumbnail) {
       setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail));
   }
   

   I'm sorry the reading was confusing. I can try to improve it. Please help me do so.

   Let's look at those examples using ottergram

6. Could you please go over the ottergram JavaScript again? Thank you so much!

   Sure! I'll take as much time as people need.

7. I don't really have any. Can't wait to code it myself!

   Great! Let's do it!