1
00:00:06,450 --> 00:00:13,230
So what are we gonna do next is a we are going to play with the concept of whether the user tapped and

2
00:00:13,230 --> 00:00:14,450
something needs to happen.

3
00:00:14,490 --> 00:00:17,040
Meaning the whether use of tapped or not.

4
00:00:17,040 --> 00:00:19,960
The row each item.

5
00:00:20,310 --> 00:00:22,570
Now where does that need to happen.

6
00:00:22,610 --> 00:00:23,390
Happen.

7
00:00:23,520 --> 00:00:24,530
Action will the tap.

8
00:00:24,540 --> 00:00:29,970
Action has to happen inside of these ro which means we still have to be inside of our no do row.

9
00:00:29,970 --> 00:00:35,660
In this case here and all of that is happening where where are we creating this whole entity.

10
00:00:35,700 --> 00:00:41,100
We are creating this whole entity somewhere really in this whole view here.

11
00:00:41,100 --> 00:00:46,420
So this group or particularly in this entire v stack.

12
00:00:46,440 --> 00:00:53,970
That means the beauty here the beauty with Swifty UI is that every view you can attach to it a lot of

13
00:00:53,970 --> 00:00:58,020
modifiers but also a lot of methods or actions.

14
00:00:58,020 --> 00:01:03,900
For instance I can come down here remember this is after a clip shape I can say Dot and I can go ahead

15
00:01:03,900 --> 00:01:05,340
and say tap action.

16
00:01:05,340 --> 00:01:06,980
Look at this the tab action.

17
00:01:07,000 --> 00:01:12,630
There's a few of them there's the tab action where you pass the count and TAB action you just pass the

18
00:01:12,630 --> 00:01:18,480
action K and there's tab action that just allows you to go ahead and create whatever you want to put

19
00:01:18,480 --> 00:01:19,330
inside there.

20
00:01:19,420 --> 00:01:22,800
OK so in this case just put a code somewhere I use that one there.

21
00:01:22,800 --> 00:01:24,840
So what we want to happen here.

22
00:01:24,840 --> 00:01:27,530
Well the moment these happened tab.

23
00:01:27,600 --> 00:01:32,490
In fact let's for now go ahead and print something so we can see that this is indeed happening.

24
00:01:32,530 --> 00:01:36,180
So it tapped in save and run.

25
00:01:36,270 --> 00:01:44,720
We should be able to see in our console once the item is tapped the item look tab and says tapped pap

26
00:01:44,730 --> 00:01:51,300
again this taps of this entire item here when tapped is going to go ahead and run this code here.

27
00:01:51,330 --> 00:01:52,640
So this is useful to us.

28
00:01:52,710 --> 00:01:54,190
What is it that we want to do.

29
00:01:54,330 --> 00:01:59,820
What we want to tell the whole application here that when this is tapped something needs to change.

30
00:01:59,850 --> 00:02:01,140
What is it that needs to change.

31
00:02:01,140 --> 00:02:04,190
We want to make sure that when we tap we want to say that OK.

32
00:02:04,250 --> 00:02:10,670
If they tap this that means they are done with this item or they want to check this off the list.

33
00:02:10,920 --> 00:02:16,880
For that we have to put this variable in this case as you may have guessed it should be a bully and

34
00:02:16,880 --> 00:02:24,060
we have to make it also a state right property because that would allow us to use that variable whatever

35
00:02:24,060 --> 00:02:25,040
we want.

36
00:02:25,050 --> 00:02:31,410
So in this case here I'm gonna go at the top of our no do remember struct here and when I say at state

37
00:02:31,410 --> 00:02:41,100
again it was a var and I'm going to call this E's done is indeed a boolean which will be false in the

38
00:02:41,100 --> 00:02:41,820
beginning.

39
00:02:41,820 --> 00:02:47,040
Now I could have just gone and say is done is equal to False.

40
00:02:47,550 --> 00:02:49,000
That's the faster way to do that.

41
00:02:49,020 --> 00:02:53,830
Either way it doesn't matter at explicitly creating variables or implicitly doesn't matter.

42
00:02:53,870 --> 00:02:56,260
OK which we can just leave it as it is right now.

43
00:02:56,370 --> 00:02:58,880
So is done of course is always false.

44
00:02:58,920 --> 00:03:03,290
In the beginning because when we add something it's not automatically done right.

45
00:03:03,300 --> 00:03:09,960
So in this case here because we know these this is State wrapper is a state type bound to this is done

46
00:03:09,960 --> 00:03:12,240
a variable we can then use that here.

47
00:03:12,240 --> 00:03:19,680
So that means here I'm going to set it I'm going to say s dot is done like this.

48
00:03:19,680 --> 00:03:31,770
In this case is gonna be true OK so let's save this in this go ahead and run of course nothing really

49
00:03:32,110 --> 00:03:34,410
is going to be changing at this point here.

50
00:03:34,500 --> 00:03:41,670
If I go like this and click it's going to be typed and I can come down here and also say if I want let's

