1
00:00:05,850 --> 00:00:11,420
Your What's up every one Mark Price you're at slopes dot com and let's go ahead and continue forward

2
00:00:11,420 --> 00:00:12,560
with our app.

3
00:00:12,600 --> 00:00:17,090
But I'd like to do is get the rest of the user interface implemented and get the full application logic

4
00:00:17,120 --> 00:00:21,620
going and then we're going to deal with currency and things like that after the fact because I think

5
00:00:21,620 --> 00:00:25,040
there are some things we're going to have to do to get it to work the way that we want.

6
00:00:25,040 --> 00:00:26,940
So let's go back to the main story board here.

7
00:00:26,960 --> 00:00:28,380
We're just missing a couple of things.

8
00:00:28,460 --> 00:00:31,590
Namely the number of the result.

9
00:00:31,610 --> 00:00:35,940
And as well as the hours label as well as was the clear calculator button.

10
00:00:36,020 --> 00:00:40,520
And again like I said these dollar signs you know they're going to cause us some trouble here and I'll

11
00:00:40,520 --> 00:00:41,870
explain that later on.

12
00:00:41,870 --> 00:00:47,320
So first things first let's go ahead and get our label on here.

13
00:00:47,520 --> 00:00:53,140
Just type in label at the bottom or lab and I'm going to make this a little bit bigger.

14
00:00:53,360 --> 00:00:58,110
So we're going to send you this text and I'm going to make this white.

15
00:00:58,130 --> 00:01:01,840
I'm not going to change any of the fonts around you know how to do that.

16
00:01:01,850 --> 00:01:04,700
And we're just building up the application logic here.

17
00:01:04,700 --> 00:01:11,210
So what I want to do is make this let's just say 32 just like the picture for so I can visualize it

18
00:01:11,480 --> 00:01:16,910
just make this a lot bigger and you know this could be a lot of hours like if you had a car for instance

19
00:01:17,050 --> 00:01:22,040
that was like you know $10000 this might be you know hundreds many hundreds of hours so we want this

20
00:01:22,040 --> 00:01:23,640
to be relatively big.

21
00:01:23,660 --> 00:01:27,820
So what I'm going to do is I'm going to make it like so.

22
00:01:28,430 --> 00:01:33,620
The same with desists at least visually here and I'll control drag to this and we're going to say equal

23
00:01:33,620 --> 00:01:34,420
with.

24
00:01:34,840 --> 00:01:35,530
OK.

25
00:01:35,550 --> 00:01:42,010
Again another thing we could have done was the leading or trailing I said equal with which is fine.

26
00:01:42,050 --> 00:01:44,260
There are multiple ways of working with constraints.

27
00:01:44,480 --> 00:01:48,590
And instead of 46 we'll say 45 from the item price there.

28
00:01:49,060 --> 00:01:50,210
That's looking good.

29
00:01:50,210 --> 00:01:53,540
And the last thing we need to do is probably just center on the screen.

30
00:01:53,550 --> 00:02:00,740
So by click this pin button and do horizontal and container all of our red ink are red lines of anger

31
00:02:00,740 --> 00:02:02,950
and death will go away.

32
00:02:02,990 --> 00:02:04,060
So there's 32.

33
00:02:04,100 --> 00:02:10,760
Let's add a label on to here and we'll go out and just make this a little bit bigger but not doesn't

34
00:02:10,760 --> 00:02:14,810
need to go to the edges because it's always going to say just hours on it make it say hours.

35
00:02:14,940 --> 00:02:16,140
I'm going to center.

36
00:02:16,460 --> 00:02:21,160
Change the color to white and it looks good to me.

37
00:02:21,420 --> 00:02:25,670
Hours and less Pinot seven point five less Pinot.

38
00:02:25,670 --> 00:02:33,640
Five from the top and I'm going to give it a fixed width and height just to get rid of the anger.

39
00:02:33,690 --> 00:02:38,360
The anger lines and then less line at center in the container.

40
00:02:38,360 --> 00:02:40,370
Like so OK.

