1

00:00:08,190 --> 00:00:10,410

Everybody this is Caleb with slopes again.



2

00:00:10,410 --> 00:00:16,680

And in this video we're going to write two more extensions one for you I view and one for you I button



3

00:00:16,680 --> 00:00:22,350

that's one going to allow us to bind anything that inherits from you eye view to the keyboard so that



4

00:00:22,350 --> 00:00:24,920

when the keyboard slides up that object does as well.



5

00:00:25,170 --> 00:00:31,430

And we're also going to write a button extension to change the color when selected and when de-selected.



6

00:00:31,530 --> 00:00:31,870

OK.



7

00:00:31,920 --> 00:00:35,580

So let's open up that X code project and let's do it now.



8

00:00:35,730 --> 00:00:38,780

Right click on extensions and click new file.



9

00:00:38,790 --> 00:00:41,900

Let's start with our UI view extension.



10

00:00:42,060 --> 00:00:47,110

So to do that we're going to go ahead and create a file swift file and call it UI.



11

00:00:47,120 --> 00:00:51,030

View XTi and press create.



12

00:00:51,030 --> 00:00:51,480

Awesome.



13

00:00:51,480 --> 00:00:56,340

So since this has to do with UI views we're going to need to import UI kit.



14

00:00:56,760 --> 00:01:02,730

And like I said we're going to make an extension of UI view just like that.



15

00:01:02,730 --> 00:01:08,660

Now what we're going to do is first we're going to write a function called bind to keyboard and all



16

00:01:08,680 --> 00:01:13,710

this function is going to do is it's going to add an observer that's going to observe the notification



17

00:01:13,710 --> 00:01:20,700

that sent when the keyboard changes frame and that's the default Iowa us notification that is fired



18

00:01:21,180 --> 00:01:23,030

every time that the keyboard opens.



19

00:01:23,220 --> 00:01:27,750

And then what we're going to do is we're going to write another function called keyboard will change



20

00:01:28,110 --> 00:01:34,110

and this function is basically just going to go ahead and animate the frame of whatever object we bind



21

00:01:34,110 --> 00:01:37,730

the keyboard to so that it moves up with the keyboard in the exact same way.



22

00:01:37,740 --> 00:01:39,390

So let's get started.



23

00:01:39,390 --> 00:01:47,550

We're first going to go ahead and write phunk bind to keyboard WIPs keyboard and that's great.



24

00:01:47,550 --> 00:01:53,910

Now inside of this function we're going to call a notification center don't default we'll get the default



25

00:01:53,910 --> 00:01:57,180

notification center and we're going to add an observer.



26

00:01:57,180 --> 00:02:02,190

Now of course when we call this we need to give an observer which is the UI view so we'll call self



27

00:02:02,700 --> 00:02:06,150

the selector is going to be pound sign selector.



28

00:02:06,510 --> 00:02:11,160

And inside of this is where we're going to call the function later keyboards will change which actually



29

00:02:11,160 --> 00:02:14,480

is responsible for animating the frame of the keyboard.



30

00:02:14,730 --> 00:02:20,100

Next we're going to go ahead and we're going to call the N S notification that comes from deep within



31

00:02:20,100 --> 00:02:23,010

Iowa s called the keyboard will change frame.



32

00:02:23,040 --> 00:02:28,920

So for this we can actually just go ahead and press enter and we can go to any notification dot name



33

00:02:29,040 --> 00:02:36,850

dot UI keyboard will change frame press enter and then for the object go ahead and set nil.



34

00:02:36,860 --> 00:02:42,120

We don't care about the object but we do need to put a function here and that is where we're going to



35

00:02:42,120 --> 00:02:43,670

write keyboard will change.



36

00:02:43,680 --> 00:02:52,500

So go ahead and beneath this right phunk keyboard will change and we're going to pass in a notification



37

00:02:53,490 --> 00:02:55,320

of type and as notification.



38

00:02:55,470 --> 00:02:56,270

