1
00:00:00,180 --> 00:00:07,470
Hi and welcome back in this lesson, we're going to add a few more inputs into our input area so that

2
00:00:07,470 --> 00:00:10,320
we can update some elements and element content.

3
00:00:10,680 --> 00:00:12,360
So let's add in another input.

4
00:00:12,360 --> 00:00:16,620
And this input is going to be background color of the element.

5
00:00:16,980 --> 00:00:19,890
We're going to also adjust the style properties of the element.

6
00:00:20,190 --> 00:00:26,460
So background, I'm just going to do some simple text here in order to indicate what this field is going

7
00:00:26,460 --> 00:00:27,010
to be for.

8
00:00:27,330 --> 00:00:35,700
So this type and I'm going to use HTML5, so using the color selector and we can call this background

9
00:00:36,420 --> 00:00:40,500
and I'll add in another line break and create another input.

10
00:00:40,620 --> 00:00:43,080
And this input is also a color.

11
00:00:43,590 --> 00:00:46,410
And this is going to be the text color.

12
00:00:47,490 --> 00:00:54,810
So it's going to update the color value of the field of the input and I'll move the submit button to

13
00:00:54,810 --> 00:00:55,230
the bottom.

14
00:00:55,740 --> 00:01:01,350
So we're still going to be using that mean div on our screen and we're going to be updating it dynamically

15
00:01:01,350 --> 00:01:02,490
with JavaScript.

16
00:01:03,000 --> 00:01:06,480
And the way that we want to do that is we want to still add in that button.

17
00:01:06,570 --> 00:01:11,910
So whenever that submit gets pressed and I'm going to update some of the values here contained within

18
00:01:11,910 --> 00:01:12,710
the HTML.

19
00:01:13,200 --> 00:01:17,600
So just call this update and this is no longer going to be a first name.

20
00:01:17,610 --> 00:01:19,170
This is going to be output.

21
00:01:19,620 --> 00:01:26,580
And then as we update it, we've got to make sure that we're updating the corresponding values in JavaScript

22
00:01:26,580 --> 00:01:30,320
as well so that we're still able to make those element selections.

23
00:01:30,660 --> 00:01:36,990
So now we've got a little bit more content available to us and just double check that we're still getting

24
00:01:36,990 --> 00:01:39,990
that same input so that one is still connected.

25
00:01:40,200 --> 00:01:45,540
And we're going to update the contents whenever we're updating and making the click.

26
00:01:46,120 --> 00:01:47,820
So we've got all of this information.

27
00:01:47,820 --> 00:01:53,440
We can get rid of it because we're actually we already know which element we're making the update to.

28
00:01:54,060 --> 00:01:55,970
So if we were to take that element.

29
00:01:55,980 --> 00:02:02,570
So this represents the selected element and this is the only div that we have on the page.

30
00:02:03,090 --> 00:02:11,160
So if we output and I'll just clear this up, so if we have our selected element so just us, we can

31
00:02:11,160 --> 00:02:17,040
select the element, we can also update its style, we can update its background.

32
00:02:17,040 --> 00:02:18,030
I'll make this bigger.

33
00:02:18,240 --> 00:02:22,710
We can update its background properties as well as its text properties.

34
00:02:23,280 --> 00:02:28,830
And Chrome is giving me the dropdown option here so we can set the background color.

35
00:02:29,130 --> 00:02:36,540
And if we want to set it to blue, all we have to do is equal it to blue and you can see it updates

36
00:02:36,540 --> 00:02:38,400
immediately within the DOM.

37
00:02:38,730 --> 00:02:41,100
You can also update the text color.

38
00:02:41,100 --> 00:02:44,130
So the same way updating the style attribute.

39
00:02:44,490 --> 00:02:48,110
And in this case we're going to update the color value.

40
00:02:48,390 --> 00:02:50,820
So it's going to represent the font color.

41
00:02:51,150 --> 00:02:54,540
So if we wanted to update it to white, we could update it to white.

42
00:02:54,900 --> 00:02:59,490
And there's a ton of different options that you can see when you're selecting style.

43
00:02:59,610 --> 00:03:02,970
And even in Chrome, there's a lot of options and dropdown.

44
00:03:02,970 --> 00:03:08,310
So you can update your background colors, you can repeat it, you can update your border.

45
00:03:08,460 --> 00:03:12,840
And just as you would with any of the success, you've got all of these options.

46
00:03:12,840 --> 00:03:14,790
You can do column widths.

47
00:03:14,790 --> 00:03:20,610
And there's just really pretty much anything to do with styling you can do here within JavaScript.

