1 00:00:00,860 --> 00:00:03,750 In the last video we were able to determine the current season. 2 00:00:03,830 --> 00:00:08,840 So now we need to customize how the season display component looks depending upon whether or not it 3 00:00:08,840 --> 00:00:10,520 is winter or summer. 4 00:00:10,610 --> 00:00:12,970 Remember that the ultimate goal here is to show the text. 5 00:00:12,970 --> 00:00:18,170 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 6 00:00:18,170 --> 00:00:22,030 bottom right hand side and the icon should change depending upon the season. 7 00:00:22,280 --> 00:00:27,380 So let's start simple let's try to just get the text on the screen either birds Schily or let's hit 8 00:00:27,380 --> 00:00:28,600 the beach. 9 00:00:28,610 --> 00:00:32,660 All right so going to flip back over to my seasoned display component now I'm going to remove that console 10 00:00:32,660 --> 00:00:34,140 log that we had here before. 11 00:00:35,790 --> 00:00:41,850 And then going to remove the hard coded text of seasoned display and I will replace it with a set of 12 00:00:41,850 --> 00:00:43,050 curly braces. 13 00:00:43,080 --> 00:00:49,020 Remember we use the curly braces anytime we want to reference a javascript variable but we can also 14 00:00:49,020 --> 00:00:53,400 put any type of javascript expression they want to inside of here. 15 00:00:53,730 --> 00:00:58,950 So we want to ultimately get some text inside there that says either Burr is Chile or let's hit the 16 00:00:58,950 --> 00:00:59,620 beach. 17 00:01:00,660 --> 00:01:04,050 Depending upon the value of season right here. 18 00:01:04,050 --> 00:01:12,090 So we could either put like a IF statement out here that says hey if season is equal to winter or whatever. 19 00:01:12,180 --> 00:01:15,110 Give me something like It's chilly or what have you. 20 00:01:15,360 --> 00:01:16,650 But I've another way to do this. 21 00:01:16,650 --> 00:01:22,200 That would end up with a little bit more succinct component here would be to do that logic directly 22 00:01:22,200 --> 00:01:25,350 inside of this little GSX interpellation right here. 23 00:01:25,350 --> 00:01:33,530 Let me show you how I'm going to say if season is equal to winter then I'll put my question mark to 24 00:01:33,530 --> 00:01:36,240 use a turner expression just as we had before. 25 00:01:36,260 --> 00:01:45,340 Up inside of get season so if season is equal to winter I want to show this string for it is chilly. 26 00:01:45,350 --> 00:01:51,150 Now put a colon to indicate the other case the case in which it is not winter and I'll put down the 27 00:01:51,210 --> 00:01:54,550 appropriate string for that which we had said is let's hit the beach 28 00:01:57,280 --> 00:02:02,080 like so now this is a very long line of code here I'm going to save very quickly and the wind will be 29 00:02:02,140 --> 00:02:04,190 reformatted like so. 30 00:02:04,570 --> 00:02:07,390 So notice how we've now got the multi-line GSX expression. 31 00:02:07,390 --> 00:02:09,570 So a set of parentheses set of parentheses. 32 00:02:09,640 --> 00:02:15,340 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 33 00:02:15,370 --> 00:02:19,150 expression now using a turner expression like this. 34 00:02:19,150 --> 00:02:24,460 Inside the body of your GSX like so is kind of a divisive topic in the community. 35 00:02:24,460 --> 00:02:29,200 Some people would say oh no you should not put this much logic directly into your GSX and they would 36 00:02:29,200 --> 00:02:34,030 say instead you should extract that out to a helper variable appears something like undercounts text 37 00:02:34,600 --> 00:02:36,850 and then put the Tournay expression right there. 38 00:02:36,850 --> 00:02:41,950 And then we could refer to text inside the component like so I'm going to leave it up to you. 39 00:02:41,950 --> 00:02:42,760 Which one do you use. 40 00:02:42,760 --> 00:02:43,740 It's totally up to you. 41 00:02:43,750 --> 00:02:48,080 This is one of those things in the world of free act that is a matter of personal preference. 42 00:02:48,130 --> 00:02:53,140 I'm going to leave mine as this right here where I determine the text ahead of time and then reference 43 00:02:53,140 --> 00:02:57,850 it inside the GSX if I want to do this because it's going to be easier for you to read what's going 44 00:02:57,850 --> 00:02:58,260 on here. 45 00:02:58,270 --> 00:03:02,840 As we start to add a little bit more logic but again totally up to you. 46 00:03:02,850 --> 00:03:04,530 All right so we've got the text on there. 47 00:03:04,620 --> 00:03:10,170 Now the last thing I want to do is make sure that the text shows up rather large at present our text 48 00:03:10,290 --> 00:03:12,430 which you can see right here is pretty small. 49 00:03:12,450 --> 00:03:18,450 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 50 00:03:18,450 --> 00:03:23,750 to wrap my text right there with a h one tag like so. 51 00:03:24,590 --> 00:03:28,540 Now I'll save this and I can flip back over and see. 52 00:03:28,600 --> 00:03:31,860 It's a little bit more reasonably large than before. 53 00:03:31,870 --> 00:03:32,090 OK. 54 00:03:32,110 --> 00:03:32,740 So this looks good. 55 00:03:32,740 --> 00:03:36,190 We've now got our text on the screen but we still got a little bit of styling to do here. 56 00:03:36,190 --> 00:03:38,540 So let's take a quick pause and continue in the next section.