OK.



39

00:02:56,520 --> 00:03:02,760

Now we're using the underscore here because we don't necessarily need to call notification we can just



40

00:03:02,760 --> 00:03:08,100

have it be blank but we do want the internal parameters that we can access it inside this function.



41

00:03:08,100 --> 00:03:14,910

So let's go ahead and what we're going to do is we're going to pull out five properties from the notification



42

00:03:14,910 --> 00:03:15,490

itself.



43

00:03:15,520 --> 00:03:22,470

OK so whatever whatever object we bind this to we're going to basically pull out some information about



44

00:03:22,470 --> 00:03:23,770

the keyboard.



45

00:03:23,820 --> 00:03:28,340

Basically we're going to pull out the duration of the animation that the keyboard has when it moves.



46

00:03:28,380 --> 00:03:32,190

We're going to pull out the kind of animation curve that it use.



47

00:03:32,250 --> 00:03:38,010

We're also going to get the frame of the keyboard when it's below the screen and the frame when it's



48

00:03:38,010 --> 00:03:43,830

above the screen and then we're going to create one property that's basically going to find the difference



49

00:03:44,190 --> 00:03:48,550

of those so that we know how much to move up whatever view that we bind to the keyboard.



50

00:03:48,630 --> 00:03:49,560

OK.



51

00:03:49,560 --> 00:03:52,410

Now you know it's yelling at us let's fix this really quick.



52

00:03:52,530 --> 00:03:53,550

We're going to pass it.



53

00:03:53,550 --> 00:03:57,930

Keyboard will change and press enter and it's actually going to yell at us again.



54

00:03:57,930 --> 00:03:58,530

Check it out.



55

00:03:58,590 --> 00:04:03,990

It's going to say argument of Pound's selector refers to the instance method keyboard will change.



56

00:04:03,990 --> 00:04:06,660

That is not exposed to Objective-C.



57

00:04:06,690 --> 00:04:10,750

We're going to click fix and all it's going to do is just add Abi Jaycee to the front of it.



58

00:04:11,130 --> 00:04:16,410

And basically that's just going to give it the ability to interact with objective C-code which deep



59

00:04:16,410 --> 00:04:21,540

down is what we're going to be basically using with these notifications from notification center.



60

00:04:21,540 --> 00:04:23,370

Don't worry about it we're writing in swift still.



61

00:04:23,400 --> 00:04:26,840

We just need to give it the ability to interact with objective C-code.



62

00:04:26,850 --> 00:04:34,720

So let's start by pulling out the duration of the keyboard animation by typing let duration equals notification.



63

00:04:34,950 --> 00:04:37,490

OK so we're accessing the notification here.



64

00:04:37,510 --> 00:04:41,150

I keyboard will change frame and inside of the notification.



65

00:04:41,150 --> 00:04:48,060

There's a dictionary called user info K and there is a bunch of information about this particular notification



66

00:04:48,330 --> 00:04:49,750

that we can access.



67

00:04:49,800 --> 00:04:54,150

But the interesting thing is is that it comes and is optional so we need to force on rapid in order



68

00:04:54,150 --> 00:04:59,460

to access it then since it's a dictionary we're going to pull out the value for a certain key and we're



69

00:04:59,460 --> 00:05:01,130

going to give the key right here.



70

00:05:01,380 --> 00:05:09,480

Now that key for the duration is UI keyboard animation duration user in foci that's a really long mouthful



71

00:05:09,480 --> 00:05:15,000

but basically it is the key that identifies the duration of the animation in seconds.



72

00:05:15,000 --> 00:05:15,450

OK.



73

00:05:15,660 --> 00:05:21,720

The animation of the keyboard and this duration when we call it into a function later we're going to



74

00:05:21,720 --> 00:05:26,440

call you if you animate keyframes it asks for a double.



75

00:05:26,460 --> 00:05:29,950

So we're going to take this value and we're going to force cast it as a double.



76

