1
00:00:00,120 --> 00:00:04,380
So you want JavaScript, where you're going to get it in this lesson, or we're going to be updating

2
00:00:04,380 --> 00:00:07,970
that element that we created in the last lesson and applying some styling to it.

3
00:00:07,980 --> 00:00:09,070
And I know what you're thinking.

4
00:00:09,090 --> 00:00:12,800
Well, it's a lot easier doing it in success, but that's not what you're here for.

5
00:00:12,840 --> 00:00:14,960
You're here to learn practice JavaScript.

6
00:00:15,180 --> 00:00:22,140
So selecting that my block object, applying the style value to the object and what we can do is we

7
00:00:22,140 --> 00:00:28,080
can set a width so you can set all of your styling using JavaScript, just as you would with regular

8
00:00:28,080 --> 00:00:29,220
styling, with success.

9
00:00:29,490 --> 00:00:35,580
Next, let's do style and we can set a date for it and we'll set this one to be 100 picks as well.

10
00:00:35,610 --> 00:00:39,180
You can also update and add within style.

11
00:00:39,390 --> 00:00:41,640
And as you can see, there's a lot of options here.

12
00:00:41,670 --> 00:00:44,790
Anything that you can do in staling, you can do here as well.

13
00:00:45,030 --> 00:00:47,180
And I set the background color to read.

14
00:00:47,190 --> 00:00:49,200
Let's refresh, see what this looks like.

15
00:00:49,270 --> 00:00:53,810
Also, let's update the style color and set that to wait.

16
00:00:53,970 --> 00:00:58,910
And now let's do some more interesting ones where we can set the line height.

17
00:00:58,920 --> 00:01:05,230
So again, that my block object taking the style value and then applying line height.

18
00:01:05,250 --> 00:01:09,120
So this will help vertically center the text content.

19
00:01:09,300 --> 00:01:14,910
So set that to hundred pics and we'll also take the my block and style.

20
00:01:15,300 --> 00:01:20,340
And this one is the text line so we can center align the text.

21
00:01:20,640 --> 00:01:21,700
So let's refresh that.

22
00:01:21,720 --> 00:01:22,680
See what that looks like.

23
00:01:22,830 --> 00:01:25,190
So now we've got our text more centered.

24
00:01:25,230 --> 00:01:29,090
Also want to be able to move this element around with JavaScript.

25
00:01:29,400 --> 00:01:36,610
So we need to set its style and updating its style position value to be absolute.

26
00:01:36,630 --> 00:01:38,870
And this will give us the ability to position it.

27
00:01:39,150 --> 00:01:42,550
So taking style and we can position top position.

28
00:01:42,580 --> 00:01:46,050
So let's set the top position and don't forget to add in the picks.

29
00:01:46,050 --> 00:01:51,350
You always do need to add in the picks and the values are represented as string values.

30
00:01:51,690 --> 00:01:53,390
So it's not numeric.

31
00:01:53,400 --> 00:01:59,370
It's always a string value with the picks attached to it, just as you would when you're styling, adding

32
00:01:59,370 --> 00:02:00,310
the style property.

33
00:02:00,660 --> 00:02:02,460
So also a left position.

34
00:02:02,670 --> 00:02:04,650
So let's do this as one fifty.

35
00:02:04,860 --> 00:02:06,090
So see what it looks like now.

36
00:02:06,330 --> 00:02:09,000
So go ahead and try this out practice.

37
00:02:09,000 --> 00:02:13,890
Get more familiar with what your options are when you're updating the style of an element.

38
00:02:14,040 --> 00:02:17,610
And you can also do this when you select an element from the page.

39
00:02:17,820 --> 00:02:22,020
But just so happens that we want to really focus on JavaScript within this section.

40
00:02:22,200 --> 00:02:28,770
So we are creating an element on the fly using JavaScript, and then we can attach all of those properties

41
00:02:28,770 --> 00:02:32,130
and values when we've got that element that we're selecting.

42
00:02:32,280 --> 00:02:36,600
And this element is always going to be available in the my block variable.

43
00:02:36,600 --> 00:02:38,130
And this is global.

44
00:02:38,130 --> 00:02:44,310
So we can reference it and we can update any of these values anywhere within our code.

45
00:02:44,310 --> 00:02:50,610
So if we have a function, if we want to move it, we can update its style position of top and left,

46
00:02:50,610 --> 00:02:53,940
and that will effectively move the element to a different spot.

47
00:02:54,270 --> 00:02:56,610
And I'll show you how to do that in the upcoming lesson.