51
00:03:41,670 --> 00:03:43,480
go ahead and set it up.

52
00:03:43,500 --> 00:03:51,830
In fact let me put this behind or I should say in front here little interpolation just for us to see

53
00:03:51,830 --> 00:03:52,610
what's going on.

54
00:03:52,610 --> 00:03:56,580
I like to be so self that is done such.

55
00:03:56,600 --> 00:03:57,980
Let's run this at this point.

56
00:03:57,980 --> 00:04:01,230
We should see the state when we tap.

57
00:04:01,260 --> 00:04:02,790
So let's add something.

58
00:04:02,790 --> 00:04:05,950
Enter tap tapped true.

59
00:04:06,000 --> 00:04:09,520
Very good because it needs what was tapped and we said it too.

60
00:04:09,570 --> 00:04:11,670
Is that true.

61
00:04:11,720 --> 00:04:11,900
All right.

62
00:04:11,910 --> 00:04:12,690
So life is good here.

63
00:04:12,870 --> 00:04:22,710
But be the cool thing about having a variable in this case a state type wrapped variable is that in

64
00:04:22,710 --> 00:04:28,380
this case because it's a boolean we can actually infer something else which is the toggle the toggle

65
00:04:28,380 --> 00:04:32,140
you can always get it by saying that toggle like that.

66
00:04:32,250 --> 00:04:39,150
It says here toggles between the boolean variables value which is very handy because it goes between

67
00:04:39,480 --> 00:04:41,070
on and off.

68
00:04:41,070 --> 00:04:44,220
OK so at this point here check out if I run this

69
00:04:49,690 --> 00:04:50,080
look at this.

70
00:04:50,080 --> 00:04:57,100
If I tap is true for tap again says false rightly toggle between two values billion two values.

71
00:04:57,100 --> 00:04:58,070
True or false.

72
00:04:58,120 --> 00:05:00,820
Which is very handy because we're going to use that.

73
00:05:00,820 --> 00:05:01,060
OK.

74
00:05:01,080 --> 00:05:03,360
So we have that done at this point.

75
00:05:03,370 --> 00:05:08,410
But the actual action that we want to what we want to happen is not happening yet.

76
00:05:08,410 --> 00:05:10,360
What is that we want to happen.

77
00:05:10,360 --> 00:05:16,670
Well this is what we want to happen first for want to go ahead and if the item was tapped.

78
00:05:16,690 --> 00:05:24,090
Meaning now this is true is done is true which which means the user wants to check this item as done.

79
00:05:24,100 --> 00:05:30,820
We want then to make this whole view this whole row here have a different color a gray to signify that

80
00:05:30,820 --> 00:05:32,690
this indeed has happened.

81
00:05:32,710 --> 00:05:38,950
How do we do that again because this is done is indeed tied up with a state.

82
00:05:38,950 --> 00:05:42,120
I mean it changes constantly when things change.

83
00:05:42,220 --> 00:05:44,590
We can use that to our advantage.

84
00:05:44,590 --> 00:05:48,100
How do we change this background on click.

85
00:05:48,100 --> 00:05:53,260
Well where are we changing this background or where are we setting this background of our role.

86
00:05:53,320 --> 00:05:56,870
Well we're setting it right here right.

87
00:05:57,100 --> 00:06:02,020
Because we're saying here background and we pass into pink what we would have done here is put a if

88
00:06:02,020 --> 00:06:08,620
statement that says if is done is true then we change color or else we change color to normal and so

89
00:06:08,620 --> 00:06:09,870
forth.

90
00:06:10,300 --> 00:06:11,970
But that could be a little bit complicated.

91
00:06:11,980 --> 00:06:16,480
There is a better way to do that by using the ternary operator.

92
00:06:16,480 --> 00:06:18,220
What is it ternary operator.

93
00:06:18,310 --> 00:06:25,090
Well it turns our operators not just for safety y or swift in this case it's just a programming tool

94
00:06:25,090 --> 00:06:31,290
that we can use to create if statement that are fairly confined and succinct.

95
00:06:31,510 --> 00:06:36,880
What I mean by that is I could come inside here give a space I like to put it inside of brackets like

96
00:06:36,880 --> 00:06:37,280
that.

97
00:06:37,400 --> 00:06:37,890
OK.

98
00:06:38,080 --> 00:06:43,290
This is going to be the statement or the expression that we want to evaluate inside here.

99
00:06:43,300 --> 00:06:50,100
So I'm going to say in this case self dot is done.

100
00:06:51,400 --> 00:06:55,660
If that's the case what I want to do is make the color pink.

101
00:06:55,660 --> 00:06:59,510
But how do we create this actual code that should run.

102
00:06:59,560 --> 00:07:06,460
We put a question mark like that to say if this is true then this happens.

103
00:07:06,460 --> 00:07:07,240
Right.

104
00:07:07,240 --> 00:07:09,060
Else how do we do else.

105
00:07:09,070 --> 00:07:14,280
We just put calling like that else color is going to be great.