00:05:30,120 --> 00:05:32,150

So we can use it next.



77

00:05:32,280 --> 00:05:34,850

We need to access the animations curve.



78

00:05:34,890 --> 00:05:40,560

Now every animation has a curve sometimes it's ease in right where the animation will start and it will



79

00:05:40,560 --> 00:05:43,860

sort of ease in slowly and then get up to full speed.



80

00:05:43,860 --> 00:05:51,150

Another curve is ease out right where it will start at full speed and then it'll slowly kind of slow



81

00:05:51,150 --> 00:05:53,790

down as it's approaching completion.



82

00:05:53,790 --> 00:05:58,530

There's also ease in out but we're just going to basically capture the same one that the keyboard uses.



83

00:05:58,530 --> 00:06:06,030

So go ahead and type let curve equals notification that user info and force on it and we're going to



84

00:06:06,030 --> 00:06:12,330

get out the curve by typing UI keyboard animation curve user and foci.



85

00:06:12,360 --> 00:06:19,050

Now this one in order to properly use it with a UI view animate keyframes function.



86

00:06:19,050 --> 00:06:24,430

We need to cast it as a int which is basically just an unsigned integer.



87

00:06:24,450 --> 00:06:28,140

If you've ever used any other programming language all know what that is.



88

00:06:28,140 --> 00:06:32,120

And go ahead and just forecast that like I said as you want.



89

00:06:32,700 --> 00:06:33,070

All right.



90

00:06:33,090 --> 00:06:34,210

So that's cool.



91

00:06:34,290 --> 00:06:37,470

We now have the same animation curve.



92

00:06:37,470 --> 00:06:40,060

We're going to go ahead and now capture the frame.



93

00:06:40,080 --> 00:06:43,480

OK so go ahead and type let starting.



94

00:06:43,510 --> 00:06:47,460

Frame equals notification.



95

00:06:47,700 --> 00:06:50,290

User info for us unwrap it.



96

00:06:50,460 --> 00:06:53,800

And the key is UI keyboard frame.



97

00:06:53,850 --> 00:06:55,880

Begin user info key.



98

00:06:55,920 --> 00:07:00,600

So this basically captures the frame of the keyboard when it's below the screen before it goes up.



99

00:07:00,600 --> 00:07:07,050

It tells us where it is and the cool thing is that we can actually turn this into a C-g recked we can



100

00:07:07,050 --> 00:07:13,320

make this a rectangle so we can basically capture the exact size and value it's really cool in order



101

00:07:13,320 --> 00:07:20,280

to do that though we need to basically put this in parentheses force cast it as an s value and then



102

00:07:20,280 --> 00:07:26,010

after we do that we can pull out the CEG recked value of this information we get from the notification.



103

00:07:26,010 --> 00:07:31,800

So if you select the whole thing in X cotinine and then press 1 parentheses it actually will wrap the



104

00:07:31,800 --> 00:07:34,300

whole thing in parentheses which is pretty neat.



105

00:07:34,590 --> 00:07:40,470

But now instead of force casting this as a you end or as a double We're going to force cast it as an



106

00:07:40,470 --> 00:07:41,850

s value.



107

00:07:42,200 --> 00:07:42,900

OK.



108

00:07:42,960 --> 00:07:48,110

And this value is basically just a simple container for a single C or objective c data item.



109

00:07:48,270 --> 00:07:55,560

So we've basically now converted this frame into raw data and from that raw data we can type dot C-g



110

00:07:55,560 --> 00:08:00,500

recked value and we can convert it into a type of C.G. ract which is really neat.



111

00:08:00,690 --> 00:08:05,610

So we now have the starting frame of the keyboard when it's below the screen and we can't see it.



112

00:08:05,610 --> 00:08:10,650

Now we need to capture the ending frame so that we know how far it's going to go so that we can move



113

00:08:10,650 --> 00:08:13,090

up whatever object we want the size of the keyboard.



114

