In this lesson, we're going to be building out our e-mail and discussing a little bit more about what
the dorm is.
So first of all, I've added a simple extension to my browser and this is the military generator.
And what this does is this gives me the ability to see the dome of any webpage.
And as you can see, the way that the dorm works is that it's a series of clothes that one up.
And you can see that it's all the elements on the page are represented within this tree like structure,
and we can easily access them.
We see the relationship from them from one to the next to the next.
So we've got the parent, we've got children, and then we've got the children's children and the parent
and the parent of the parent and so on.
So you can navigate your entire Web page using this type of format and maneuvering through all of the
different elements that are available on your page.
So if you actually want to see a little bit more about what's available within the dorm, we can open
up our console and we can type in console.
And this is console directories, so not console log and type in document.
So this will give you the ability to see the document object.
And you can do this on any Web page, your favorite websites, go to it, open up the console and type
in console directory.
And as you can see, all of the elements on the page are represented here within the document object.
And you can see all of the different nodes, the children and then their children and so on and so on.
And the nice thing about it, as well as it highlights all the different elements as you maneuver through
them so that you can easily select them and find them available within your dorm.
The advantage of understanding how the dorm is structured is it's going to make it a whole lot easier
to interact with that document object when you're using your JavaScript, open up.
Our editor adding in a div are going to give it a class.
So that's how I'm going to select it from all the other elements on the page.
And then this is going to give me my connection with JavaScript once I selected in order to update and
manipulate it.
We're also going to need an input and the type of input is going to be a number.
So we'll set that up and I'm going to give it a default value of one hundred.
So we're only going to have that one input.
So that gives us, again, a way to select it.
So I'm just making sure that all of these elements are distinct enough that it's fairly easy for me
to select it using JavaScript.
So next, let's set up using a button and then within here is where are we going to calculate the tip
amount?
So we've got all of the fields that we need.
We've got an input number and then we've got a button that will calculate the tip, that will invoke
the event to trigger the function, that calculates the tip and then the output where we're going to
output the contents of the tip.
So we refresh our page.
Not a whole lot happening here.
We have the input field and we've got our button for the tip and list out the document, opening up
the document object.
I'll make this bigger.
You can see that we've got child nodes, so we've got each HTML is the first child.
And then within HTML, I've got several children or I've got three child nodes, so I've got head,
text and body.
So this is the contents of the head and this is the contents of the body.
And then inside of the body we've got child nodes.
So I've got nine child nodes.
I've got children here.
So there's four different children.
So there's that input divide that there's the output divide that I created with the class of output.
There's the input field that I created, as well as the button that I created.
And then lastly, we've got our script area where we're linking to our script code.
So you can see that it actually matches exactly what we have on the left hand side within our code.
So once you've set this up, go ahead and set up your HTML page and you're going to be ready to move
on to the next part where we're going to be making use of the data that's represented here on the HTML
page and connecting in our JavaScript and then using that data, manipulating some of the elements on
the page.
And that's coming up in the next lesson.