48
00:03:20,820 --> 00:03:23,140
You can also update the padding if you want.

49
00:03:23,640 --> 00:03:29,850
So setting all of the padding to five picks and that gave us more padding so that when we go back to

50
00:03:29,850 --> 00:03:34,770
the element, you can see that within the element itself, we've updated the style properties.

51
00:03:34,770 --> 00:03:40,650
So given a background color of blue, we've given a color of white padding of five picks and now that's

52
00:03:40,650 --> 00:03:41,180
present.

53
00:03:41,340 --> 00:03:46,290
So just as we were updating the inner text, we can also update these color values.

54
00:03:46,950 --> 00:03:49,590
So let's go ahead and make those updates.

55
00:03:49,980 --> 00:03:55,560
So selecting those input values, we need to also select those inputs.

56
00:03:55,860 --> 00:03:59,250
So this one will be select background.

57
00:03:59,940 --> 00:04:06,150
And we're selecting the element with the name of background, the input with the name of background.

58
00:04:06,480 --> 00:04:12,840
And we're also selecting the element with so we can call this one text and the name of text so that

59
00:04:12,840 --> 00:04:14,040
we know what we're referencing.

60
00:04:14,340 --> 00:04:20,850
And within the console, let's output the value that's contained within the background and we'll also

61
00:04:20,850 --> 00:04:28,740
output the value that's contained within the text, the text and outputting the value of that object.

62
00:04:28,890 --> 00:04:34,350
So just as we did with the input where we've got the text value contained within the input, we're going

63
00:04:34,350 --> 00:04:36,180
to retrieve back these color values.

64
00:04:36,420 --> 00:04:43,260
So these are HTML five, and this gives us an automatic color picker that we can use in order to update

65
00:04:43,260 --> 00:04:43,860
colors.

66
00:04:43,860 --> 00:04:48,990
So let's do that and we'll try that out so we can set a different color here.

67
00:04:49,110 --> 00:04:51,450
You can also set a default color if you want.

68
00:04:51,690 --> 00:04:56,400
And then now when I press update, you're going to see that we're outputting the background color and

69
00:04:56,400 --> 00:04:58,170
we're also updating that text color.

70
00:04:58,410 --> 00:04:59,700
So if we want to update the.

71
00:05:00,040 --> 00:05:05,470
And we want to update it to blue, we can update it that way, and now when we do update, you're going

72
00:05:05,470 --> 00:05:08,620
to see that the new color values are present within those inputs.

73
00:05:09,220 --> 00:05:14,140
So now it's a matter of just as we saw here, where we can get that element.

74
00:05:14,150 --> 00:05:18,870
So we select that element and apply it style properties.

75
00:05:19,180 --> 00:05:24,810
So using the style method and the value that we want to update is the background color.

76
00:05:25,540 --> 00:05:32,770
So selecting the object properly, we need to just simply apply the value of the background.

77
00:05:32,870 --> 00:05:37,170
So it's that input value and we're applying the background color to that.

78
00:05:37,270 --> 00:05:40,090
And we're also going to do the same thing for text.

79
00:05:40,660 --> 00:05:44,830
So updating in this case, it's not background color, it's just going to be color.

80
00:05:45,160 --> 00:05:49,380
And we're updating it to whatever the values contained within here.

81
00:05:50,050 --> 00:05:52,500
And I'm also going to set some defaults here.

82
00:05:52,540 --> 00:05:56,940
So so the default value of we use hexadecimal there.

83
00:05:57,160 --> 00:05:58,500
So that's black.

84
00:05:58,510 --> 00:06:04,620
And actually let's change this to white because the default value is white and this is black.

85
00:06:04,930 --> 00:06:10,600
So to see that we've got white so it can make an update and update the text color and as soon as we

86
00:06:10,600 --> 00:06:15,330
update it, you see that those that value of that input updates as well.

87
00:06:15,340 --> 00:06:17,200
And this is all done via JavaScript.

88
00:06:17,440 --> 00:06:19,870
And then you can set these colors to whatever you want.

89
00:06:20,020 --> 00:06:25,630
And every time you press update, you're going to see that it is actually updating that element style,

90
00:06:25,630 --> 00:06:26,670
attribute values.

91
00:06:26,830 --> 00:06:30,370
So go ahead and add this into your project, try it out.

92
00:06:30,820 --> 00:06:33,640
And coming up, we're going to extend on this functionality.

93
00:06:33,790 --> 00:06:35,290
We're going to extend on the functionality.