00:08:13,290 --> 00:08:25,320

So go ahead and type let ending frame frame equals notification dot user info for some rapid UI keyboard



115

00:08:25,410 --> 00:08:28,220

frame and user info key.



116

00:08:28,680 --> 00:08:33,300

And just like the previous one we're going to force cast it as an s value.



117

00:08:33,300 --> 00:08:39,600

We're going to wrap it in parentheses like so by selecting everything and doing shift parentheses and



118

00:08:39,600 --> 00:08:41,410

we're going to pull out the C-g rect value.



119

00:08:41,550 --> 00:08:46,330

OK so now this too has been converted into HEG rect.



120

00:08:46,380 --> 00:08:52,110

Now our last property is not going to come from the notification but we're going to basically use both



121

00:08:52,110 --> 00:08:54,380

the starting frame and the ending frame.



122

00:08:54,540 --> 00:08:59,910

And we're going to subtract the y values of both of those so we know exactly how much difference it



123

00:08:59,910 --> 00:09:00,990

changes.



124

00:09:00,990 --> 00:09:05,420

So we're going to call this delta y Delta meaning change.



125

00:09:05,490 --> 00:09:17,200

So go ahead and type let Delta y equals ending frame origin y meaning the starting point on the y coordinate



126

00:09:17,800 --> 00:09:24,380

and we're going to subtract beginning frame or starting from I mean origin y.



127

00:09:24,580 --> 00:09:25,130

OK.



128

00:09:25,330 --> 00:09:30,990

Now think about this the starting frame is at the very bottom of the screen beneath everything.



129

00:09:31,000 --> 00:09:35,620

So what we want to do is we want to subtract that from the ending frame.



130

00:09:35,640 --> 00:09:37,860

The ending for him is here we want to subtract that.



131

00:09:37,870 --> 00:09:42,360

So we know how much it actually moves up on the y axis.



132

00:09:42,490 --> 00:09:45,870

And now this value is a singular number.



133

00:09:46,090 --> 00:09:49,150

We can use that to move whatever object up.



134

00:09:49,150 --> 00:09:50,810

So that's really really cool.



135

00:09:50,830 --> 00:09:52,200

Let's animate it now.



136

00:09:52,270 --> 00:09:56,680

So when we call bind to keyboard it's going to call this keyboard will change function.



137

00:09:56,740 --> 00:09:58,780

It's going to capture all the important values.



138

00:09:58,780 --> 00:10:01,280

Then we're going to type you either view.



139

00:10:01,390 --> 00:10:03,170

Animate keyframes.



140

00:10:03,220 --> 00:10:04,210

OK.



141

00:10:04,300 --> 00:10:06,140

Now of course it asks for a duration.



142

00:10:06,220 --> 00:10:08,190

So we're going to give it a duration.



143

00:10:08,320 --> 00:10:11,950

The one that we captured from our notification we don't want a delay.



144

00:10:12,160 --> 00:10:18,780

So we're going to give it zero point zero options right here is UI keyframe animation options now.



145

00:10:18,820 --> 00:10:19,560

Check it out.



146

00:10:19,660 --> 00:10:22,470

If I press Enter then put a parentheses.



147

00:10:22,540 --> 00:10:25,240

It will basically ask for.



148

00:10:25,810 --> 00:10:27,260

Well let's do it.



149

00:10:27,540 --> 00:10:27,760

OK.



150

00:10:27,760 --> 00:10:30,220

And it's going to ask for a raw value.



151

00:10:30,370 --> 00:10:32,210

And look what type it's asking for.



152

00:10:32,210 --> 00:10:33,250

Are you in it.



153

00:10:33,250 --> 00:10:34,880

That's why we cast this as a U.N..



154

00:10:34,900 --> 00:10:35,330

OK.



155

00:10:35,350 --> 00:10:36,700

It's an unsigned integer.



156

00:10:36,850 --> 00:10:40,880

And that's just what you view keyframe animation options asks for.



157

