1 00:00:00,590 --> 00:00:04,500 In the last video we got our latitude down into our season display component. 2 00:00:04,560 --> 00:00:08,800 Now the only other thing we have to do is figure out the current month and then use the latitude and 3 00:00:08,800 --> 00:00:14,340 the month to decide if it is summer or winter and getting the month is actually going to be pretty straightforward. 4 00:00:14,520 --> 00:00:23,160 If you open up a javascript console really quickly you can do new dates that get month like so that's 5 00:00:23,160 --> 00:00:26,900 going to return an integer indicating the current month of the year. 6 00:00:26,910 --> 00:00:29,620 Note that this is a zero index date. 7 00:00:29,700 --> 00:00:32,520 So 10 indicate the eleventh month of the year. 8 00:00:32,520 --> 00:00:39,770 So for me right now I'm recording this in November of 10 would be mean November to put numbers gee all 9 00:00:39,770 --> 00:00:41,390 these different months this is what you would get. 10 00:00:41,390 --> 00:00:48,160 So we start off with zero month as being January 1 is fed and over year 10 like I said would be in November. 11 00:00:48,200 --> 00:00:51,700 Now we're going to kind of simplify our season determination here. 12 00:00:51,740 --> 00:00:57,500 We're going to say that if we are between April and September then it's going to be summer indicated 13 00:00:57,500 --> 00:01:00,760 by these orange boxes for the Northern Hemisphere. 14 00:01:00,800 --> 00:01:06,800 But if our users in the southern hemisphere and it is between January February March or October November 15 00:01:06,800 --> 00:01:10,460 December then we're going to say that it's summer for them down there. 16 00:01:10,460 --> 00:01:15,490 All right so now that we have these rules in mind let's flip back over to our editor and we're going 17 00:01:15,490 --> 00:01:20,710 to put together a little bit of code to essentially determine the current season as a string. 18 00:01:20,770 --> 00:01:24,470 So I want to end up with a simple string that says Summer or Winter. 19 00:01:24,850 --> 00:01:30,760 I'm going to define a new function above my component's season display whose sole purpose is to determine 20 00:01:30,820 --> 00:01:32,470 what the season is. 21 00:01:32,500 --> 00:01:36,940 Now I could definitely put the code for this inside the body of season display but personally I like 22 00:01:36,940 --> 00:01:41,170 to extract as much logic out as functional components as possible. 23 00:01:42,080 --> 00:01:48,290 So if you're going to say get season and this is going to be a function that we'll call with the current 24 00:01:48,380 --> 00:01:50,940 latitude and the current month. 25 00:01:52,290 --> 00:01:56,810 And before we put any logic aside there let's make sure that we will be able to call that function from 26 00:01:56,810 --> 00:01:59,300 inside side of the season display component. 27 00:01:59,300 --> 00:02:05,430 I will remove the console log and then I will say conc season will be a good season. 28 00:02:05,430 --> 00:02:08,710 I'll pass in my latitude which is stored on Propst not lat. 29 00:02:08,910 --> 00:02:11,330 I meant to get the month we'll do a new date. 30 00:02:11,400 --> 00:02:15,970 Don't get much like the. 31 00:02:16,150 --> 00:02:21,670 So now our Get season function is going to get the current latitude and the month now we can write a 32 00:02:21,670 --> 00:02:27,190 little bit of logic in here to return either the string summer or the spring summer winter Scarne. 33 00:02:27,210 --> 00:02:31,390 Sorry I'm reading summer in winter on my screen right now as I say those words. 34 00:02:31,630 --> 00:02:35,220 I get so inside of your There's a ton of different ways we could write this logic. 35 00:02:35,230 --> 00:02:41,260 I've got one way of writing the logic that's nearly compact and somewhat easy to read so I'm going to 36 00:02:41,260 --> 00:02:51,550 say if a month is greater than 2 and the month is less than 9 so that would indicate that we are in 37 00:02:51,700 --> 00:02:54,260 this group of months right here. 38 00:02:54,370 --> 00:03:00,070 So then we will determine whether or not we are in a northern hemisphere location in which case would 39 00:03:00,070 --> 00:03:01,830 be summer or we are in Southern. 40 00:03:01,830 --> 00:03:03,770 In which case it would be winter. 41 00:03:03,770 --> 00:03:08,810 So to do so we're going to use a javascript ternary expression will do so by saying. 42 00:03:08,840 --> 00:03:14,750 Latt is flat greater than zero if it is that means that we must be in the northern hemisphere. 43 00:03:15,570 --> 00:03:17,560 I'll then put in a question mark. 44 00:03:18,000 --> 00:03:22,400 If we are in the northern hemisphere then I want to return the values summer. 45 00:03:22,560 --> 00:03:26,880 Otherwise I want to return the value winter like so. 46 00:03:26,880 --> 00:03:32,910 So again the say javascript ternary expression this expression right here will be evaluated if it returns 47 00:03:32,940 --> 00:03:33,530 True. 48 00:03:33,720 --> 00:03:36,910 Then we're going to return summer from the overall expression. 49 00:03:36,950 --> 00:03:41,270 Otherwise if Lat is less than zero then we will return winter instead. 50 00:03:42,560 --> 00:03:47,630 The logic here is somewhat straightforward if we are in the summer months and we are in the northern 51 00:03:47,630 --> 00:03:54,270 hemisphere return summer otherwise return winter and I'm going to make sure I put on a return statement 52 00:03:54,360 --> 00:03:59,300 like so now we're going to return the result of this entire ternary expression. 53 00:04:00,680 --> 00:04:07,150 Now this right here is only going to handle the summer months so I'm going to put in an L-Space and 54 00:04:07,160 --> 00:04:10,300 it will put in basically the same Turner expression here. 55 00:04:10,360 --> 00:04:12,930 So this would now be the case in which we are in the months. 56 00:04:13,000 --> 00:04:16,430 January February March or October November December. 57 00:04:16,630 --> 00:04:20,830 So once again we need to determine if we are in the northern hemisphere or Southern Hemisphere and then 58 00:04:20,830 --> 00:04:22,710 return the appropriate string. 59 00:04:22,990 --> 00:04:26,560 So I will return lat less than zero at this time. 60 00:04:26,560 --> 00:04:29,090 We're going to reverse the order of months. 61 00:04:29,110 --> 00:04:34,330 So now if we are in the northern hemisphere during the winter months that must mean we are in winter. 62 00:04:34,390 --> 00:04:39,970 Otherwise we must be in the southern hemisphere in which case we are in summer all right. 63 00:04:39,970 --> 00:04:42,760 Like I said many different ways to write out this expression right here. 64 00:04:42,760 --> 00:04:47,220 This is just one way that seems somewhat reasonable and somewhat easy to put together. 65 00:04:47,240 --> 00:04:54,170 So now to make sure that that is working correctly I'm going to put a console log for season down inside 66 00:04:54,170 --> 00:04:59,700 my component and then I will refresh my application and make sure that the correct season is being displayed. 67 00:04:59,840 --> 00:05:02,570 So I currently have winter which for me is actually correct. 68 00:05:02,570 --> 00:05:07,910 It is winter here because I'm in the northern hemisphere and it is the winter months to test this out 69 00:05:07,910 --> 00:05:08,630 very easily. 70 00:05:08,630 --> 00:05:14,810 I could change my hardcoded geo location or the location overnight down here so I will say that I am 71 00:05:14,810 --> 00:05:20,870 in Sao Paolo which is in the southern hemisphere and so now if I refresh I should see summer and in 72 00:05:20,870 --> 00:05:22,580 fact I do. 73 00:05:22,660 --> 00:05:24,340 All right so it looks pretty good. 74 00:05:24,430 --> 00:05:26,590 So we now have our season. 75 00:05:26,590 --> 00:05:31,240 The last thing we have to do is do a little bit of styling inside of our season display component so 76 00:05:31,240 --> 00:05:33,860 quick pause and we'll start to take care of that in the next video.