Welcome back.
In this lesson, we are going to be practicing what we learned in the earlier lessons with the tip calculator,
producing another little mini application that's going to have an input, a button that gets clicked
and then we're going to output.
Hello and welcome to our Web page to whatever name is added in here within that input field.
And you can also add in name there within the input field.
So it's more exact on what type of data that we're expecting.
So we want the user to come into our Web page, enter in their name and then click message and provide
a message back to them.
And we're going to do this all using JavaScript, what we learned within the previous lesson.
So the first thing that we want to do is select our button, grabbing our button object, creating a
constant variable called button, using documents, query selector.
We want to select that button element in order to put into the object.
And we know within our page we only have one element with a tag of button so we can type in button here
and that will select that particular element.
Always good idea to make sure that we do have that particular element selected so we can refresh and
we see that we do have that element selected.
Next to that we want to do is we want to add an event listener to Button.
So taking a button, we're going to use add event listener method and then specifying which event we
want to listen to and then what we want to happen whenever the button gets clicked.
And we want to run a function called short message next, let's set up a function that's going to show
the message and for now, we are not going to have a whole lot happening in here.
So once again, refresh try that out.
Click the message.
We see that we do have hello being output there.
So everything is working.
The next step is that we want to select our output area.
So that's contained within class output.
So let's set up a variable for that one as well, using documents, selector selecting the class output.
So don't forget to put the dot in front of output because this is a class that we are selecting and
now what we want to do instead of console log.
Hello, let's use our output element and update the inner HTML to be.
Hello.
So try that one out.
So now a refresh message and we get hello being output.
There was one last thing that we need to do and that's make a selection of the value that's contained
within this input and then output that within that output field.
So you can go ahead and pause the video and try this for yourself and I'll show you the solution as
well.
So hope you had an opportunity to try that out for yourself.
And the next thing that we want to do is we want to update that inner HTML with the value so we can
set it up as CONSED and we'll just call it my name query selector.
We want to select the input and then once we've got that input object, we want to make use of the input
variable and then a comma and then we can add in the my name.
Don't forget to add in value and then we can close off the each one and try that out.
So refresh message.
Hello.
Welcome Lawrence.
You can update the name now and send brand new messages to your users, having them fill out their name
and then output a welcome message, customized welcome message to them on your page.
Go ahead and try this out for yourself and build out this little mini application that welcomes users
to your page.