- [Narrator] One of the ways to control styles in GJS,
is by binding them through the style attributes.
The style binding is like adding a style tag,
except that begins with a colon,
with some important differences.
So what you do is, you pass along an object like this
and in that object you have a series of name
and value pairs.
Now, oftentimes you'll be tempted to use a semi-colon here
but this is not like a normal style in CSS,
it's actually an object.
Another thing that you'll notice here is,
that I can pass along a color,
here this is the normal CSS color property
and I didn't have to quote it on the left,
but on the right any value that I pass, if it is a string,
then it needs to go on quote.
Now, if I'm passing along a property like, fontWeight,
that uses kebab-case,
which uses these hyphens in between the keywords,
then you are going to need to quote it.
Now notice that if I'm passing fontSize right here,
I can use camelCase so that I don't have to quote it.
So I could have also written fontWeight,
by just capitalizing the w ,
and then I don't have to put it in quotes.
So this is how I normally write them
because it's a little bit faster.
Now in here, I can pass along a variable
and I can also do some simple math here.
So here I'm looking for a variable called mySize
and then adding a string em, to that at the end.
And you can see that I have some variables here in my data.
So if I wanted to, instead of calling blue here
I could call, myColor and use a variable as well.
The fontWeight, I can use a number here,
It doesn't have to be in quotes
because you can pass along a fontWeight,
that is a number and for mySize,
it's going to be included in here.
So that's how you set that up.
Now, clearly this is a little bit messy,
when you have a lot of property value pairs.
So you can also use Object Notation,
where you just pass along a variable
and then you create that in your data
and then you pass along some information into that variable,
from the data
and that way you can also have access
to the styles from your program.
So you can technically later on in JavaScript
refer to something in here, as myStyles.color
and then reset that to something like red.
So that's pretty handy.
There's also an Array Syntax
and that looks something like this.
So this can refer to a couple of different objects.
Clearly you could put objects in here if you wanted to
but this kind of notation allows you to have,
two different variables and both of these stylesA
and stylesB variables would be passed into the style
for this headline, which is a lot
but sometimes it's sort of convenient to separate things.
So here, for example, I separated the colors,
from the weights, so you can do that as well.
One nice thing about GJS,
is that it's going to take care of prefixing properties,
that need WebKit and Ms prefixes automatically,
it's going to take care of it.
So you don't have to worry about it
however it does give you the option
of adding those in manually and what it will do is,
it will just use whichever one is relevant
to the current machines.
So if the current machine understands display flex,
it would use that.
Or if you're in an older machine that needs
this prefix perhaps like Microsoft Flexbox
or Safari or Chrome would use this.
So it actually does a pretty cool job of automatically,
taking care of those things for you.
If you want to read more about styles,
make sure you take a look at the documentation.
So let's take a look at a problem,
that we can practice this with.
Now here, I've set up pretty much the same shopping cart
that we've been playing with.
The important parts are going to be these buttons
right here, that I want to change with some styles,
as well as the little shopping cart icon right here,
we're going to modify both of those with styles.
And so here's where you can see,
what it's going to look like.
So we have rounded out the corners of these buttons
and you can see that there's a border
around the buttons as well.
And if we get the price above $100,
it should give you a red button, instead of a green button,
for this shopping cart.
So let's go ahead and take care of that.
You can find the difference between the two right here.
So let's get started with the problem.
We're going to make this window bigger,
so we can see what we're doing and to create a style,
you have a couple of things that you can do.
So first we need to find the plus button.
It's a little bit difficult to find,
it's right here in line like 36.
And so what you want to do is add a style binding here
and then in here in quotations, we want to create an object
and this object is going to have the styles,
that we want to modify.
So here we could say something like,
border and radius and then we can set this to
and we would have to put this in quotes '50%'.
So borderRadius of 50% would give you that circle
and remember that you can also do borderRadius,
if you quote it, then you can use the kebab-case
but you can probably tell that it's just a little bit easier
to just use, sort of the other notations.
That's usually what I go with
and just remember kebab-case like lower case first
and then every keyword is a capital letter.
Now we can also do another one.
Remember that normally in CSS, you would use a semi-colon
but that will cost an error,
so you have to use a comma
and so let's do a border and we'll have to put in quotes,
'3PX solid', and we'll do 'dark green'.
So this is just normal CSS
and now we have a little dark green border.
Now, if you don't want to write everything like this,
you can take this object and cut it out of here
and in your data section, we can create bordeStyle
and then I'm going to paste all that, okay?
And I'll put a comma at the end, just to make it nicer.
I'll put each one of these on a separate line.
I'll put this border first.
And that means I got to put a comma here
and delete it from here.
So now we can use this variable name,
instead of doing the whole style here,
in this button section.
That way it's also a little bit reusable.
You can also use this wherever else you want it,
although I'm not sure I would want to do that anywhere.
I'm also going to modify it, so that if I get past 100 here,
this shopping cart icon will change.
So to do that, what we can do is create another variable
or another object.
So I'm going to call this one, warningObject
and to initialize it,
we're going to give it a background color.
We'll set that to auto.
So what that will do is,
it'll just retain whatever the color of the button is.
So it's going to stay green,
which we've assigned with the bootstrap class
and I'm going to need to add also a border here,
of transparent because the buttons have
a default to outline.
And if you don't clear it out by using border transparent
then you will be able to see kind of like a fussy outline
around the button, not very nice looking.
And then I need to go to where that button is.
So that button happens to be up here and I can use,
The style attribute in here or the style binding
and then call this warningObject.
When I do that, just to test it out, notice that,
it still works the same way.
So let me show you, I'll take off this transparent option.
It's not going to show it to you until you modify the color.
So if I made the color of this red
and it would still have that green outline,
it wouldn't look very good.
So that's not going to help if I show you this now.
So let's go ahead and figure out how we can do this.
So what I can do is, when I add something to the cart,
I can also do a check to if my cart total.
So if this, cart total,
total is capitalized, is greater than
or equal to 100 and then I want you to look for the,
this warningObject
and I can look for just the background color
and set that equal to red.
Let's see if that works, we'll hit plus sign
and when we get to 105 or anything over 100,
you're going to get the background,
as well as the tiny little outline,
that is annoying if you don't fix to be red
and that's how you can do some dynamic modifying of styles,
let's see there's probably something else
I need to mention here and that is,
that notice that I can target not just a variable
but I can actually use object notation,
to get to a specific element in that variable,
which I think is pretty awesome
and this is also the advantage of using objects,
to modify things that you can just call objects here
and then you have access to all the properties
in an object dynamically, anywhere in your application.