By now we know how to select elements in the DOM.
We know how to manipulate them,
how to change the text content, for example.
And we had a look at how we can insert,
delete
and move elements.
Now that's all great.
But in order to build this little demo example here,
which has showed you over and over again.
We will need one additional building block,
one additional feature of JavaScript
which we haven't learned about yet.
Because in order to update this here,
we need to know how to change
what we see on the screen.
And we did learn about that.
So that should be fine.
We will also need a way
of getting access to this input field,
to see what the user entered.
And we also learned how to do that.
We learned how to query four elements.
How to select elements.
But what's missing
is that
we also need to listen to an event.
We need to find out when the user
types into this input field.
We need to listen to every keystroke
that's being made into this input field
so that we can update this output here
with every keystroke.
So we will need to learn about events.
And never a key feature JavaScript allows us to,
to implement or to use in our code.
We can listen to all kinds of events
that may occur on our website,
like a user clicking on some element
or typing into an input field
or scrolling,
or a bunch of other events that could occur.
With JavaScript we can listen to such events
and we can then execute
code of our choice
when such an event occurs.
That's what we can do with JavaScript.
And we will be able to do that
by adding EventListeners
with that add EventListener method
to our elements.
And hence that's
what we're going to explore now
so that we can then finally
move on to building this demo here on our own.