41
00:02:41,170 --> 00:02:41,750
Cool.

42
00:02:41,920 --> 00:02:42,660
Looks good to me.

43
00:02:42,700 --> 00:02:44,800
And then let's see the clear calculator button at the bottom.

44
00:02:44,800 --> 00:02:49,320
So Type in beauty for button and we'll put this at the bottom.

45
00:02:49,330 --> 00:02:50,700
I'm just eyeballing it here.

46
00:02:50,770 --> 00:02:52,440
I'll make it go to the edges.

47
00:02:53,260 --> 00:02:59,620
Like so the margins there and I'm going to go and click the pin button here and I'm going to say 20

48
00:02:59,620 --> 00:03:03,620
from the left bottom and the right which is great and give it a fixed height.

49
00:03:03,730 --> 00:03:04,210
Perfect.

50
00:03:04,220 --> 00:03:14,050
And instead of button it's going to say clear count you later and Lissa's increase the font size and

51
00:03:14,050 --> 00:03:19,630
let's make it white and there's our button it's all too big I think let's make it smaller.

52
00:03:19,940 --> 00:03:23,480
OK 16 17 16.

53
00:03:23,500 --> 00:03:24,110
OK.

54
00:03:24,430 --> 00:03:25,200
Click save.

55
00:03:25,240 --> 00:03:28,750
So we finish the UI elements let's just do some Iby outlets and stuff.

56
00:03:29,170 --> 00:03:35,020
So we know that we're going to need to hide this label on this label based on the visibility of the

57
00:03:35,020 --> 00:03:40,010
keyboard or the current state of the app so take the 32 label control drag it.

58
00:03:40,450 --> 00:03:46,480
And let's just call this result LPL a result label and then what I want to do is take the hours label

59
00:03:46,570 --> 00:03:51,940
and control drag it over and we're going to call this ours LBO.

60
00:03:51,970 --> 00:03:52,430
All right.

61
00:03:52,480 --> 00:03:58,960
And then I want to make the action from the clear calculator button control drag over here and we're

62
00:03:58,960 --> 00:04:09,450
going to call this clear calculator pressed and let's change it to an action and click connect.

63
00:04:09,460 --> 00:04:10,600
Good good good.

64
00:04:10,600 --> 00:04:18,030
Now close the assistant editor and we'll go into our main Visi swift and get rid of this we got here.

65
00:04:18,030 --> 00:04:19,370
Nonsense.

66
00:04:19,990 --> 00:04:23,440
And then in clear calculator press what do we want to have happen.

67
00:04:23,440 --> 00:04:28,750
Well when the clear button is pressed we want to hide those labels so we want these fields to become

68
00:04:28,780 --> 00:04:31,390
empty again and we want to hide the labels here.

69
00:04:31,420 --> 00:04:35,980
So that should be as simple as doing this.

70
00:04:36,340 --> 00:04:48,230
Well say result label is hidden equals true and then we'll say hours label that is hidden equals true.

71
00:04:48,700 --> 00:04:57,910
And then we will clear out the field so which text text equals empty string and we'll say price text

72
00:04:58,390 --> 00:05:00,720
text equals empty string.

73
00:05:00,730 --> 00:05:06,340
Now since we are hiding them here it would stand to reason that interview to load we would want them

74
00:05:06,340 --> 00:05:09,780
to start out hidden because the apps loading and the keyboards up.

75
00:05:09,850 --> 00:05:19,110
So when you did load occurs we simply have to say result label dot hidden equals true

76
00:05:21,820 --> 00:05:34,690
and result label that is hit and equals SRU and not result label the hours label.

77
00:05:34,700 --> 00:05:36,000
There we go.

78
00:05:36,170 --> 00:05:36,940
OK.

79
00:05:37,340 --> 00:05:39,780
And let's see here.

80
00:05:40,710 --> 00:05:41,690
Looks good.

81
00:05:41,790 --> 00:05:44,470
So when McLure the calculator that's great that's great.

82
00:05:44,490 --> 00:05:47,760
And then when you actually press the calculator button that's where we would that's when we would want

