1
00:00:05,320 --> 00:00:12,760
So it's kind of a fun one morning go through really modifying the copy with existing CSSA class.

2
00:00:12,900 --> 00:00:18,420
So what I've done so far is just kept our same basic who'd been through the other videos I've seen basically

3
00:00:18,420 --> 00:00:23,350
just a couple of paragraphs here so they can see things being targeted within an idea of container.

4
00:00:23,400 --> 00:00:28,330
But I did do this time as an added form buttons or just text links up here.

5
00:00:28,500 --> 00:00:29,940
We're going to add a class.

6
00:00:30,030 --> 00:00:35,340
We will remove a class will toggle a class which will be turning on and off just by using the one button

7
00:00:35,340 --> 00:00:36,980
as opposed to having to use two.

8
00:00:37,020 --> 00:00:42,420
We're also going to increase a class so you can see what those are but I'm into all that through CSSA

9
00:00:42,480 --> 00:00:46,380
and through the javascript or the query Javascript.

10
00:00:46,380 --> 00:00:52,680
So I do have is up here is my style and I'm going to target it through something called color box and

11
00:00:52,680 --> 00:00:57,280
shows me the colors on the short and simple and I don't screw up any typing here.

12
00:00:57,570 --> 00:01:03,570
So style accreted of color you can pick whatever color you want and that should change the color and

13
00:01:03,570 --> 00:01:03,940
appear.

14
00:01:03,930 --> 00:01:08,670
I've got my J.A.G. link and within here I've got the javascript or the G20 script that we're going to

15
00:01:08,670 --> 00:01:13,800
start writing and we're going to start with the very first one that we have down here at class.

16
00:01:13,810 --> 00:01:19,110
In fact I will go ahead and copy that and we will do is we start with everyday grade and start with

17
00:01:19,110 --> 00:01:20,050
the dollar sign.

18
00:01:20,640 --> 00:01:27,300
If I open and close friends of my close quotes and we say hash tag and class the first one that we do

19
00:01:27,300 --> 00:01:32,650
is for Target that button with an event and that event is going to be a click.

20
00:01:32,760 --> 00:01:40,540
So one click create a function and that function will open and close with Prince and curly brackets

21
00:01:40,540 --> 00:01:42,340
right there and go I can close it out.

22
00:01:42,360 --> 00:01:43,630
But don't forget that.

23
00:01:43,630 --> 00:01:49,780
So what's going to happen when somebody clicks on the ADD class we are going to using the dollar sign

24
00:01:50,500 --> 00:01:57,280
and say and change the substance go ahead and quotes there the paragraph tag.

25
00:01:57,280 --> 00:01:59,840
And we're going to start with the first pair.

26
00:02:00,160 --> 00:02:05,160
So again not familiar with this still I question and I go back and watch some of the other videos where

27
00:02:05,210 --> 00:02:09,320
we're Do the field training or just brush up on your CSSA and said the same thing.

28
00:02:09,370 --> 00:02:14,260
We're a target just the first paragraph here and we're going to do is we're going to have a function

29
00:02:14,260 --> 00:02:17,450
called add class.

30
00:02:17,500 --> 00:02:19,610
So I know that's kind of the name but I named this right here.

31
00:02:19,620 --> 00:02:20,530
That's not the same.

32
00:02:20,530 --> 00:02:22,440
This is an actual jaggery function.

33
00:02:22,460 --> 00:02:28,030
You can add a class C Ss class and we can do is we can pick from all of our different classes.

34
00:02:28,030 --> 00:02:32,530
Now most web pages are going to have hundreds and hundreds of different classes all set up in their

35
00:02:32,530 --> 00:02:33,630
document.

36
00:02:33,720 --> 00:02:36,350
So you need to make sure that you are targeting the correct one.

37
00:02:36,360 --> 00:02:42,490
What we'll do is open it close up friends but some are saying to use single quotes and we will say color.

38
00:02:42,930 --> 00:02:53,020
So we are targeting that color class and class there and hit that close that out and what we can do

39
00:02:53,020 --> 00:02:58,640
is we can now go ahead and just copy and paste its little function that we created right here and I'm

40
00:02:58,660 --> 00:03:00,840
going to say remove class.

41
00:03:01,280 --> 00:03:01,820
OK.

42
00:03:01,960 --> 00:03:06,100
So now we're starting to remove class and we should get this bill written and removed dash class a lower

43
00:03:06,100 --> 00:03:09,190
case from a second button remove class.

44
00:03:09,190 --> 00:03:12,210
So again it will be another click function or a click event.

45
00:03:12,460 --> 00:03:13,740
The function will be here.

46
00:03:13,750 --> 00:03:15,680
Brianna targer that first paragraph again.

47
00:03:15,850 --> 00:03:18,710
So you can actually see that class being removed from here.

