1
00:00:00,090 --> 00:00:04,800
Now that we've got Temel set up, we're ready to bring the JavaScript in and we need to create some

2
00:00:04,800 --> 00:00:06,960
interaction within our form elements.

3
00:00:07,170 --> 00:00:08,900
So we've got a number of different form elements.

4
00:00:08,910 --> 00:00:16,200
We've got a select as well as inputs that we want to make interactive, starting out with selecting

5
00:00:16,200 --> 00:00:22,920
the element for select so that whenever one of these options is changed, let's first set that up within

6
00:00:22,920 --> 00:00:23,600
an object.

7
00:00:23,620 --> 00:00:28,680
I just call that cell and then using a document and we can use query selector.

8
00:00:28,720 --> 00:00:34,830
We only got the one so we can use query selector for this one and selecting the element that has the

9
00:00:34,830 --> 00:00:39,930
tag of we can refresh and then make sure that we do have the right object.

10
00:00:40,040 --> 00:00:42,600
We can ready to adding an event listener for that.

11
00:00:42,930 --> 00:00:44,880
And then we've got a series of inputs.

12
00:00:45,210 --> 00:00:51,900
So let's set up an object for that as well, where we can use JavaScript to get all of the input.

13
00:00:51,900 --> 00:00:53,520
We can call it input all.

14
00:00:53,970 --> 00:00:59,640
And we're going to use document, query, selector and query selector also that we're selecting all

15
00:00:59,640 --> 00:01:06,570
of the element inputs and then as they get clicked, then we can distinguish between them next adding

16
00:01:06,570 --> 00:01:07,930
in the event listener.

17
00:01:08,370 --> 00:01:14,670
So we've got our sell object that we see over here doing add event listener and the event listener that

18
00:01:14,670 --> 00:01:16,560
we're listening for is change.

19
00:01:16,740 --> 00:01:22,020
And whenever it changes, then we're going to invoke a function and we can call that function, build.

20
00:01:22,140 --> 00:01:23,700
So run that function, build.

21
00:01:24,330 --> 00:01:27,260
And next, we also want to add event listener.

22
00:01:27,300 --> 00:01:28,560
We need to create that function.

23
00:01:28,560 --> 00:01:32,630
Of course, let me create that, creating a blank placeholder for that right now.

24
00:01:32,670 --> 00:01:38,520
It will pass in the event object actually won't matter which element triggers the build event, because

25
00:01:38,520 --> 00:01:44,460
we are going to be looking through all of these inputs in order to create our string so so we can set

26
00:01:44,460 --> 00:01:45,720
them all to be.

27
00:01:46,770 --> 00:01:52,650
Invoking the same function, and we see that here, we've got a. list so we can loop through the node

28
00:01:52,650 --> 00:01:56,250
list and with six we can use for each.

29
00:01:56,440 --> 00:02:01,680
And if you're using earlier versions, if you want compatibility, you can use just a regular for loop.

30
00:02:02,040 --> 00:02:08,940
But in this case, let's do this within this type of format where we're going to use for each and this

31
00:02:08,940 --> 00:02:11,640
will loop through each one of the items.

32
00:02:11,940 --> 00:02:15,870
So using a function and then we've got the item that we can list out.

33
00:02:15,990 --> 00:02:18,360
I'll see what that looks like before we add the event.

34
00:02:18,360 --> 00:02:23,570
Listener and as we refresh, we see we've got all of the inputs get listed in our console.

35
00:02:23,820 --> 00:02:25,420
So that's actually exactly what we want.

36
00:02:25,470 --> 00:02:30,120
Want all of these inputs listed in the console so that we can attach that listeners to them.

37
00:02:30,540 --> 00:02:32,250
So that's where we've got item.

38
00:02:32,400 --> 00:02:38,630
And because this is now in an object format, we can add the event listener change to that item.

39
00:02:38,820 --> 00:02:40,740
So refresh one more time.

40
00:02:40,890 --> 00:02:45,530
And now whenever I make any of these changes, you're going to see that this gets invoked.

41
00:02:45,720 --> 00:02:52,380
So if I type something in here, if I update the color, if I update this color, you see that we're

42
00:02:52,380 --> 00:02:58,650
always invoking this function build and we're adding something within the console, within the console

43
00:02:58,650 --> 00:02:59,220
message.

44
00:02:59,610 --> 00:03:06,510
So coming up next, our objective is to take the values that we've got within these input fields and

45
00:03:06,510 --> 00:03:09,310
then simply add them into our string.

46
00:03:09,600 --> 00:03:14,550
So that's still to come in the upcoming lesson where we're going to build out our placeholder image

47
00:03:14,550 --> 00:03:14,970
path.

48
00:03:14,970 --> 00:03:21,660
So set up your event listeners to your inputs and test them out, make sure that they're working using

49
00:03:21,660 --> 00:03:22,470
the console log.