As promised in this lesson, we're going to be delivering our click counter, so so far we have an area
that we can output a message to the user and we've also created a button.
And when we click that button, we've got the interaction, we've got our event listener added to it.
And right now it outputs a message into the console that just says click.
So what we ultimately want to do is update our counter value so we can increment that global value of
the counter that we had already set up.
So sucked in that counter object and now we can output some information to the person that's interacting
with our application.
So we've got our value that's increasing and we can use the document, query selectors.
It's going to be a fairly long statement and we need to select the element with the class of message
and notice that we set a class of message just to that object that's above us.
So luckily for us, we already have an element with the message there and we can update the entire HTML.
And now all we need to do is set up a message.
You could also set a separate a separate variable for that message.
And then you could just simply add that to the to the end there, so you clicked this.
And then concatenate together into a string.
So this is the message that we're outputting to the person that's interacting with their application,
and then we just equal the inner turmoil to whatever the value of messages.
So now we have our counter is increasing.
You see that number is increasing every time we click it.
You can also, because this is HTML, you can add in a board to it that stands out a little bit more.
So those are the numbers that are being clicked.
So effectively, we've created our clicker.
Everything is working to try that out.
And let's add in let's practice a little bit more styling before we conclude and within the button,
let's make it look more like a button.
So it looks rather small and we want to make it look a little bit more clickable.
So this is just another exercise in getting familiar with what you can do with the style object in a
JavaScript.
So selecting our border and just as we would with our scissors.
So if we selected a border, we could set whatever border color we wanted to.
Also getting that button style, we can add in padding just as we did within our output object.
So selecting whatever padding, don't forget the picks to identify that it's pixels that you want to
set that we can set up with for the button.
So let's make it a nice big button.
We can also set a font size so that a number of objects and within brackets, it's showing me all the
different options that I have for my when I do the button style.
You can see that we've got all of these options.
So you can do border bottom.
We can do all kinds of border properties that we can apply.
So there's just a ton of stuff that we can do.
There's also text a line as well.
So setting up our text line so we can send her our text in the middle of the button.
There's also background.
You probably saw that within the dropdown we can set our background color.
So whatever color we want to set it to, to make it a nice red button.
So it stands out and also update our color.
A lot of these are very intuitive words.
Try it out and refresh it.
So now we have a nice big click me button and that's it for our project.
So this was a great exercise to really get familiar with creating content with JavaScript.
And if you go to the page source, you're going to see that within the page source.
There's no HTML, so within body there's nothing.
And then we've just got our script content so we don't have any HTML elements.
We're creating all of those dynamically using JavaScript.
So do try it out for yourself.
Get familiar with creating elements on the fly using JavaScript.
And this is our button that we just created with all of its style properties that we added in.
And next lesson, we'll do a quick overview of the functionality of all the different statements that
we created.