83
00:05:47,760 --> 00:05:49,850
to show those those labels again.

84
00:05:49,860 --> 00:05:54,840
So let's go ahead and write the code to do the math and calculate it and are the red X of years because

85
00:05:54,840 --> 00:05:56,790
our unit tests failed the last time we ran it.

86
00:05:56,880 --> 00:06:01,110
All we need to do is rerun it since our code has been fixed and we'll get to that.

87
00:06:01,110 --> 00:06:08,670
So what do we do if let wage text actually just say wage.

88
00:06:09,310 --> 00:06:12,690
I will call it may point something out here.

89
00:06:12,750 --> 00:06:16,560
I'm calling it Wage text which is exactly the same as this text up here.

90
00:06:16,620 --> 00:06:21,150
But because we're renaming a variable down here we're no longer the things that are inside of it will

91
00:06:21,150 --> 00:06:23,110
no longer refer to the textfield.

92
00:06:23,130 --> 00:06:23,870
OK.

93
00:06:23,910 --> 00:06:25,470
And that's because of the local scope.

94
00:06:25,470 --> 00:06:30,060
So this is creating a new variable even though it's the same name as wage sect's appear it's a completely

95
00:06:30,360 --> 00:06:31,590
different variable.

96
00:06:31,770 --> 00:06:34,430
And some was something I wanted to point out.

97
00:06:34,720 --> 00:06:35,180
OK.

98
00:06:35,190 --> 00:06:39,030
Usually I like to name local variables different when I'm teaching.

99
00:06:39,210 --> 00:06:42,630
So it doesn't confuse you but as a professional developer most of the time you will name it.

100
00:06:42,630 --> 00:06:44,950
The same as other properties so.

101
00:06:45,250 --> 00:06:49,260
So which text equals waged text that text.

102
00:06:49,620 --> 00:06:54,800
And we're going to tape price text equals price text text.

103
00:06:54,810 --> 00:07:00,840
So we're just doing an awful lot here and what we're doing is we're saying hey if the wage textfield

104
00:07:00,840 --> 00:07:04,250
and price textfield is not Neil storeman these variables.

105
00:07:04,260 --> 00:07:04,520
OK.

106
00:07:04,530 --> 00:07:08,880
So calculate will only work if there was actual actually data inside of these fields.

107
00:07:08,880 --> 00:07:09,370
OK.

108
00:07:10,250 --> 00:07:17,550
And now what we need to do is take the text that's in them and we need to convert them to doubles.

109
00:07:17,550 --> 00:07:22,890
Now you're probably thinking well we are keyboard doesn't allow letters and stuff so it's always going

110
00:07:22,890 --> 00:07:23,910
to convert properly to it.

111
00:07:23,910 --> 00:07:24,950
Well it's not the case.

112
00:07:24,990 --> 00:07:29,380
So we can actually copy something on the Internet on safari and then tap and paste in there we can't.

113
00:07:29,460 --> 00:07:33,510
We're not preventing the pasting we're not doing other types of logic there so we do need to do some

114
00:07:33,510 --> 00:07:34,390
validation here.

115
00:07:34,470 --> 00:07:44,640
So again if let wage the same These are going to be double's equals double wage text okay and let price

116
00:07:44,700 --> 00:07:48,000
equals double price text.

117
00:07:48,200 --> 00:07:48,680
Okay.

118
00:07:48,890 --> 00:07:50,100
Are you with me so far.

119
00:07:50,130 --> 00:07:53,640
So the first check was to make sure that the fields weren't empty.

120
00:07:53,750 --> 00:07:55,190
OK and then we store them in these Letz.

121
00:07:55,230 --> 00:07:56,670
If that had failed it would just leave.

122
00:07:56,940 --> 00:08:03,060
And then the second check we do is to take that text and try and convert it into a number k using casting

123
00:08:03,060 --> 00:08:05,700
here so we're casting that number into a double.

124
00:08:05,820 --> 00:08:10,320
And we're doing that here too if these were letters like the letter Z or B These would fail.

