1
00:00:02,280 --> 00:00:05,700
By now we know how to select elements in the DOM.

2
00:00:05,700 --> 00:00:07,730
We know how to manipulate them,

3
00:00:07,730 --> 00:00:10,280
how to change the text content, for example.

4
00:00:10,280 --> 00:00:13,030
And we had a look at how we can insert,

5
00:00:13,030 --> 00:00:13,863
delete

6
00:00:13,863 --> 00:00:15,820
and move elements.

7
00:00:15,820 --> 00:00:18,160
Now that's all great.

8
00:00:18,160 --> 00:00:21,840
But in order to build this little demo example here,

9
00:00:21,840 --> 00:00:24,330
which has showed you over and over again.

10
00:00:24,330 --> 00:00:27,410
We will need one additional building block,

11
00:00:27,410 --> 00:00:30,660
one additional feature of JavaScript

12
00:00:30,660 --> 00:00:33,060
which we haven't learned about yet.

13
00:00:33,060 --> 00:00:36,140
Because in order to update this here,

14
00:00:36,140 --> 00:00:37,920
we need to know how to change

15
00:00:37,920 --> 00:00:39,100
what we see on the screen.

16
00:00:39,100 --> 00:00:40,420
And we did learn about that.

17
00:00:40,420 --> 00:00:42,040
So that should be fine.

18
00:00:42,040 --> 00:00:43,160
We will also need a way

19
00:00:43,160 --> 00:00:45,630
of getting access to this input field,

20
00:00:45,630 --> 00:00:47,690
to see what the user entered.

21
00:00:47,690 --> 00:00:49,750
And we also learned how to do that.

22
00:00:49,750 --> 00:00:52,780
We learned how to query four elements.

23
00:00:52,780 --> 00:00:54,463
How to select elements.

24
00:00:55,380 --> 00:00:57,050
But what's missing

25
00:00:57,050 --> 00:00:57,990
is that

26
00:00:57,990 --> 00:01:01,030
we also need to listen to an event.

27
00:01:01,030 --> 00:01:03,310
We need to find out when the user

28
00:01:03,310 --> 00:01:05,300
types into this input field.

29
00:01:05,300 --> 00:01:08,040
We need to listen to every keystroke

30
00:01:08,040 --> 00:01:10,700
that's being made into this input field

31
00:01:10,700 --> 00:01:13,700
so that we can update this output here

32
00:01:13,700 --> 00:01:15,880
with every keystroke.

33
00:01:15,880 --> 00:01:19,070
So we will need to learn about events.

34
00:01:19,070 --> 00:01:22,900
And never a key feature JavaScript allows us to,

35
00:01:22,900 --> 00:01:27,150
to implement or to use in our code.

36
00:01:27,150 --> 00:01:30,000
We can listen to all kinds of events

37
00:01:30,000 --> 00:01:32,157
that may occur on our website,

38
00:01:32,157 --> 00:01:35,590
like a user clicking on some element

39
00:01:35,590 --> 00:01:38,000
or typing into an input field

40
00:01:38,000 --> 00:01:39,360
or scrolling,

41
00:01:39,360 --> 00:01:43,070
or a bunch of other events that could occur.

42
00:01:43,070 --> 00:01:47,000
With JavaScript we can listen to such events

43
00:01:47,000 --> 00:01:48,530
and we can then execute

44
00:01:48,530 --> 00:01:50,550
code of our choice

45
00:01:50,550 --> 00:01:53,270
when such an event occurs.

46
00:01:53,270 --> 00:01:55,800
That's what we can do with JavaScript.

47
00:01:55,800 --> 00:01:57,950
And we will be able to do that

48
00:01:57,950 --> 00:02:00,200
by adding EventListeners

49
00:02:00,200 --> 00:02:03,850
with that add EventListener method

50
00:02:03,850 --> 00:02:06,450
to our elements.

51
00:02:06,450 --> 00:02:07,290
And hence that's

52
00:02:07,290 --> 00:02:08,919
what we're going to explore now

53
00:02:08,919 --> 00:02:11,060
so that we can then finally

54
00:02:11,060 --> 00:02:14,653
move on to building this demo here on our own.