00:10:40,900 --> 00:10:42,830

So we're going to pass in the curve.



158

00:10:43,180 --> 00:10:44,100

Now the animations.



159

00:10:44,110 --> 00:10:50,280

This is where we're actually going to animate the view that is bound to the keyboard and the completion.



160

00:10:50,350 --> 00:10:53,440

We don't care about case we're just going to put nil for that.



161

00:10:53,440 --> 00:10:57,410

But in this animate keyframes Here's what we're going to do.



162

00:10:57,430 --> 00:11:04,060

We're going to capture self meaning whatever you view or something that inherits from you eye view whatever



163

00:11:04,060 --> 00:11:10,870

it is we're going to take the frame of that object we're going to take the origin meaning that top most



164

00:11:10,960 --> 00:11:12,910

Y point on the y axis.



165

00:11:13,180 --> 00:11:14,820

Sorry origin dot Y.



166

00:11:14,980 --> 00:11:19,450

And we're going to go ahead and we're going to add Delta y to that.



167

00:11:19,750 --> 00:11:22,460

So let's say the keyboard is 300 pixels tall.



168

00:11:22,480 --> 00:11:25,900

We know when it goes up it's going to go up 300 pixels.



169

00:11:25,900 --> 00:11:29,920

What we're saying is we're never let's say this was a button.



170

00:11:30,160 --> 00:11:36,190

If we are going to take the origin y point where ever it is we want to add how much the keyboard will



171

00:11:36,190 --> 00:11:39,040

change it and we want to animate it the same exact way.



172

00:11:39,040 --> 00:11:42,790

So we're basically just adding how high the keyboard is going to move.



173

00:11:43,030 --> 00:11:48,730

And removing our object up just that much with a keyframe animation super super cool.



174

00:11:48,730 --> 00:11:52,060

This is it guys this is all we need to do to bind object to the keyboard.



175

00:11:52,090 --> 00:11:54,790

So let's go ahead before we test that out.



176

00:11:54,790 --> 00:11:58,790

Let's go ahead and build our UI button extension so we can try it.



177

00:11:58,990 --> 00:12:01,290

We can try both on the same view controller.



178

00:12:01,300 --> 00:12:10,930

So right click on extensions click new file swift file and we're going to call this UI button XTi and



179

00:12:10,930 --> 00:12:12,790

press create.



180

00:12:12,790 --> 00:12:13,000

All right.



181

00:12:13,000 --> 00:12:14,490

Now this one is pretty easy.



182

00:12:14,530 --> 00:12:17,930

But of course since we're using UI kit elements we need to import.



183

00:12:17,980 --> 00:12:23,100

You like it then we're going to call extension UI button.



184

00:12:23,650 --> 00:12:24,230

OK.



185

00:12:24,730 --> 00:12:26,170

Now we're going to write two functions.



186

00:12:26,170 --> 00:12:31,320

One is set selected color one is set de-selected color.



187

00:12:31,390 --> 00:12:34,840

So when we tap on one we want the other to show up is de-selected.



188

00:12:34,840 --> 00:12:42,940

So go ahead and type phunk set selected color and below that call phunk set.



189

00:12:42,940 --> 00:12:51,160

De-selected color and inside this we're just going to change one property self.



190

00:12:51,310 --> 00:12:54,660

Background color and we're going to use a color literal.



191

00:12:54,670 --> 00:12:56,920

It's that easy.



192

00:12:56,920 --> 00:12:59,960

Then in set de-selected color we're going to call the same thing.



193

00:12:59,950 --> 00:13:01,680

So I'm just going to copy and paste it.



194

00:13:01,990 --> 00:13:04,750

And now we can actually choose our de-selected color.



195

00:13:04,750 --> 00:13:08,130

So if it's selected it's our normal bright green.



196

00:13:08,500 --> 00:13:13,880

If it's de-selected It's our light green kind of like like a mint green color.



197

00:13:14,050 --> 00:13:15,710