125
00:08:10,440 --> 00:08:10,880
OK.

126
00:08:10,890 --> 00:08:13,500
And then it would it would skip out of here and it wouldn't work.

127
00:08:13,620 --> 00:08:13,880
OK.

128
00:08:13,890 --> 00:08:18,000
And you could do air handling if you want else and you can show like a label that says hey your fields

129
00:08:18,000 --> 00:08:19,700
are wrong or things like that.

130
00:08:19,900 --> 00:08:24,180
But at this point here we've got a valid number out of both of these fields and we can actually run

131
00:08:24,180 --> 00:08:25,440
the math.

132
00:08:25,440 --> 00:08:27,880
So first thing we want to do is dismiss the keyboard.

133
00:08:28,080 --> 00:08:28,890
We no longer need it.

134
00:08:28,890 --> 00:08:32,220
So we're going to say View and editing.

135
00:08:32,220 --> 00:08:37,840
So on the main view of this new controller we're going to call end editing and say true to force it.

136
00:08:38,310 --> 00:08:38,650
OK.

137
00:08:38,710 --> 00:08:46,050
No we're going to do is we're going to say result label dot hidden equals false result label is hidden

138
00:08:46,050 --> 00:08:51,960
equals false and ours label dot hidden equals false.

139
00:08:52,170 --> 00:08:58,770
And then the last thing we need to do is just set the data on the results label so result label dot

140
00:08:58,800 --> 00:08:59,950
text.

141
00:09:00,070 --> 00:09:03,620
Equals well doesn't string interpolation.

142
00:09:04,350 --> 00:09:10,200
And we're going to call our function that we wrote earlier so wage get hours for wage.

143
00:09:10,200 --> 00:09:15,450
So we passed in the wage which is simply going to be the wage that we parsed out earlier and price is

144
00:09:15,450 --> 00:09:18,060
going to be the price that we parsed earlier as well too.

145
00:09:18,090 --> 00:09:20,490
And we know that that's returning an integer to us.

146
00:09:20,490 --> 00:09:25,680
And so we're taking that integer that the function returns to us and using string interpellation we're

147
00:09:25,680 --> 00:09:28,460
inserting the integer into the textfield here.

148
00:09:29,050 --> 00:09:29,910
OK.

149
00:09:30,340 --> 00:09:39,050
So if our code is good our app is should technically be close to done at least functionally.

150
00:09:39,050 --> 00:09:42,510
So let's go ahead and run it and see OK.

151
00:09:42,880 --> 00:09:49,690
So let's let's do something some numbers that we know what works so hourly wage if our hourly wage is

152
00:09:49,720 --> 00:09:50,940
twenty five dollars an hour.

153
00:09:51,040 --> 00:09:52,780
And the item price is one hundred.

154
00:09:52,930 --> 00:09:56,710
If I click calculate this should say four hours.

155
00:09:56,830 --> 00:09:58,030
That's pretty good.

156
00:09:58,030 --> 00:09:58,750
All right.

157
00:09:58,750 --> 00:10:02,430
So if I clear a calculator these should all clear out good.

158
00:10:02,560 --> 00:10:04,070
And what I want to do is a crazy number.

159
00:10:04,100 --> 00:10:09,650
So two twenty five point twenty five divided by let's say fifteen point fifty.

160
00:10:10,310 --> 00:10:16,390
OK so two twenty five point twenty five and 15 50 should give us 14.

161
00:10:16,420 --> 00:10:21,040
So we should see 15 here so when I put these numbers in the value that we should see on the screen should

162
00:10:21,040 --> 00:10:34,990
be 15 hours to get this item so to 25 25 k 2 to 5 at 25 and the hoops this one is 225 to 25 at 25 and

163
00:10:34,990 --> 00:10:40,190
this one is going to be 50/50 we go.

164
00:10:40,750 --> 00:10:41,240
OK.

165
00:10:41,430 --> 00:10:44,910
So if I click calculate 15 hours.

166
00:10:45,640 --> 00:10:46,080
OK.

167
00:10:46,380 --> 00:10:48,190
And it rounded up exactly what we needed.

