In this lesson, we're going to be setting up our kallick counter and what the click counter will do
is it will count clicks.
There's going to be a message area for the user to be able to see messages, essentially how many clicks
they've made and also a button that the user can click.
And we're going to do this all in JavaScript is going to be no additional HTML.
It's all going to be within JavaScript.
We're going to create the element.
We're going to create the interaction for that element, all using JavaScript.
And I know you've come here to learn JavaScript.
So this lesson is going to deliver all pure JavaScript.
So first of all, let's set up some variables and we need to have one variable that will count our clicks
so we can call it counter next.
We want to make sure that the document object is loading.
And if you're familiar with the query, then you might be familiar with document ready.
There's also a function in JavaScript, just plain JavaScript that you can use that will accomplish
the same thing.
And that's adding an event listener and the event listener is going to listen for DAUn content loaded
and dom content loaded gets invoked when the DOM finishes loading and that gives you the ability to
interact with the DOM and then the event that we're passing through.
So we're going to pass in that event object and contain all of the the loaded content within this function.
And for now I'm going to type in a console message and I'm just going to type ready and we'll go out
to our browser and try that out.
And of course, probably not going to see much of a delay because the DOM is loading fairly quickly.
So all of the document object is ready to go and that means that we're ready to start building out our
application.
Next, we want to select an element on the page, and the only one that we have is body, so I'm going
to put that into a variable that we can utilize.
And with JavaScript, you can also do document body as well, and that will connect to the body object.
So we're making a selection using query selector and we're selecting the body element, so that's going
to be that whole body element because we want to utilize that.
We want append elements to the body.
So it's good to have it within an object format so that you can really easily append it and you can
do the same thing if you had some elements on your page.
And selecting them as JavaScript objects gives you the ability as well to interact with them within
your code.
Next, let's create an output area so we can call that output and using documents and this time we're
using create element.
And just as the name implies, what it's going to do is it's a method in order to create elements on
the fly with JavaScript.
So now that we've got our body and we've created an element, we need to place that element on the page
and I'll show you what that element looks like.
So right now, when we refresh it, this div, it's not sitting on the page yet because I haven't appended
it to the page.
So going back into our code, let's append that.
So using the body object that we created, we want to use append child.
And again, like the name implies, this gives you the ability to append an object to another object
element on the page.
And in this case where spending body or pending output to the body element and that's the body object
that we created.
So now let's save that and we'll go to the browser and we'll let the magic happen.
So we refresh and we see nothing within the browser yet.
And that's because that element is there.
So we go into the body, we can see that that div has been added in and we know that we don't have any
contents in the div and that's why we're not seeing it.
But it is actually physically there on the page and it's ready to be manipulated.
So we're going to be taking care of that in the upcoming lesson.
So for now, before you start the next lesson.
Take a look at adding an event listener Dom Content loaded, and this is, again, to make sure that
your dorm content has loaded.
So add that event listener.
And then within here is where you can set up your function or you can have a named function that you
can invoke with this event listener as well.
And then you can have all of your code in there so you can have an invite function or something like
that and then have the code in there as well.
So it'll accomplish the same purpose.
And that's just giving you access to that particular object.
So if you need to have this on a global scope, then you could add it outside.
But everything that we're doing is going to be sitting within this function.
So we're not going to need to make any manipulations outside and make sure that it's working.
So log out the element to the console, add it to the body, and you're going to be ready to move on
to the next lesson.