Supercool that's all it takes.



198

00:13:15,730 --> 00:13:21,300

Seriously guys so go to create gold Visi because that's where we're going to start using these.



199

00:13:21,490 --> 00:13:26,890

And now are you I'd view extension we can actually call on our next button.



200

00:13:26,890 --> 00:13:28,720

Think about in our view controller.



201

00:13:28,720 --> 00:13:34,330

This next button when we tap on the text view we want this next button to move with the keyboard.



202

00:13:34,390 --> 00:13:36,190

Right we don't want it to be hidden by the keyboard.



203

00:13:36,190 --> 00:13:43,030

So let's go into create goals Visi and what we can do is from view the load we can call next button



204

00:13:43,570 --> 00:13:46,760

bind to keyboard when the view loads.



205

00:13:46,780 --> 00:13:51,340

It's going to bind that to the keyboard and whenever we open up something that moves the keyboard the



206

00:13:51,340 --> 00:13:52,930

button will move with it.



207

00:13:52,960 --> 00:13:54,620

It's that easy.



208

00:13:54,700 --> 00:13:59,710

OK so now that we have that done we're going to go ahead and set up the buttons.



209

00:13:59,800 --> 00:14:03,660

Now we already have them set up here short term and long term.



210

00:14:03,850 --> 00:14:09,580

And we already have short term starting as selected but that's just the button that's just what it looks



211

00:14:09,580 --> 00:14:10,120

like.



212

00:14:10,150 --> 00:14:15,750

We need to actually set a property in our class and we need to set it to be equal to short term from



213

00:14:15,750 --> 00:14:20,400

the get go and then what we're going to do is we're going to change that depending on if the button



214

00:14:20,400 --> 00:14:24,380

is pressed because sometimes you might open it and you might want it to be short term from the beginning



215

00:14:24,390 --> 00:14:30,990

so we should set that value from the beginning go back and create goal VC and beneath the Iby outlets



216

00:14:30,990 --> 00:14:36,740

we're going to create a variable called gole type and it's going to be of type called type.



217

00:14:36,920 --> 00:14:37,560

OK.



218

00:14:37,950 --> 00:14:40,500

Now we're going to set it to be equal to dot.



219

00:14:40,620 --> 00:14:43,460

Short term from the get go.



220

00:14:43,600 --> 00:14:44,440

All righty.



221

00:14:44,640 --> 00:14:45,700

Now this is here.



222

00:14:45,840 --> 00:14:50,480

We've instantiated it and we have set it to be equal to short term from the beginning.



223

00:14:50,700 --> 00:14:55,920

What we're going to do is we're going to actually set our colors in code.



224

00:14:55,920 --> 00:14:58,540

Now we have them set in the interface builder.



225

00:14:58,650 --> 00:15:02,640

But what we're going to do is we're going to set them in code just to make sure that everything is good



226

00:15:02,640 --> 00:15:03,590

to go.



227

00:15:03,600 --> 00:15:07,530

So when the view loads we need to think what color do we want.



228

00:15:07,530 --> 00:15:17,760

The short term button to be well if we want it to be defaulting as selected we should call our set selected



229

00:15:17,760 --> 00:15:18,640

color function.



230

00:15:18,780 --> 00:15:26,760

So let's do that short term button set selected color are long term button we should set set de-selected



231

00:15:26,760 --> 00:15:28,010

color.



232

00:15:28,080 --> 00:15:30,500

Now when short term button is pressed.



233

00:15:30,600 --> 00:15:31,940

Here's what we're going to do.



234

00:15:31,950 --> 00:15:38,530

We're going to set gold type variable to be equal to short term.



235

00:15:38,580 --> 00:15:44,280

We're also going to go ahead and type short term set selected color because what if we selected long



236

00:15:44,280 --> 00:15:50,880

term then it would be de-selected if we selected again we should set the selected color right when we



237

00:15:50,880 --> 00:15:52,860

select the short term button.



238