168
00:10:48,200 --> 00:10:49,870
So 15 hour so this is perfect.

169
00:10:49,870 --> 00:10:51,580
This is working.

170
00:10:51,640 --> 00:10:54,500
Here's the problem though our dang designer.

171
00:10:54,580 --> 00:10:58,810
Ok it's always the frickin designer man is making our life miserable.

172
00:10:58,820 --> 00:11:04,570
And I get the dang designer called for dollar signs in front of here and this is actually a big problem.

173
00:11:04,570 --> 00:11:08,830
It's really funny when it comes to programming things that you wouldn't think are big problems are big

174
00:11:08,830 --> 00:11:12,700
problems and then it's vice versa things you think things that one might think is HUGE might actually

175
00:11:12,700 --> 00:11:14,200
be really simple.

176
00:11:14,200 --> 00:11:15,490
So here's the problem.

177
00:11:15,490 --> 00:11:18,280
This dollar sign here there's no there's nothing we can do about it.

178
00:11:18,280 --> 00:11:23,380
Like like it doesn't come pre-built in a field this is a currency field.

179
00:11:23,380 --> 00:11:28,280
So what we have to do in order to get this to work is we have to write some textfield delegates and

180
00:11:28,270 --> 00:11:34,030
every time the user types we detect it and then we basically we we strip out all the characters out

181
00:11:34,030 --> 00:11:37,270
of it that are not dollar signs and then we use those and we convert those in the numbers and things

182
00:11:37,270 --> 00:11:39,330
like that and we make sure that the dollar signs are.

183
00:11:39,340 --> 00:11:44,110
And we also have to write code so when the back button is pressed that it won't let a delete happen

184
00:11:44,110 --> 00:11:46,490
whenever it's the very first character which is a dollar sign.

185
00:11:46,510 --> 00:11:49,960
Very very complex quote I've actually written this code before and it's a nightmare.

186
00:11:49,990 --> 00:11:53,410
And there are some free libraries that do this for you but it's a big nightmare.

187
00:11:53,410 --> 00:11:59,040
So what I would do is I'm going to let my designer know hey man this is this is really rough.

188
00:11:59,050 --> 00:12:01,050
Ok this is this is hard to do.

189
00:12:01,480 --> 00:12:05,620
And it's going to take a lot of time for a very little function it could take me a few hours or even

190
00:12:05,620 --> 00:12:07,560
all day if you're new developer it could take a couple of days.

191
00:12:07,570 --> 00:12:09,630
You know you'd have to figure it out.

192
00:12:09,650 --> 00:12:10,870
It's not very easy.

193
00:12:11,020 --> 00:12:17,960
So I'm going to propose instead what we do is on the left hand side here we actually put an icon that

194
00:12:17,960 --> 00:12:18,820
shows the currency.

195
00:12:18,820 --> 00:12:23,500
So if it's in United States of the US dollar it's a different currency based on whatever country you're

196
00:12:23,500 --> 00:12:29,070
in and it'll show in a little icon here and then we don't ever have to manipulate the actual text itself.

197
00:12:29,080 --> 00:12:33,370
And so my designer he shakes his head he's like yeah I think that's a great idea Marc and I'm like yeah

198
00:12:33,370 --> 00:12:36,100
I think it's a great idea to say I mean lots of time and boom.

199
00:12:36,340 --> 00:12:40,180
Now I'm a designer and a programmer so let's go ahead and do that.

200
00:12:40,180 --> 00:12:42,570
I've just convinced the designer of what we need to do.

201
00:12:42,760 --> 00:12:46,900
And so we're going to go ahead and make a really pretty icon here but we're going to do that in the

202
00:12:46,900 --> 00:12:51,990
next video so we'll wrap up the entire project with the cool currency formatter.

203
00:12:52,190 --> 00:12:55,450
And you have a full fledged app ready to go soon.

204
00:12:55,450 --> 00:12:57,170
So Mark Price it does soap's dot com.

205
00:12:57,400 --> 00:12:58,590
Let's get this done.