• I don't really understand what thumbLinks are and why we need them.

    A lot of photo gallery apps have a way to click on a small version of a picture and show an enlarged version. The small version is called a "thumbnail" (because it's the size of a ...).

    Because the feature is done with hyperlinks, the Ottergram authors decided to call them thumblinks.

  • could you say more about DOM elements?

    When we first start coding HTML and CSS, we think in terms of what we can see: text, images, colors, etc. But if we want to work with a web page dynamically, we have to think of it as a data structure. In fact, a modifiable data structure.

    The DOM is a tree representation of the structure and content of the web page, accessible from JavaScript.

    Each element of the tree corresponds to a structural part of the web page: a paragraph, a list item, an image, a DIV, etc.

  • can you talk more about data attributes / The data- attributes and when to use them

    HTML elements have lots of attributes, like SRC, HREF, ID, CLASS, ...

    The complete list is defined by the W3C (World Wide Web Consortium) and every once in a while, they add new attributes.

    But they promise never to use any attributes starting with DATA-, thereby reserving them for programmers like us.

  • I would like to talk more about the first steps.

    Meaning reading and modifying attributes? Sure.

    We stored some useful information on each of the thumbnails, saying what image to show in the detail size and what text to put overlapping the detail image. We stored these in attributes, namely data-image-title, data-image-url and data-image-title.

    Our event handler will read off these values and modify the SRC attribute of the detail image and the text of the detail figcaption.

  • Can you explain why .preventDefault() is important to use? Why would we not want an event handler to carry out the code it has?

    The default behavior of clicking on a hyperlink is to replace the current page with the page designated by the HREF.

    In this case, we *don't* want the browser to replace this page with the detail image. We want to *stay* on the page with the thumbnails and such.

    So what are we getting by using the A tag? We are getting clickability in an accessible way. This is not obvious, so I'm glad you asked.

  • The steps to create the ottergram event handler were very long and complicated; could we perhaps summarize the steps?

    For sure. I've already done so, but I can review if you want.

  • The reading was clear

    Glad to hear it!