1
00:00:06,050 --> 00:00:12,770
All in that last video we went ahead and saw how you can target a C Ss class.

2
00:00:12,880 --> 00:00:23,820
H-1 you know this could just as easily be a in our own class of like dat copy or we could be targeting

3
00:00:23,820 --> 00:00:33,690
an ID header and knew something like that you get added either way but now we want to actually target

4
00:00:33,810 --> 00:00:38,010
in an area within the page and we can add content to it dynamically.

5
00:00:38,100 --> 00:00:43,830
Well we're going to do is do a replace here so one machine is actually pick up on a lot of its current

6
00:00:43,830 --> 00:00:45,110
code right here.

7
00:00:45,210 --> 00:00:51,600
But I might create a new document and some might call this replace so I'll continue to see some of the

8
00:00:51,660 --> 00:00:56,460
power of acquiring some of the things that you can do and Mahamat gets my ideas of different ways that

9
00:00:56,460 --> 00:00:58,740
you can use a query within your document.

10
00:00:59,010 --> 00:01:03,840
So what I can do is I want to get rid of the one text on here I don't need that but I do want to do

11
00:01:03,840 --> 00:01:09,590
is create a new div class and this is where I have and that each team can see us as background and not

12
00:01:09,590 --> 00:01:12,270
time to really go in and teach you how to do these tags.

13
00:01:12,360 --> 00:01:14,810
So hopefully already understand what those are.

14
00:01:15,000 --> 00:01:17,610
If not again go back and check out some other great classes.

15
00:01:17,730 --> 00:01:24,030
But right now we're going to create this new div and we're to create an area in here and call this text

16
00:01:24,030 --> 00:01:24,810
box.

17
00:01:24,810 --> 00:01:32,510
All right so you get a div ID of text box and then with in there once helps.

18
00:01:32,520 --> 00:01:37,230
I wrote it right Dave Id goes to a text box.

19
00:01:37,440 --> 00:01:41,490
Now I've got this text box area up here and let's do something real quick.

20
00:01:41,490 --> 00:01:47,590
I'm not going to shove a little of a warm ups and copy here.

21
00:01:47,750 --> 00:01:48,990
All right.

22
00:01:49,410 --> 00:01:50,850
It's to that code.

23
00:01:51,750 --> 00:01:54,940
Text whenever and if they said in here.

24
00:01:54,990 --> 00:02:00,180
So if you're familiar with H.M. in the way CSSA works you'll know that this if I were to say this right

25
00:02:00,210 --> 00:02:07,510
now this copy would come into question just save it so we can take a look at it here.

26
00:02:08,960 --> 00:02:14,790
When I grab my new document here this was called replays and you can see that it's got my alarm and

27
00:02:14,800 --> 00:02:16,580
copy in there just as it should.

28
00:02:16,640 --> 00:02:17,410
Not really styling.

29
00:02:17,440 --> 00:02:22,660
I can create any styles for it and I'm just hurling this idea of text box and it's copy to it.

30
00:02:23,080 --> 00:02:29,110
So let's go back to the document up here and within here what I do is create something new here.

31
00:02:29,140 --> 00:02:31,210
I mean it creates something called a variable.

32
00:02:31,210 --> 00:02:38,530
Now again if you're familiar with CSSA should be kind of familiar as bait works the same way as creating

33
00:02:38,530 --> 00:02:45,010
a class or an ID is what we do is but with javascript we call it a variable so Z V-A are to say that

34
00:02:45,460 --> 00:02:51,030
and that is creating a piece of code that we can reuse but we can name we can call it whatever we want

35
00:02:51,030 --> 00:02:51,710
to hear.

36
00:02:52,120 --> 00:02:58,000
So within that sick create because I'm replacing this copy here I must say create a new variable of

37
00:02:58,240 --> 00:03:00,730
say new text.

38
00:03:01,150 --> 00:03:07,760
So anywhere that I put this new tax I can apply some kind of javascript or a query information to it.

39
00:03:07,810 --> 00:03:12,850
So again my variable is in the text and that's me a container for all different information and we add

40
00:03:12,850 --> 00:03:13,430
to it.

41
00:03:13,770 --> 00:03:22,120
And say that new text is equal to where you use a J.A.G. dollar sign right there and open and close

42
00:03:22,120 --> 00:03:32,070
a paragraph open a quote parentheses excuse me that paragraph quotes and in there I must say it's simple

43
00:03:32,390 --> 00:03:40,790
paragraph within here is the string within the variable and that P is going to say what I'm going to

44
00:03:40,790 --> 00:03:45,330
make it say is replace anything within this paragraph within this div area right here.

45
00:03:45,530 --> 00:03:52,180
Now if this were just a regular p this would be allowing me to keep this copy and add but I'm going

