Now we gain a lot by using the binding string in this case the binding wrapper that we added there.
This one here with dollar sign and then the name of the variable.
If I come down here somewhere.
Let's see we already set a v stack.
We have our H stack I'm going to go still inside outside of the main v stack here outside of our navigation
bar title.
When I put a text Justice symbol text and what I'm going to do here is I'm going to pass the variable
the self no do variable itself not the binding one the just variable because at this point here we bind
it so we can actually call it just like this.
No do straight without the dollar sign and you will see what's going to happen.
I'm going to go ahead and say no do I such don't I save this.
Let's go and run everything should be still the same.
However check this out.
If I type here in our text field and I say hello.
Look at that the moment I start typing whatever I need to type.
Notice that it's also showing instead of a text.
This is only happening because we bind our no do variable.
It's a state we are actually binding it with the text of you.
Meaning anywhere else as we change in our text field is going to show those changes are going to be
shown right away anywhere else okay.
So that is the one of the powers that we have here with a binding property.
So what we're gonna do next is we're gonna make our user interface a little bit better so we want it
to look like this at this point.
Here are text field it's not very helpful because it's white on white because in by default and text
field has a white background and we have a white background for the whole application that's why you
don't see anything.
So we're gonna change a few things so at least it looks something like this.
Let's go ahead and accomplish that.
All right.
So back to our code here.
Let me go ahead and close that.
So have more space there.
Here ends right there.
I'm gonna just change the background here once a dot back ground like this.
And we are going to change a color is gonna be equal to green.
Let's save this and run.
See if something's gonna change.
There we go.
That's very nice.
So in order for us to make our text field to look like this to have a nice round corners and perhaps
add the shadow radius there what we're gonna do is we can add a clipped or clip shape as such and inside
are going to pass conveniently the rounded rectangle.
So they should not a table can use can also pass if you parameters one of which is the corner radius.
Let's go ahead and say we'll just wanted to be five.
I'm gonna go ahead and say dot shadow like that and I'm going to pass the radius of the shadow to be
about five.
Okay let's save this and run and see what's going to change just like that it's kind of small you can
quite see it but he can see that we have these very nice radius that is showing they're very small.
But we will make it a little bit bigger inside of our text field so this is where we end our text field.
Put an answer there.
I'm going to go ahead and say dot padding.
I'm going to give a padding for all of about twelve save this and run.
So it will make it a little bit more bigger and well.
Now you can see it's much better.
Of course all the way to the left over they were going to change all of that in a second.
But now you can see it's easier to see that this is indeed a text field and it looks really nice.
But what do you want to do.
Also is we want to make sure that we have this nice image to the left there.
OK.
Just cosmetics.
How do we do that.
Well that means we have to put our image inside here.
This is our horizontal which is convenient because our image is to the left of our text field.
Let's go ahead and do that.
And right below our H stack here I'm going to say image as such and I am going to say system name because
I'm going to actually use what Swifty y or what X code provides because X code has a lot of different
system images that we can use for our development.
In this case I want the plus dot circle like this and I want this to have a padding of a leading.
So I wanted to be to the left.
So run this we should hopefully see and there we go.
You can see it looks really nice there is that plus.
And then we have our added text.
All right.
And the next thing we could do here is instead of our H stack let's pass a few parameters here at once
spacing to be something perhaps like about five.
So there's spacing around these items inside here.
There we go.
That's much better.
You can see now it kind of bleeds out to the right there.
So I want to perhaps move it a little bit to the left there.
One thing I can do is let's go come down here.
Remember we are now outside of our group.
So we are adjusting our group here.
That means here I can come and say something like dot padding and I can actually say I to trailing padding
meaning from the left to right to be something like eight save and run you can see right away we were
able to move giving a padding there so which moved to the left.
All right.
There we go.
So now it's looking much much better.
And of course this will go all the way up here.
Once we have our list to the bottom there.
But at this point here you should be a little bit proud here because things are actually looking way
way better than they were before.
So let's go ahead and add our list because remember here what we're trying to do is to add a list below
our what will you do.
Tax failed to do that is very simple.
Remember we still all inside of our body.
But most importantly we instead of our navigation view here we have the main v stack there which ends
right here.
But then we have these inside horizontal stack that ends right there.
So this is where we want to add our list.
For now I'm going to say list go like this list and just put text like that and say hello there.
That's all I know.
And look what's going to happen all of sudden everything's going be pushed up and now we have a list
which granted it's empty and not very inspiring but we got to change all of that in a second.
So life is good here.
The idea is when we add something here we hit enter we going to go a populate our list.
Now how do we do that.
Well first of all we need to create the actual data model.
But in this case here we're gonna make things a little bit simpler.
And I'm gonna create just an array at the top here that will contain all of the no do items.
So I'm going to say at St..
Because they all need to be added into the view and rebuild.
So I'm going to say var and no.
Do list such and it's gonna be an array of strings and I'm gonna initialize it to empty.
So these notes list is gonna be an array of strings.
And at this point it's just empty in the next video we're gonna be doing is we're gonna start adding
items into our list and start seeing them in our actual list or table view in our app.