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

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

## h2
The slide link on the cohort README appears to link to an older version of the lecture slides that are missing some of the slides that were present in the ones you displayed/presented this morning (i.e. the flex-shrink etc etc). Can you update with the latest version please? thanks :)

## Answer

There really isn't much of a difference! I can put all the stuff that's different in here. Unless you want the really bad gifs! 😁

- The first two slides are the learning objectives I linked from the night before
- `flex-grow`: Hey, if there’s any space, you should grow some. You’re allowed to use more.
- `flex-basis`: Hey, I don’t care about what size you think you should have been. This should be your starting size.
- `flex-shrink`: Hey, somebody else needs more space. You should sacrifice some of your space.

## element w/o tag
Can you create an element w/ a class but w/o a tag (e.g. .addClass());

## Answer

So you would need to still to create the tag needed for it but you can use something like this. Or maybe I might be misunderstanding the question?

let div = document.createElement('div')
div.textContent = "Heeeeeeeyyyy"
div.setAttribute('class', 'hello')
document.body.appendChild(div)

Above is equivalent to:

<div class="hello">Heeeeeeeyyyy</div>

[Set Attribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute#:~:text=Sets%20the%20value%20of%20an,an%20attribute%2C%20call%20removeAttribute()%20.)

## Fitness-Tracker workshop
If I remember correctly, we are supposed to work with different branch which is "gh-page" for this workshop. (right..?) Which means we need to push to gh-page branch? If so.. how can we change the master branch to gh-page? Also, do we need to push to both master and gh-page branches?

## Answer

Good question! So, on `git` day, Noelle went over branches and how to make them. If you want to create a new branch in your local, you can use the command `git checkout -b <branchname>` This is short hand for:

git branch <branchname>
git checkout <branchname>

If you want to get `master` back, you can `git checkout master` and once again, if you want to get `gh-page` back, you can `git checkout gh-page`.
- To see a list of branches on your local, `git branch`
- To see a list of remote branches, `git branch -r`
- To see a list of all the branches (remote and local), `git branch -a`

The idea of this is that sometimes we need to work on different features with different team members. We should keep our master clean even though we are working by ourselves and that means using different branches for different features. You should push your new branches up to remote with `git push origin <branchname>`.

If you are using Github as your hosting service, when you push your new branch up, it will show you that. In addition, it will show you the option to make a pull request and merge whatever you have done on that branch into `master`. If you believe the changes you made on your new branch are ready to go into master, then merge them into master. Github will then give you the option to delete that branch and you can. You can always create a new branch with the same name if you need to work with that name again.

## Document methods
How do elements in the DOM also have access to document methods? Is it similar to how objects inherit methods from another object's prototype? Example:
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");
Note: The element (#test) can access the querySelectorAll method that document uses.
source: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

## Answer

Such a good question! So, this can get fairly deep. I will summarize what I can and then I will link to some documentation to get more of an idea. `document` itself is an instance of something called `HTMLDocument`. That isn't the only one. There are different parent interfaces. This is already given to us when a webpage is created. The hierachy is this: `EventTarget` < `Node` < `Document` < `HTMLDocument`. There are also different document types such as XML and SVG that are not HTML.

However, you can do something like below:

const container = new Document()

OR

const newHTMLDocument = new HTMLDocument()

Or any of the others above and you can create your own. You can use the same methods as the instance of `document` we are given. However `document` is the one that is connected to the DOM.

But to finish off your question, since that Interface hierarchy contains a bunch of methods and properties to which we can use, yes, it is based on JavaScript's flavor of OOP, the Prototype Chain. You'll start to see that so many things (except primitives: numbers, booleans, etc) are simply JavaScript Objects.

However that `document` we are given is the instance of our page and every time we use methods from it such as `querySelectorAll` or `getElementsByClassName` name, we return something from the DOM. In the case of `querySelectorAll`, it returns a static `NodeList` representing a list of the document's elements that match the selector(s). In the case of `getElementsByClassName`, it returns a live `HTMLCollection`.

This is also as far as I know about the topic so any more information can researched in some of the links I linked below as well as just playing around with code in the browser.

For more information:

- [Intro to The DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#DOM_interfaces)
- [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)
- [HTML Document](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDocument)
- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
- [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
- [What, exactly, is the DOM](https://bitsofco.de/what-exactly-is-the-dom/)

## From the Form

## What is a library and how does it interact with the DOM/browser/your code?

## Answer

Good question and also a hotly debated topic once we get into "frameworks" and then it becomes, "What is a Library vs. Framework", which I will answer later on when we get into React.

A library is a collection of related pieces of code. Think about when you go on a website and there might be a slideshow of photos. Then think about how so many websites have similar versions of slideshows as it seems. There are two options for this:

1. The developers of that site created their own code to show a slideshow
2. The developers of that site leverage one of many libraries that give them slideshow functionality

As software engineers, we shouldn't look to reinvent the wheel and re-use existing code as necessary.

All those `npm` packages we use are libraries that other developers have written for our convenience to not have to rewrite so much functionality.

And how it interacts with our code: Well, if it's from `npm`, it's JavaScript. The same language we write. So, it interacts the same way. If it's something that uses the DOM, then it uses `document.method`. In fact, if you simply write a function like:

const add = (x, y) => {
    return x + y
}

And then submit to `npm`, you have just created a library with one function called `add` that adds two numbers for other software engineers to use. It's not particularly useful but a library is just packaged (JavaScript) code of similar functionality that is widely available (or it can be private if you are working at a company with some proprietary software but you want other teams in that company to use your library).

## What is the difference between `nodeName` and `tagName`

A tag is a specific type of node. A node is the most general object of the DOM. For example, a tag is something like `div` and a node can be something like the text inside a paragraph. So if you try to find the `tagName` of a text node, it will return `undefined` so you'd need to use `nodeName`