00:15:52,860 --> 00:15:56,320

We should make the long term button be set de-selected.



239

00:15:56,400 --> 00:15:59,610

OK so it's that like light mint green color.



240

00:15:59,610 --> 00:16:04,830

Now we're going to go ahead and do the same thing but with long term buttons so let's go ahead and when



241

00:16:04,830 --> 00:16:11,250

we tap the long term button that means that we want gold type to be equal to long term.



242

00:16:11,250 --> 00:16:16,950

And if we tap on the long term button that means we want long term button to have the selected color



243

00:16:17,490 --> 00:16:22,220

we want the short term button to have the set de-selected color.



244

00:16:22,740 --> 00:16:26,500

And you know what guys this should work let's go give it a try.



245

00:16:26,520 --> 00:16:32,520

Just so you know when you create an extension of UI button anything that has a UI button can access



246

00:16:32,520 --> 00:16:33,520

these functions.



247

00:16:33,820 --> 00:16:39,870

I view the reason that it works on our button is because if you go deep down you I view you I button



248

00:16:39,900 --> 00:16:43,560

you I textfield you I label all of those at their core.



249

00:16:43,650 --> 00:16:47,630

Inherit from you I view so we can use bind to keyboard on anything.



250

00:16:47,910 --> 00:16:48,750

Let's go give it a try.



251

00:16:48,750 --> 00:16:49,850

Let's build and run.



252

00:16:49,860 --> 00:16:53,170

Let's see if our next button binds to the keyboard.



253

00:16:53,400 --> 00:16:58,080

Let's see if our buttons are set the appropriate color from the beginning and then we're going to go



254

00:16:58,080 --> 00:17:02,120

ahead and see if they change color appropriately as we tap on the buttons.



255

00:17:02,160 --> 00:17:07,740

So press new and let's make sure that our software keyboard is on.



256

00:17:07,740 --> 00:17:13,500

So when I tap this the button should slide up nicely and you know what I think I have to go in and do



257

00:17:13,500 --> 00:17:14,280

that again.



258

00:17:14,280 --> 00:17:20,000

Let's toggle it and you see that the button loads perfectly it slides up with the keyboard.



259

00:17:20,070 --> 00:17:24,000

And that's really cool let's go ahead and toggle it again and it moves back down.



260

00:17:24,000 --> 00:17:25,100

That's amazing.



261

00:17:25,140 --> 00:17:26,280

Super super cool.



262

00:17:26,280 --> 00:17:27,150

OK great.



263

00:17:27,150 --> 00:17:28,260

Now let's test our buttons.



264

00:17:28,260 --> 00:17:34,030

If I tap long term it should set the selected color and flip the short term button to be selected.



265

00:17:34,530 --> 00:17:36,870

So cool look at that it works.



266

00:17:36,870 --> 00:17:39,390

So if I tap one it sets the color.



267

00:17:39,450 --> 00:17:45,210

It's also setting the gold type and we'll pass that in as we instantiate our next view controller and



268

00:17:45,210 --> 00:17:50,990

move on to add the number of points required in order to achieve our goal.



269

00:17:50,990 --> 00:17:54,960

So super cool guys we have now bound our button to the keyboard.



270

00:17:54,960 --> 00:17:59,060

We have set up our buttons here to change color and set the goal type.



271

00:17:59,160 --> 00:18:01,010

We're going to move on this is amazing.



272

00:18:01,050 --> 00:18:06,150

We're going to build out the finish goal VC in the next video where you set the number of points and



273

00:18:06,150 --> 00:18:12,240

we're going to pass that data from this new controller into finished goal VC so that we can save our



274

00:18:12,240 --> 00:18:16,280

goal and start showing them in our table view using core data.



275

00:18:16,320 --> 00:18:17,430

So so cool.



276

00:18:17,430 --> 00:18:18,350

Amazing work guys.



277

00:18:18,360 --> 00:18:21,140

Let's head over to the next video and let's get started.