This lesson is going to be a quick code review of all the functionality that we looked at in the earlier
lessons, we created d'Hiv in order to contain a message for the user, as well as a button to create
interaction for the user in order to interact with our application, setting up a global variable.
We called it counter so that we can interact with this value and we can use it within our coding.
Let's open this up bigger.
We contained all of our functionality within one main function.
We add an event listener to the document object and this event listener was listening for the DOM content
loaded event.
Once that event fires up was so that loads the page, we invoked the functions.
This was an anonymous function that's contained within the event listener and we had all of our functionality.
So we selected elements.
We selected the body element.
That's only HTML one that we had.
We also selected output, we created an output.
We created an object called output and created an element which was a div added text to the div applied
some styling to that element.
We also added in a class of message to the element and then we added it in to our body object that we
had that we had selected earlier from our HTML.
Next we went onto the button.
So the same as when we created the div, we created a button element using the crit element method in
JavaScript, added some HTML.
It could also be in our text as well.
We played a whole bunch of styling it, probably looking at this and saying, OK, well, this was probably
easier done in class and you're probably right.
But of course we do want to practice JavaScript.
So hence all of the different statements.
They're playing various staling properties to that element.
So once we've constructed the element, we add the event listener and it actually doesn't matter which
order C could do the HTML after the styling, you can mix and mingle them.
I usually like to keep them all separated out, but it's up to you, whatever your format and you're
most comfortable with.
We had an event listener, so just as if we were to select the element from the page into an object
format in JavaScript, and then the rest is the same.
Where we add the event listener, the event listener that we added in was a click event.
We can get rid of this console message because we don't need that anymore and we're incrementing that
counter object, that counter value that we set as a global value and creating a message that we can
output to the user.
And then using our document query selector, we're selecting an element on the page.
And the element that we're selecting is message.
And we know that this exists because we created it up here and then updating the inner HTML of that
message object to whatever the value of mass is.
So that's the one that we created over here.
And then once we've added in the event listener, what we do is we append that that button to the body
and that makes it show up within our HTML and gives the user the ability to see the button and also
click the button.
So go ahead and try this out for yourself, get familiar with creating elements and also adding event
listeners to those elements.