48
00:03:18,940 --> 00:03:22,600
And instead of and class will say move class.

49
00:03:22,600 --> 00:03:24,180
So very similar to our button.

50
00:03:24,180 --> 00:03:30,250
Here again are I.D. for the button and we will say still going to remove this color class.

51
00:03:30,370 --> 00:03:37,080
So maybe within this maybe there is one class that was a color that had just a color to it and you want

52
00:03:37,080 --> 00:03:41,550
to remove the class where you can actually target a different one that was removing the color and changing

53
00:03:41,550 --> 00:03:43,170
the font size or something like that.

54
00:03:43,350 --> 00:03:48,570
So you could target different CSSA classes here to keep this simple and just target the same one.

55
00:03:49,560 --> 00:03:53,010
And I'm going to paste again this first one that I had here.

56
00:03:53,010 --> 00:03:59,710
We're in target the third button of Tuggle class to change that to type of class.

57
00:03:59,730 --> 00:04:04,790
There is no click function as you are still going to target that first paragraph again.

58
00:04:05,070 --> 00:04:11,970
And you can guess it's going to be low class the other function as part of Jake where we are right here

59
00:04:11,970 --> 00:04:14,680
where we can target target toggle on him.

60
00:04:14,890 --> 00:04:17,560
These are style that we've created here.

61
00:04:17,570 --> 00:04:21,820
Again we only have the one so we're going to keep targeting this one for right now.

62
00:04:21,960 --> 00:04:27,360
That's what we want to do is we are going to do the in crease size.

63
00:04:27,360 --> 00:04:35,760
What do they call that one increase class something say target the increase class here this will be

64
00:04:35,760 --> 00:04:39,230
another quick function and we're a target that first paragraph again.

65
00:04:39,360 --> 00:04:46,530
And instead of targeting the style that we've done down here I just want to target C S S.

66
00:04:46,630 --> 00:04:50,610
This is kind of a cool one little bit different than anything I've shown in the previous videos here

67
00:04:50,990 --> 00:04:52,380
although very similar.

68
00:04:52,380 --> 00:05:01,750
We will say within the parentheses there and open up a set of quotes and we will say font size.

69
00:05:02,310 --> 00:05:06,490
And remember we keep them the quotes there that is the value that we are.

70
00:05:06,630 --> 00:05:10,870
Excuse me that is the the file.

71
00:05:11,110 --> 00:05:14,440
Is what retired in through CSSA right there is the word font size.

72
00:05:14,440 --> 00:05:18,240
And we do a comma while open up another set of quotes right there.

73
00:05:18,370 --> 00:05:20,150
And what we will do is you add.

74
00:05:20,200 --> 00:05:22,440
This is kind of a little bit of programming right here.

75
00:05:22,480 --> 00:05:23,860
There is a plus.

76
00:05:23,930 --> 00:05:26,750
Equals one pixel.

77
00:05:26,770 --> 00:05:29,410
So it's going to add one pixel.

78
00:05:29,440 --> 00:05:30,930
Every time I click on it.

79
00:05:31,150 --> 00:05:37,070
So I can keep on increasing the size of this and I can also create a decrease class option and where

80
00:05:37,100 --> 00:05:40,990
said minus equals one pixel so it'll decrease the size of the font.

81
00:05:41,080 --> 00:05:44,730
So somebody could maybe increase or decrease the size of the font on the Web site.

82
00:05:44,800 --> 00:05:46,440
Be very very helpful.

83
00:05:46,550 --> 00:05:51,370
Definitely something I've seen in the past could get you x.

84
00:05:51,430 --> 00:05:51,730
Right.

85
00:05:51,730 --> 00:05:55,990
So it's going save this hope I don't have any errors in that seeing thing going up in here right now

86
00:05:56,770 --> 00:06:01,630
and I need to be saving this one as it's constancy.

87
00:06:01,840 --> 00:06:09,790
SS modify I'll save that my J.A.G. document and go and come back and find CSSA modified.

88
00:06:09,790 --> 00:06:13,430
All right so you got the three paragraphs long the first one should be targeted here.

89
00:06:13,450 --> 00:06:19,910
So I say add class size and that blue color to my first paragraph removed should get rid of it.

90
00:06:19,930 --> 00:06:25,840
So go back to the black so I'm no longer applying that class to this document toggle class salaamed

91
00:06:25,840 --> 00:06:32,920
to term black blue black blue black blue just by clicking on the one button here and increase Salame

92
00:06:32,920 --> 00:06:35,670
to keep on clicking and increasing the size of it.

93
00:06:36,700 --> 00:06:42,890
I've read things you can do by targeting these CSSA classes by using ed class remove class and toggle

94
00:06:42,910 --> 00:06:43,720
class.

95
00:06:43,720 --> 00:06:45,130
All three are J.A.G. document.