We're going to take the element that we created in the last lesson, so that's that one that we gave
it a name of our output.
So it's that object that we've created and we're going to add some inner HTML.
So now that we have it within an object format, it's relatively easy to add these manipulations.
So we're going to add inner turmoil.
You could also do inner text and that will add some content into that element.
I'm going to type click the button so you can see when we render that out.
So minimize that and refresh that.
Now we have an element that has click the button written inside.
So it's not doing anything yet.
But we're adding in some of the functionality into it already.
So we also want to apply some styling and styling is the object and then style and then you've got some
options for styling.
So if you want to adjust the font size, you can do that by using the object value of font size.
So each element that you create, you've got all these options for styling.
So when I refresh it, we see that the font size, so the attribute style now has font size to end.
And you can do that for all the other attributes as well.
So applying style, you can do padding.
If you want to add padding, just as you would with your success, you'd add in whatever styling values
that you wanted to use in that output object.
We can use font family and this isn't an object format.
So notice that it's Camil case.
So instead of with the Cassus properties, it's slightly different where there's no there's no spacing
allowed and no dashes allowed.
So it's all within this type of format.
So now just selecting font font names.
So now it's within a fantasy font and you can also add in classes if you wanted to as well.
So let's say we had a class and we could call it button.
So if we had a message area that we want to output, in particular, we could call it message.
And then lastly, all we have to do is append it to the body.
So this takes care of our message area.
And now that we are saying click the button, we need to create a button as well.
So let's do the same thing that we did earlier.
We're going to create a button.
So give it an object name using document and create element.
We need to specify what type of element we want to create.
And in this case, we want to create a button and then adding some inner HTML to that button.
So we'll type in, click me on the button and I'll show you how that looks.
So now we haven't added it yet to our body.
So the same way that we added the output, we can add a button object as well.
So refreshing.
And so now we've got a button and it's not clickable yet.
So let's add some interaction to that button.
So the button and adding an event listener.
So just as you would if you selected that element object, you could add an event listener to it, selecting
the event that you want to invoke.
So click event and we'll do an anonymous function.
You could also link it out to a named function as well.
And so for now, we'll just type in clicked into it and we'll set up the calculations in the upcoming
lesson.
So if we go into our console, so first of all, within the HTML, you see that we've added in the button
element.
We've also added in some styling to the output element.
And if we go into our console area, you can see when I click the button, that click gets invoked.
So we've added in the event listener.
So now we've got an interactive button that we've added and we've also applied some styling to our message
area.
So that's why I want you to do now is to create another element and create a button element on your
page that's going to be output in your HTML.
And we'll give you a button that you can click and we'll apply some styling and some additional options
to it in the upcoming lesson.
So for now, add in the event listener, add it, append it to the body object and also you can add
in some inner HTML or in our text so that there is some text on the button and also practice and have
some fun with updating the styling of your output object.
And you can also apply some of that same styling that we did out here for the output object into the
button object.
And that's what we're going to be covering in the upcoming lesson.
So try it out, add in some styling to that as well.
So adding in the name of the object and then using the style object value and then selecting the property
that you want to set from success.
So are coming up next, I'll show you how we can complete our project by making this button count and
then also outputting the count contents within the message area.
So that's still coming up in the next lesson.