In the last video we were able to determine the current season.
So now we need to customize how the season display component looks depending upon whether or not it
is winter or summer.
Remember that the ultimate goal here is to show the text.
Bur it's chilly or let's hit the beach and we also want to show a little icon on the top left and the
bottom right hand side and the icon should change depending upon the season.
So let's start simple let's try to just get the text on the screen either birds Schily or let's hit
the beach.
All right so going to flip back over to my seasoned display component now I'm going to remove that console
log that we had here before.
And then going to remove the hard coded text of seasoned display and I will replace it with a set of
curly braces.
Remember we use the curly braces anytime we want to reference a javascript variable but we can also
put any type of javascript expression they want to inside of here.
So we want to ultimately get some text inside there that says either Burr is Chile or let's hit the
beach.
Depending upon the value of season right here.
So we could either put like a IF statement out here that says hey if season is equal to winter or whatever.
Give me something like It's chilly or what have you.
But I've another way to do this.
That would end up with a little bit more succinct component here would be to do that logic directly
inside of this little GSX interpellation right here.
Let me show you how I'm going to say if season is equal to winter then I'll put my question mark to
use a turner expression just as we had before.
Up inside of get season so if season is equal to winter I want to show this string for it is chilly.
Now put a colon to indicate the other case the case in which it is not winter and I'll put down the
appropriate string for that which we had said is let's hit the beach
like so now this is a very long line of code here I'm going to save very quickly and the wind will be
reformatted like so.
So notice how we've now got the multi-line GSX expression.
So a set of parentheses set of parentheses.
Don't forget to remove the semi-colon at the end and then in the body of it we've got our big old ternary
expression now using a turner expression like this.
Inside the body of your GSX like so is kind of a divisive topic in the community.
Some people would say oh no you should not put this much logic directly into your GSX and they would
say instead you should extract that out to a helper variable appears something like undercounts text
and then put the Tournay expression right there.
And then we could refer to text inside the component like so I'm going to leave it up to you.
Which one do you use.
It's totally up to you.
This is one of those things in the world of free act that is a matter of personal preference.
I'm going to leave mine as this right here where I determine the text ahead of time and then reference
it inside the GSX if I want to do this because it's going to be easier for you to read what's going
on here.
As we start to add a little bit more logic but again totally up to you.
All right so we've got the text on there.
Now the last thing I want to do is make sure that the text shows up rather large at present our text
which you can see right here is pretty small.
If I go back to 100 percent zoom I can barely read it up there on the top left one side so I'm going
to wrap my text right there with a h one tag like so.
Now I'll save this and I can flip back over and see.
It's a little bit more reasonably large than before.
OK.
So this looks good.
We've now got our text on the screen but we still got a little bit of styling to do here.
So let's take a quick pause and continue in the next section.