106
00:07:15,640 --> 00:07:16,180
OK.

107
00:07:16,300 --> 00:07:22,180
So this means if self is done we want to in fact this should be the opposite it should be gray because

108
00:07:22,180 --> 00:07:29,410
if it's done and if it's indeed not done we want this to continue to be pink that's it.

109
00:07:29,410 --> 00:07:38,490
So this is what we call the ternary operator this one two three items they're here inside.

110
00:07:38,490 --> 00:07:45,090
This is what we are the expression that we are evaluating if this is true then immediate to that immediate

111
00:07:45,150 --> 00:07:47,500
after the exclamation point.

112
00:07:47,790 --> 00:07:56,810
We're going to run that or else we invoke the else with calling like that we run this look at that.

113
00:07:56,820 --> 00:07:59,640
So now save this and give it a run.

114
00:08:00,000 --> 00:08:06,680
Let's add something there and to look at this click while I now turn to color click it goes back to

115
00:08:06,720 --> 00:08:10,010
see it's still true and false click.

116
00:08:10,010 --> 00:08:12,260
Now it's true meaning this is done well.

117
00:08:13,050 --> 00:08:15,180
And there we go.

118
00:08:15,180 --> 00:08:15,540
Very good.

119
00:08:15,870 --> 00:08:22,170
So the next time we're gonna do now that we have our ternary working and we have our is done toggle

120
00:08:22,230 --> 00:08:23,650
everything is working perfectly.

121
00:08:23,670 --> 00:08:29,370
The next thing we want to do is to change the square here which is we are adding here to change that

122
00:08:29,400 --> 00:08:34,230
so that instead of a square it shows a check mark.

123
00:08:34,230 --> 00:08:37,100
Well first of all I'm going to tell you that for a check mark.

124
00:08:37,110 --> 00:08:45,600
You just say check mark like face in fact I'm going to go ahead and say here so you can see if I save

125
00:08:45,630 --> 00:08:49,420
these and run you should see the check mark.

126
00:08:49,450 --> 00:08:52,610
We're talking about and there you go.

127
00:08:52,650 --> 00:08:53,660
There is our check mark.

128
00:08:54,000 --> 00:09:00,840
But what I want you to do right now is the pauses video and use this same concept in this ternary operator

129
00:09:01,260 --> 00:09:02,850
we use at the bottom here.

130
00:09:02,850 --> 00:09:10,740
Use it here as well so that if indeed this is checked or this is done we're going to use the check mark.

131
00:09:11,250 --> 00:09:15,870
Otherwise going to still have our square that we have there OK.

132
00:09:15,890 --> 00:09:16,670
Go ahead and do that

133
00:09:20,560 --> 00:09:25,750
all right I hope you were able to get that done but simply It's very simple again and we just go ahead

134
00:09:25,780 --> 00:09:29,950
and put our expression here in this case is self

135
00:09:32,490 --> 00:09:47,340
that is done if self that is done is true then I want the text to say check mark else I wanted to say

136
00:09:47,340 --> 00:09:52,620
something different which will be square

137
00:09:56,050 --> 00:09:57,410
save whoops.

138
00:09:57,430 --> 00:10:01,180
Actually this has to be the exclamation point there.

139
00:10:01,180 --> 00:10:04,660
All right save this and run.

140
00:10:04,700 --> 00:10:08,620
We should see the results so we're looking for a hope.

141
00:10:08,630 --> 00:10:08,980
All right.

142
00:10:08,980 --> 00:10:10,590
The moment of truth click.

143
00:10:10,640 --> 00:10:11,360
Nice.

144
00:10:11,360 --> 00:10:14,770
Now change to then click back.

145
00:10:14,810 --> 00:10:16,940
We see our square.

146
00:10:16,970 --> 00:10:18,470
So we can add something else

147
00:10:21,040 --> 00:10:22,630
don't be brave

148
00:10:25,250 --> 00:10:28,930
can add something like this and continue.

149
00:10:28,940 --> 00:10:31,950
So if I want to check that one it's very good.

150
00:10:31,950 --> 00:10:33,830
Again check this one again check all of them.

151
00:10:33,830 --> 00:10:37,440
I can go and check and the life is good.

152
00:10:37,490 --> 00:10:37,780
All right.

153
00:10:37,790 --> 00:10:41,070
So we are making real good progress here folks real good progress.

154
00:10:41,080 --> 00:10:47,180
I hope you are getting more and more excited and you seeing other things you can do using binding and

155
00:10:47,180 --> 00:10:54,980
text fields and of course using still using lists and in of course changing things depending on a toggle

156
00:10:54,980 --> 00:10:56,140
variable.

157
00:10:56,150 --> 00:10:56,420
All right.

158
00:10:56,570 --> 00:11:01,010
So in the next video we're going to continue working on our application here we get him real close.

159
00:11:01,010 --> 00:11:03,040
We're getting real close to have a full product here.

160
00:11:03,140 --> 00:11:07,190
But there's still a few things that I'm going to show you here to complete this application.