1
00:00:00,180 --> 00:00:01,960
Are you ready for another challenge?

2
00:00:01,980 --> 00:00:08,310
This is challenge number two, where we're going to take a list using an unordered list and also add

3
00:00:08,310 --> 00:00:14,310
an input element, take the value from the input element when the button gets clicked and add it to

4
00:00:14,310 --> 00:00:15,800
our list items.

5
00:00:15,960 --> 00:00:20,610
We've got some source code here that you can use or you can use the default document that we've been

6
00:00:20,610 --> 00:00:21,480
using earlier.

7
00:00:21,600 --> 00:00:27,180
So it doesn't matter as long as you've got an unordered list and input as well as a button in order

8
00:00:27,180 --> 00:00:28,890
to activate that input.

9
00:00:29,190 --> 00:00:36,150
And also as a bonus, if you do want to try this, you can add a condition to check to see if the input

10
00:00:36,300 --> 00:00:38,490
value has more than three characters.

11
00:00:38,580 --> 00:00:43,380
And if it does, then that's the only time that that item gets added to the list.

12
00:00:43,620 --> 00:00:44,880
So you can add that in as well.

13
00:00:45,150 --> 00:00:51,930
And in order to get back the value from an element, from an input element, so you need to select the

14
00:00:51,930 --> 00:00:54,570
element the same way that we've selected the other elements.

15
00:00:54,730 --> 00:01:00,000
And in this case, in order to get the value, you can select Dorte value.

16
00:01:00,020 --> 00:01:02,880
So that's where that value is contained within that object.

17
00:01:03,180 --> 00:01:04,590
So you can pause the video here.

18
00:01:04,590 --> 00:01:10,020
I'll give you a quick sneak peek at the solution where we've got the input element, dot value, and

19
00:01:10,020 --> 00:01:12,870
that's returning back the value of that input element.

20
00:01:13,170 --> 00:01:17,190
So pause the video, try it out and I'll walk you through the solution coming up.

21
00:01:17,190 --> 00:01:21,960
So with our editor and we do need to add one other thing we've added in an input field.

22
00:01:22,140 --> 00:01:24,480
So this is just we only have the one input field.

23
00:01:24,600 --> 00:01:26,160
And I'm also going to add in a button.

24
00:01:26,400 --> 00:01:29,160
And I can just simply just to add to the button.

25
00:01:29,520 --> 00:01:35,010
So if you have more than one input field, more than one button, then you're going to have to make

26
00:01:35,010 --> 00:01:36,000
them more unique.

27
00:01:36,180 --> 00:01:41,100
But in this case, I only have the two on the page and I'm going to select them by the tag name.

28
00:01:41,460 --> 00:01:45,240
So first, we need to select our mailing list that we're going to be using.

29
00:01:45,390 --> 00:01:50,100
And this is going to be where we're going to have all of the unordered lists.

30
00:01:50,280 --> 00:01:56,310
So all of the under the unordered list and the list items are all going to be sitting within this main

31
00:01:56,310 --> 00:01:56,730
list.

32
00:01:56,970 --> 00:02:03,660
So when I refresh this and if I look at the main list object, you can see that we've selected the unordered

33
00:02:03,660 --> 00:02:06,630
list and we only, of course, only have the one on the page.

34
00:02:06,930 --> 00:02:09,150
There's also the input element.

35
00:02:09,450 --> 00:02:12,270
So we want to get the value that's contained within the input element.

36
00:02:12,420 --> 00:02:18,210
And once again, only one of those available on the page so we can select it using query selector.

37
00:02:18,420 --> 00:02:21,860
So input tag and let's just double check that we have it.

38
00:02:22,110 --> 00:02:23,100
So we do have that.

39
00:02:23,100 --> 00:02:27,660
And if I put a value in here, select value, you can see the value gets returned.

40
00:02:27,670 --> 00:02:29,880
So that's how we can get the value from the input field.

41
00:02:30,510 --> 00:02:35,830
And then also we need to track the button, so need to add an event listener to the button.

42
00:02:36,210 --> 00:02:37,770
So again, only one button.

43
00:02:37,770 --> 00:02:40,070
So it makes it really easy to make that selection.

44
00:02:40,410 --> 00:02:45,480
So selecting the button and this is where we're adding the event listener and the event that we're listening

45
00:02:45,480 --> 00:02:48,290
for is a click and we can just do it as an anonymous function.

46
00:02:48,330 --> 00:02:53,550
So whatever the button gets clicked, then that's when we want to invoke our function and we want to

47
00:02:53,550 --> 00:02:54,360
append.

48
00:02:54,480 --> 00:02:59,680
So we want to create a new element and append it to the list with the contents of the input.

49
00:03:00,480 --> 00:03:02,550
So let's first create a list.

50
00:03:02,790 --> 00:03:08,160
So using document creates element and the element that we're creating is a list item.

51
00:03:08,580 --> 00:03:11,490
We also want to have a text node.

52
00:03:11,820 --> 00:03:18,300
So temp text and this is where we're going to create text node and the value of the text node is going

53
00:03:18,300 --> 00:03:20,010
to be coming from the input element.

54
00:03:20,020 --> 00:03:23,790
So that's the same value that's contained within there at the time when we click the button.

55
00:03:24,300 --> 00:03:26,370
So we're just going to select that value.

56
00:03:26,370 --> 00:03:31,880
And of course, we do need to specify it's the value of that object that we want to use it.

57
00:03:31,890 --> 00:03:37,950
Next, we need to upend the temp text to the list item.

58
00:03:38,130 --> 00:03:44,580
So append the text content and then selecting our main list, we're going to append a child to it.

59
00:03:44,820 --> 00:03:49,800
And the child that we're pending is the list item object that we've just created.

60
00:03:50,400 --> 00:03:51,300
So let's try that.

61
00:03:51,300 --> 00:03:57,180
And going down to here, we hit test and you can see that it's getting added to the list.

62
00:03:57,180 --> 00:03:59,130
And I know this is this is kind of small.

63
00:03:59,160 --> 00:04:01,920
I'll make it a little bit bigger and we'll go on the bigger screen.

64
00:04:01,920 --> 00:04:06,540
So whatever I type into here, you can see it gets added to the end of the list.

65
00:04:07,020 --> 00:04:11,640
And if we do inspect on that element, you can see these elements are being created.

66
00:04:11,910 --> 00:04:13,620
There's not a whole lot being contained within them.

67
00:04:14,340 --> 00:04:19,200
All the new ones just are just regular list items, what the text node inside.

68
00:04:19,380 --> 00:04:21,590
And you can become more creative if you want to as well.

69
00:04:21,780 --> 00:04:31,650
So there was a bonus to this and that was to check to see if the input element value length is greater

70
00:04:31,650 --> 00:04:32,610
than three.

71
00:04:33,120 --> 00:04:38,280
And if it is, then that's when we only add it, otherwise we're not going to add it.

72
00:04:38,580 --> 00:04:44,220
So going down here, if we only have two values, it's not going to add it three values, it's not going

73
00:04:44,220 --> 00:04:50,190
to add it, but it will add that to the list when there's four characters within the input value.

74
00:04:50,490 --> 00:04:52,950
So coming up, one more challenge that's still to come.