# 2001-GHP: Cookie Jar: Flexbox, DOM, Events

Put your pending and outstanding questions here 👇
Make the question in H2 tag by using '##'

## Question from the comments: When flex-direction is row, how do you define a specific height for your flex-container?

You can set the height manually (for very specific) or use the `align-items` property

.two {
    flex-grow: 2;
    /* height: 10px; */
    align-self: flex-start;
}

## what is the difference between:

.item {
    flex-grow: 0; 
    flex-shrink: 0;
    flex-basis: 33%
}

and

.item {
    flex: 0 0 33%
}

### Answer

`flex` is shorthand so you don't necessarily have to write all 3 of `flex-grow`, `flex-shrink` and `flex-basis` like you did in the first snippet. The order of the shorthand is `flex-grow value` `flex-shrink value` `flex-basis value` and the `flex-shrink value` and the `flex-basis value` are optional. So, in short, no difference.

## (From Ben) will add some calc stuff here later

## DOM: searching other nodes?
the slides only mention the `getElement(s)...` and `querySelector` stuff on the `document`, but does every node have those methods?

### Answer
Notice how we always do something like `document.getElement(s)` or `document.querySelector`. I am getting it document based not node based.

## querySelector & multiple results
what happens if you don't use `querySelectorAll` even when there's more than one match? do you just get the first one?

### Answer

Yup! https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

## is there a toggle method for other searcher functions than classList?

### Answer

At quick glance of the MDN site, not that I see: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

## the calc() function was used mostly pre-flexbox but in the navigation bar of teh aviatto website we still used the calc( ) to manipliate within the flexbox. is there material other than MDN to help us understand it more easily

I'll add some notes to on it here later on today/by tomorrow!

### Calc Resources

- https://slicejack.com/how-to-use-css-calc-function/
- https://bitsofco.de/how-calc-works/
- https://tympanus.net/codrops/css_reference/calc/
- https://css-tricks.com/a-couple-of-use-cases-for-calc/

## Some Extra Notes on DOM and Events

## What is the DOM?

The DOM is an interface to web pages. It is an API to the page allowing programs to read and manipulate the page's content, structure and styles. It is what allows web pages to render and respond to user events and change. The DOM is an object-based representation of the source HTML document. It is an attempt to convert the structure and content of the HTML document into an object model that can be used by various programs.

## How is a webpage built?

From HTML to page there is something called the **critical rendering path**. It can be generally grouped into two stages:

1. The first stage involves the browser parsing the document to determine what will actually be rendered on the page
1. The result of this is called the "render tree" or in other words, the representation of the HTML elements that will be rendered on the page with their related styles
2. The second stage involves the browser performing the actual render

## A lotta trees

We already got a "render tree" and now, the DOM is represented by something called a "node tree."

## What the DOM isn't

- It is NOT your source HTML. As much as we'd like to think so, it's not. It is created from the HTML source document but it actually can be very different from source HTML.
- When HTML is not valid: The DOM is an interface for valid HTML. During the process of creating the DOM, the browser may correct invalidities in HTML code.
- When the DOM is modified by JavaScript: It's a living resource.
- The DOM is not what you see in the browser: The browser viewport is actually the render tree.
- The DOM is not necessarily what is in DevTools: Think about [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).

## Event Propagation

### Question: When a DOM event fires in our app, does it fire just once where it originated from?

**No, it actually goes on a journey of three phases**

1. Capture Phase: Event flows from document's `root` to `target`
2. Target Phase: Fires event `target`
3. Bubbling/Propagating Phase: Event flows back to document's `root`

## passed the specs on the Selector lab using a constructor function, but could you show us how we would solve it using a class

Yes! I will be adding solution code to your repo and it uses a class.