Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,530 --> 00:00:07,400
In this video we're going to start doing is managing the state of our application specifically.
2
00:00:07,400 --> 00:00:11,120
We're going to be managing the options that we have clicked on.
3
00:00:11,420 --> 00:00:18,710
So when we click on, let's say Girl, our state should change so that the girl is the selected option
4
00:00:18,890 --> 00:00:21,200
and this should be all colored in.
5
00:00:21,770 --> 00:00:24,110
So we should know how to do this.
6
00:00:24,350 --> 00:00:27,500
However, if you don't, let's just go ahead and follow along.
7
00:00:28,310 --> 00:00:30,560
So we're going to create a script tag.
8
00:00:30,560 --> 00:00:36,080
This is where we're going to house all of our JavaScript, and thus we're also going to house all of
9
00:00:36,080 --> 00:00:37,580
our state as well.
10
00:00:37,940 --> 00:00:44,390
So right inside of this script tag, so right in here, what we're going to do is we're actually going
11
00:00:44,390 --> 00:00:47,000
to use the composition API for this.
12
00:00:47,000 --> 00:00:50,570
This is for Vue three and NOx utilizes Vue three.
13
00:00:50,900 --> 00:00:56,060
So instead of just having an empty script tag, what I'm going to do is I'm going to say script setup
14
00:00:56,060 --> 00:00:57,170
like so.
15
00:00:57,470 --> 00:01:03,890
And what I actually prefer to do is grab the script and just place it all the way at the very top.
16
00:01:03,890 --> 00:01:08,180
I think it's just a little bit more organized, doesn't really matter where you place it, but I prefer
17
00:01:08,180 --> 00:01:13,160
to have my script here, my template here, and then my CSAs at the very end.
18
00:01:13,880 --> 00:01:18,860
Okay, so now that we got that set up, we can start creating our state.
19
00:01:19,700 --> 00:01:26,030
So let's go over here and I'm going to declare a new variable, and this variable is going to be called
20
00:01:26,210 --> 00:01:27,020
options.
21
00:01:27,410 --> 00:01:35,150
Now, this is going to store the current state of our application and it's going to store a an object
22
00:01:35,150 --> 00:01:35,840
to do this.
23
00:01:36,140 --> 00:01:43,790
So what we're going to do is utilize reactive in order to have a state of objects.
24
00:01:44,240 --> 00:01:52,160
Now notice that I actually didn't import reactive from a view Knox is really, really great when it
25
00:01:52,160 --> 00:01:54,650
comes to auto importation.
26
00:01:54,950 --> 00:01:59,090
So what we can do here is just very simply say reactive like so.
27
00:01:59,270 --> 00:02:04,790
And NOx will understand that this is reactive from Vue and import it into this file.
28
00:02:05,420 --> 00:02:07,910
So right over here we're going to have three different states.
29
00:02:07,910 --> 00:02:10,190
This is going to be the gender initially.
30
00:02:10,190 --> 00:02:12,230
Let's just set it as girl.
31
00:02:12,680 --> 00:02:16,250
And then over here we're going to have the popularity.
32
00:02:16,280 --> 00:02:24,680
So pop you layer a T initially, let's just send that as unique and then we're also going to have the
33
00:02:24,680 --> 00:02:25,700
length initially.
34
00:02:25,700 --> 00:02:27,560
Let's have that as short.
35
00:02:27,950 --> 00:02:35,510
So right over here, this is our current state of our application and of course we want to modify this
36
00:02:35,510 --> 00:02:36,500
state in some way.
37
00:02:36,770 --> 00:02:42,650
But for now, what we want to do is we want to grab this state inside of the HTML template and change
38
00:02:42,740 --> 00:02:44,960
the background color of the button.
39
00:02:45,350 --> 00:02:52,160
So if it's girl, then this button right over here, it should be colored in and then over here for
40
00:02:52,160 --> 00:02:56,750
unique because the popularity is unique, this should be colored in and also this should be colored
41
00:02:56,750 --> 00:02:57,620
in as well.
42
00:02:58,190 --> 00:03:01,040
So let's actually go ahead into our buttons.
43
00:03:01,760 --> 00:03:08,000
And what I'm going to do here is I'm going to add another class right over here, right at the very
44
00:03:08,000 --> 00:03:08,540
bottom.
45
00:03:08,780 --> 00:03:11,720
And this I'm going to call option active.
46
00:03:11,720 --> 00:03:16,850
So I'm going to say option active because this is the active button that's being clicked.
47
00:03:17,100 --> 00:03:19,970
We're going to give that some some styles.
48
00:03:20,270 --> 00:03:25,640
So what I'm going to do is I'm going to give it a background color of that border that we have right
49
00:03:25,640 --> 00:03:26,060
over here.
50
00:03:26,060 --> 00:03:28,730
So this outline, this let's go ahead and copy that.
51
00:03:30,030 --> 00:03:31,500
And paste that in there.
52
00:03:31,980 --> 00:03:35,040
And we're also going to give it a color of white.
53
00:03:35,050 --> 00:03:38,040
So we're going to change the color to white like so.
54
00:03:38,490 --> 00:03:41,730
And so now what we're going to do is right over here.
55
00:03:42,780 --> 00:03:46,660
So right over here on this button, we're going to actually apply that as well.
56
00:03:46,680 --> 00:03:48,890
And we should get something that looks like.
57
00:03:48,900 --> 00:03:53,790
So now right now, we are adding it manually.
58
00:03:53,790 --> 00:04:00,330
We what we want to do is we want to do it dynamically only if the option that gender is equal to girl.
59
00:04:00,930 --> 00:04:05,520
So let's go over here and let's actually make this multiple lines because this is going to get a little
60
00:04:05,520 --> 00:04:06,780
bit more complicated.
61
00:04:07,410 --> 00:04:09,690
So what we're going to do here is we're going to say.
62
00:04:10,630 --> 00:04:15,460
All in class to define that we want to have some sort of JavaScript in these parentheses.
63
00:04:15,980 --> 00:04:21,070
We're going to say only if the options dot length.
64
00:04:21,880 --> 00:04:23,190
Or the options.
65
00:04:23,200 --> 00:04:23,790
Diet.
66
00:04:23,800 --> 00:04:24,460
Not length.
67
00:04:24,460 --> 00:04:24,870
Diet.
68
00:04:24,880 --> 00:04:25,690
Gender.
69
00:04:26,530 --> 00:04:28,870
Triple equals girl.
70
00:04:29,710 --> 00:04:33,000
Then what we want to do is apply the class.
71
00:04:33,040 --> 00:04:33,610
Then we can say.
72
00:04:33,610 --> 00:04:34,150
And.
73
00:04:34,150 --> 00:04:35,590
And so.
74
00:04:35,590 --> 00:04:35,920
And.
75
00:04:35,920 --> 00:04:36,370
And.
76
00:04:36,370 --> 00:04:37,330
And then quotes.
77
00:04:37,860 --> 00:04:40,570
Then over here we can say option active.
78
00:04:41,000 --> 00:04:43,360
So now if we save that, you can see that this is working.
79
00:04:43,360 --> 00:04:44,400
A Okay.
80
00:04:44,840 --> 00:04:49,240
We're probably going to want to do that for all of the other buttons as well.
81
00:04:49,660 --> 00:04:53,800
So right over here we can say if this is equal to unisex.
82
00:04:55,480 --> 00:04:56,890
So unisex.
83
00:04:57,280 --> 00:05:02,030
And then over here we can say the same thing and say this is equal to boy.
84
00:05:02,590 --> 00:05:04,030
Let's go ahead and save that.
85
00:05:04,630 --> 00:05:10,600
And now let's go ahead and change this, for example, to unisex.
86
00:05:10,900 --> 00:05:14,230
Now you can see that this one's the one that is colored in.
87
00:05:14,830 --> 00:05:16,450
Okay, so this is looking good.
88
00:05:16,690 --> 00:05:20,070
Let's actually apply these to the different buttons as well.
89
00:05:20,090 --> 00:05:21,940
So the the trendy and unique button.
90
00:05:21,940 --> 00:05:23,080
So just grab this.
91
00:05:24,660 --> 00:05:29,310
And let's go here, paste that in and then let's go over here.
92
00:05:29,340 --> 00:05:30,420
Paste that in as well.
93
00:05:30,780 --> 00:05:35,430
We're going to say if the options dot and where was it?
94
00:05:35,460 --> 00:05:38,100
Options dot popularity.
95
00:05:39,760 --> 00:05:43,160
If that is equal to trendy.
96
00:05:44,130 --> 00:05:47,050
And then over here we're going to say options.
97
00:05:47,350 --> 00:05:52,210
The popularity of that is equal to unique.
98
00:05:53,510 --> 00:05:54,980
Let's go ahead and save that.
99
00:05:55,220 --> 00:06:01,460
And by the way, if you're wondering, how in the world do we have access to this reactive state inside
100
00:06:01,460 --> 00:06:02,210
of the template?
101
00:06:02,690 --> 00:06:03,890
We're not exporting anything.
102
00:06:03,890 --> 00:06:07,220
Well, with script set up, we don't have to export anything.
103
00:06:07,430 --> 00:06:10,240
Everything is just automatically imported over here.
104
00:06:10,250 --> 00:06:11,720
We can have access to it.
105
00:06:12,200 --> 00:06:18,980
Whereas with maybe the scrub set up function or the options API, we have to explicitly say what we
106
00:06:18,980 --> 00:06:20,000
want to export.
107
00:06:20,420 --> 00:06:24,200
So that's why we have access to this options object right over here.
108
00:06:24,980 --> 00:06:28,670
So last thing over here is what we're going to do is we're going to just copy this.
109
00:06:29,950 --> 00:06:31,570
Paste that in here like moi.
110
00:06:32,200 --> 00:06:34,600
And then over here we're going to say that this is going to be the length.
111
00:06:36,600 --> 00:06:37,350
So length.
112
00:06:37,890 --> 00:06:43,920
And then right over here, we're going to change this to this is going to be longer.
113
00:06:44,700 --> 00:06:51,270
So let's go ahead and copy that two more times, paste that in there and then paste that in there.
114
00:06:51,810 --> 00:06:57,400
And this is going to be all and this is going to be shorts.
115
00:06:58,410 --> 00:06:59,910
That's pretty much all it is that we need.
116
00:07:00,030 --> 00:07:06,300
And now you can see that we have some state going on here, maybe just to make this a little bit nicer,
117
00:07:06,660 --> 00:07:07,710
let's make this long.
118
00:07:07,710 --> 00:07:11,310
So we have, you know, some some mixture of things going on.
119
00:07:11,790 --> 00:07:12,120
Okay.
120
00:07:12,120 --> 00:07:13,130
So this is really good.
121
00:07:13,140 --> 00:07:18,150
Now, of course, if we click on it, what we need to do is we need to change our state.
122
00:07:18,510 --> 00:07:25,200
And by changing the state, then it will also change the different colors of the buttons.
123
00:07:25,470 --> 00:07:31,500
But before we do that, I actually want to refactor the way that we've done this, because we've done
124
00:07:31,500 --> 00:07:33,990
this with plain old vanilla JavaScript.
125
00:07:34,230 --> 00:07:39,840
But I prefer, in my opinion, to use TypeScript, and that's what we're going to be using throughout
126
00:07:39,840 --> 00:07:40,500
this course.
127
00:07:40,860 --> 00:07:45,480
So let's actually look at a better way of doing this by utilizing TypeScript.
11476
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.