Inline styles

- [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.