Here in this lesson, we're going to be looking at key press and the free press option in that event,
listeners.
Let me give you a sample of what we're creating in this lesson.
We're going to be just using just a JavaScript.
So that includes creating the elements, as well as applying the styling to the elements and then appending
them to the page.
And then all of the event listeners are all going to be done with JavaScript.
So let's take a look at the final product.
When we load the page, it's just going to have the button that's been created again with JavaScript
and as well as the styling as applied with JavaScript, when you click the button, it's going to create
an input area when you can write into the input area.
And when you press enter, it's going to add the input area to the top.
So within the div, we've got an area here where we've got information where we can add.
So we're going to add diffs there.
And whatever you add, press enter, it's going to add it to the page so you can create as many inputs
as you want.
They're all being created here.
They're all separate and they all operate separately and notice that they do have a style of background
color.
So this background color is a value that's going to be hidden within the background of the element.
And then whenever we click it, it's going to actually translate and apply that background color to
the new div that was just created that was applied to this div that was also created that's been added
to the page.
So you can add as many inputs as you want and they all operate completely separately.
You can add spaces.
And we are also tracking the click events on the various elements.
So you can pick up that information if you want.
And then as soon as you hit, enter.
It will add whatever content is within the input to the page, there's also whenever you add an input,
automatically the focus is applied.
So the focus is applied to whatever the new one is that was just created.
So this is all dynamic and all done with JavaScript.
Let's get started.
So first of all, let's open up our ED so we've got a completely blank HTML page and adding in some
JavaScript.
So let's create an element that we can add to the page.
So this will be our output element.
So using document and create elements, let's go ahead and create a div on the page and then within
this div we're going to send it to the body.
So using document, body and append and selecting that output div.
So this is where we're going to output our content into.
And we also want to create a function that's going to add an input and add on that input element.
Add that listeners on the input element.
So creating a function or just call it maker and then for the function itself, let's create that function
so we're not passing in any data.
And what this function is going to do is it's going to create a new input.
So every time the function runs, it's going to create a new input and assign all of the key event listeners
to this input.
So create element and creating an element input.
And then also we can use document, body append, so how about we append it to the output that's already
on the body?
So using output and the append method, we're going to spend the new input to the output area and then
also let's set up value for the new input.
So this will just right now just say test within the value.
So let's see what happens and go out and refresh.
So there's our input that we've created.
And if we go to the elements, we've got the diff and the div just has an input.
So we don't have any properties or attributes yet for the input.
So let's set the input and put a focus on the input.
So new input and we're going to set focus of the element of the page elements on there.
And then also let's select the elements and add an event listener.
So adding an event listener that we're going to listen for the key up on that.
And whenever we keep up, we're going to run a function called log.
So that's going to log that event information.
So let's go ahead and create that function that's going to be run whenever the event gets triggered.
And within the log, we're going to post the event object and we can for now, we can cancel, log that
event object.
So we've got our event object that we're going to log whenever the key is up.
Let's try it out and refresh and go into the console.
So we're tracking all of those key processes within the input field so we get the key value and all
of the information contained within the event object on the key.
So let's also add in an event listener for key press sort of tracking key up.
We can track key press and add all of this information into the log.
And also let's track key down as well for Key Down.
We're going to check to see if this if we'll run a function on this one.
So we're not going to be logging this.
We're going to run a function that is going to check to see if the key code is enter.
So console log out the key and the key code.
So let's see what happens here.
So every time we're processing it, we're grabbing the key code.
And that's the key code is sixty 68 enter is going to be a key code of 13.
So we're going to listen for the key code of 13 on the elements.
So if E key code is equal to 13, that means that the users press enter on the input field and will
update the output.
And we're going to create another element that's within the output that we can add a message to.
So let's do that as well.
So message, document and create another element.
And this is going to output the content from the message.
So it will create an element and actually this should be a div and simply append this div to the output
element so that we've got a spot that we can overwrite and add in.
So taking output append and then the element that we want to spend it with and that's going to be message.
So that gives us an area where we can write some content into.
So let's output that content into the message area and update the text content and we'll add to the
text content of whatever the input value is or the new input value is.
So whatever that value is at the time, whenever the user presses enter, then that's what we're going
to track into that input area.
So let's see what happens.
So refresh and press, enter and press enter again.
So it's continuously adding it into that input area.
And also let's actually update the inner HTML so that we can add new line so I can add in the line break.
So this will now track in this new input information into the div.
So whenever we press enter on the input, it's going to add it in there and we can also create a new
input at any time.
So we could have multiple Meeker's so we can make multiple inputs.
And they completely function separately.
So how about we add one more thing, one more item to the page and we'll create a button and then this
button will add additional input fields on our page to create.
Elements and element that's going to get created as a button and whatever, this button is going to
get clicked, so we need to take that output, append and append the button there, and then let's add
in some properties for the button.
So add in the text content for the button, click to add input and then the button add an event listener.
And the listener that we're listening for is a click.
And then when it gets clicked, then what we want to do on the event click is we want to add a new input.
So we're going to be just running maker so we can.
Make it smaller like that and also let's update some of the style for the button, so set the background
color to be red and button.
And of course, you could also do this with scissors as well.
So just adding some default and also wanted to add padding so it looks more like a button.
So let's see what that looks like.
So do a quick refresh.
So add input and it's going to add a number of inputs there.
What we want this to be on separate lines as well.
So going back into the input, let's set up the do an inspect on it.
So it's adding all of these inputs.
And what we ideally want to have it is on a separate line.
So let's do a quick update for it and I'll call it temp div or this is going to be the parent div.
So document elements and the element that we're creating is a div and then instead of a pending output
with the new input, we're going to spend it with the div that we've just created and this one we're
going to spend with the new input.
So that way they each get a separate line.
So now whenever we add the inputs they've got separate lines and any one of them that you press enter,
it's going to track it into the message area.
And then we can add as many of these inputs as we want.
So that's how you can create elements on the fly.
And as you create these inputs, you can also because they are objects and just like anything else in
JavaScript, they are objects.
So you can hide different values.
So if we want to set up a new input and we want to give it hidden value and I can pass a value of one
hundred, or how about we make this a random value?
So using the math method, going to do our random value and I'm going to update this to string value.
So it's going to return back a string value and we can do a base 16 and then also we can subtract substring
and subtract minus six from it.
So it's essentially going to return back a hexadecimal six character value back within the hidden value.
And whenever we press enter, then we can also use that hidden value and output it.
So let's add that to the input value there, whatever the hidden value is of the current element.
So we'll add that to the string.
So under the new input, hidden value, let's see what that looks like.
So we're adding inputs as soon as I press enter and each one of them has their own hidden value.
So it's got kind of its own hex value.
And these can also be used as colours.
So that's the nice thing about it, is that whenever we do this hidden value, then we can also set
a color using it.
So how about we do input and we do style and background color and the background color can be equal
to this hex value.
So let's include the hash to make it a color value.
And now whenever we add inputs, they're all going to have their own random background colors.
So what we want to do is we want to use this color as the background of the inner HTML of the element
that we're creating.
So how about we make a quick update here and I'm going to style this using the tactics and we'll create
a div and within the div a lot in background and the background is going to use whatever value we have
for the hidden value and the input value are still going to output within the so close off the div and
then we've got the hidden value.
So let's wrap that with a dollar sign that curly brackets and then we're going to end that with the
ending.
So two quick double check of my HTML and hopefully that should be correct.
And we can also with the template literals, we can add in the spacing as well to that.
So let's see what this looks like.
To do a refresh and press enter and it looks like something went wrong there.
So we've got the background, color, style, background, color.
So I didn't close off the quote their hopes and that should be on the other side.
And that actually should be an ecocide.
So you don't have to worry about the courts and the single courts and the courts with the template literals.
And looks like we've still got a problem there, so let's double check and I didn't add in the hash
in front of that.
So I do need to have a hash in front and do another double check there just to make sure that that value
is correct.
So let's try it one more time.
So now we're actually getting the background color of the ones as we press them.
So anyone that we're clicking and pressing enter on, it's being added into our parent div there.
And it's also updating the background colors.
And the reason that spaced out like this is that because of the backpacks that it is adding in all of
the spacing into the strings, if you want to get rid of that, you can do that as well.
And that will remove out all that extra spacing that we see there within the source code.
And now whenever we look at that, we're not going to have that extra spacing.
And let's see what that looks like.
So we've got our Divx here at the top, so Divx style background and then the contents of that deth.
So that's how we can make it a little bit more colorful as well, and just as you are creating these
elements, you can add in any values, just as you would with any object, and you can hide them in
the background.
They can always reference them and pick them up as well.
Whenever you want to use them, whenever you want, make use of them.