46
00:03:52,180 --> 00:03:54,430
to add here but I'll show you kind of what that means in a second.

47
00:03:54,430 --> 00:03:58,150
So we're saying variable new text is equal to.

48
00:03:58,180 --> 00:04:01,230
And Jake we were say this new paragraph tag.

49
00:04:01,470 --> 00:04:10,060
I mean I close it out with a semi-colon turn a couple times and then I say this new text you can see

50
00:04:10,060 --> 00:04:14,200
actually with the lot of each HTML editors actually pick up the fact that you created this new variable

51
00:04:14,460 --> 00:04:16,530
and the light reuse right there.

52
00:04:16,600 --> 00:04:17,720
Some say new paragraph.

53
00:04:17,830 --> 00:04:20,790
And just like what we did a couple of videos ago.

54
00:04:21,230 --> 00:04:22,130
I see a pen.

55
00:04:22,330 --> 00:04:22,880
All right.

56
00:04:22,990 --> 00:04:24,120
What's in there.

57
00:04:24,310 --> 00:04:30,290
I'm going to add some copy that I want to place all this information down here with.

58
00:04:30,550 --> 00:04:40,630
And I can do whatever I want with it I can add what I can add each Tamil text I can say H-1.

59
00:04:41,460 --> 00:04:48,540
I just replaced something and I got to close out that each one tag there.

60
00:04:50,170 --> 00:04:57,460
And what I should be doing is now that it is new text I'm going to append add this H1 tag right here

61
00:04:57,660 --> 00:05:00,270
and should hopefully be getting rid of that here.

62
00:05:00,340 --> 00:05:06,440
Now as of right now I really haven't targeted this area with my queries so I need to do that next.

63
00:05:06,440 --> 00:05:10,570
So I'm going to just replace what kind of currently wrote right here I'm going to go ahead just kind

64
00:05:10,570 --> 00:05:12,260
of the lead that.

65
00:05:12,490 --> 00:05:18,470
And I'll say if I were to rewrite it and have the dollar sign right there and the quotes and now.

66
00:05:18,490 --> 00:05:23,740
Now here's where I want to target the copy just so I have it exactly right.

67
00:05:23,750 --> 00:05:27,930
Make sure I get that camel case upper case B right there.

68
00:05:28,010 --> 00:05:29,500
A text box.

69
00:05:29,500 --> 00:05:37,540
Now a slightly new piece of inquiry here four years after the box MSA HMO Oh that's gonna let me do

70
00:05:37,540 --> 00:05:38,510
is target.

71
00:05:38,520 --> 00:05:39,850
Does each team help with this.

72
00:05:39,850 --> 00:05:45,240
Pete hang up here and I will say I put my variable in there.

73
00:05:45,240 --> 00:05:47,110
What is it going to do.

74
00:05:47,480 --> 00:05:55,090
I'm going to append this new text within this text box Heidi.

75
00:05:55,090 --> 00:05:56,650
All right does that make sense so far.

76
00:05:56,680 --> 00:06:04,320
So you have this text box right down here and MSA within their places new text variable and the should

77
00:06:04,320 --> 00:06:08,150
be it with that something had save NELA.

78
00:06:08,190 --> 00:06:11,840
I'm not deleting this copy in here to get this copy here this lorem ipsum.

79
00:06:12,100 --> 00:06:21,490
This is how it is played before now if I hit refresh now and SWI looks like I forgot to add some I'd

80
00:06:21,520 --> 00:06:23,980
call in there and do not forget to do that actually.

81
00:06:24,050 --> 00:06:28,920
Wrote here you say that comeback.

82
00:06:28,920 --> 00:06:33,820
So I didn't place there so I must have something going on in my document here.

83
00:06:33,840 --> 00:06:35,030
Yeah I'm a big dummy.

84
00:06:35,070 --> 00:06:41,820
You don't put the ID and the pound down there get rid of the pound sign and ashed the ID was text bikes

85
00:06:41,820 --> 00:06:46,680
that looks good looks good save that come back and hit refresh up here.

86
00:06:46,680 --> 00:06:47,140
There you go.

87
00:06:47,140 --> 00:06:49,940
So I just replaced something.

88
00:06:49,980 --> 00:06:56,370
So that becomes very powerful by being able to target certain areas within your page your document and

89
00:06:56,370 --> 00:07:01,440
be able to replace with certain taxes could become be very beneficial when it comes to maybe want to

90
00:07:01,440 --> 00:07:07,290
display certain text on a mobile device as opposed to the desktop or things like that maybe you don't

91
00:07:07,290 --> 00:07:13,440
want to get rid of the actual dogmatize which replace it temporarily other for that uses for it.

92
00:07:13,440 --> 00:07:18,220
So we are just getting started and there's some really cool things ahead here.