As we said in the previous lecture throughout this section, I'm going to use our application note manager
in order to test things that I will demonstrate.
The source path for our app are attached to this lecture in some spots.
I mean, starting files which contain the already indexed HTML and access files.
Also, we have here cryptologists, which is empty for now.
Then we have two folders, success and fonts, which we will use for inserting nice fonts and icons.
You can download these files and use.
OK, let's open this folder in brackets and.
Then run it in browser.
So you see that you have our application.
At first, I'm going to describe the HTML file, which consists of multiple elements and tags, I hope
that you are familiar, at least with ABC of HTML and Unsuccess.
It had elements.
We have the title note manager, then it is followed by three links.
First one is for Standard Access File, where we have the main styling of our.
Up next is a link for font awesome access.
It contains some cool fonts that we use for editing and deleting the notes.
And the third link contains your URL for Google Fonts website.
Inside the body elements.
The whole content is wrapped in development, which has the class name wrapper.
It is followed by the header element which contains H2 heading note manager.
And then we have formed Element with an input which is needed for search filter.
Heather Element is followed by another DVH that contains an order list, the list is four notes and
each list item contains paragraphs for the notes and for the icons.
For now, they are placed in static mode, but using JavaScript will make them dynamic later.
All right, next, we have another development which contains label and input, and we are going to
use that for hiding and hiding notes.
You can notice that for attributes inside label, tag and ID, inside input have the same values height
because this fact allows us to use checkbox to create click event.
Let's see what I'm talking about exactly.
Go to Standard Xerces file and find input.
You see, that checkbook's for now is hidden because it has property display not.
If we commented out, the box will appear and you can see that in order to check it.
We don't need definitely to click on the box.
Because of that four attribute and I do have the same values.
Click on the label, content is absolutely enough.
Makes sense.
OK.
We will use this feature later in this section.
Now let's get rid of the comment and go back to index extremophile.
The last part of the team accountant is this element which contains form where the two inputs and they
are used for adding the notes to the list.
All right, because of that, throughout this section, we are going to use multiple methods, properties,
and also we are going to test many other things.
That's why I wanted to show and describe the content of the Offut.
OK, the next thing I'm going to do is to open the developer tools, the majority of testing and illustrating
things during these lectures will be in council.
In order to organize the browser and console better, let's place them side by side.
For that, you need to click here and choose Doc to left.
And also to distinguish better the EP and council window.
Let's change the color of it and make it darker, click again on Menu Bar that settings and change light
into dark.
All right, on the left side of council, we have a section where you can find the contents of current
extremophile here we have all the elements and tax that we have described a few seconds ago.
You can manipulate on extremophile from here.
For that, you need to click on the right button and then click to edit as HTML and change the content.
Temporary.
That's right.
Here, note manager app.
And you see that the header is changed.
But as I said, it's temporary because from here we cannot change the actual source file.
I mean, the actual content, when you reload the page, you will get the initial heading.
OK, it's just a simple example of how useful and powerful developer tools is, and you will see a lot
of interesting things in it through this section.
All right, actually, we are ready to move forward, as we already said, Don stands for document object
model.
It means that everything of the notes in document, the document itself is an object at first.
That's right.
In council document.
If you drop down, it's you will see the whole HTML document, the exact same content as it was in brackets
and also in Elements section.
In order to prove that document is an object, I'm going to use type of operator, which returns the
data type of an element.
So let's write type of.
That document.
You see that we have here an object again.
It means that document is an object, OK, when the page is loaded in browser, you already know that
the global window object is created and simultaneously document becomes a property of global window
object.
We can prove that if we write your window dot document.
We will get again documents.
And if you drop down, it's you'll see again the content of HTML file with all its elements, Tug's
links and so on.
All right.
For now, it's enough.
See you in the next video.