1 00:00:00,990 --> 00:00:07,700 All right guys so now we want to be able to change the weather location and also persisted to storage. 2 00:00:07,740 --> 00:00:13,650 So let's first work on just changing the location in general because right now if I were to put something 3 00:00:13,650 --> 00:00:19,730 in there and save nothing happens the this doesn't even close. 4 00:00:19,800 --> 00:00:24,540 So let's handle that now with the motile to be able to get it to close. 5 00:00:24,540 --> 00:00:26,990 We actually have to use Jay query. 6 00:00:27,290 --> 00:00:34,440 And it's because bootstrap depends on Jay Curry and uses a query but it's just literally one simple 7 00:00:34,440 --> 00:00:35,410 line. 8 00:00:35,670 --> 00:00:45,040 But if we look at the index page and we look at the motile the button we have a idea of W change button 9 00:00:45,040 --> 00:00:47,100 so we need to add an event listener to that. 10 00:00:47,100 --> 00:00:48,850 So let's go to abjured Yes. 11 00:00:49,620 --> 00:00:54,430 And let's go right here. 12 00:00:55,330 --> 00:00:59,710 Wholesale change location of event. 13 00:01:00,380 --> 00:01:14,360 So document Daut get element by d w Dasch change dash BT and we want to add an event listener for quick 14 00:01:17,080 --> 00:01:27,870 and then I'm going to throw in an arrow function there with an event parameter and let's see from here. 15 00:01:29,290 --> 00:01:33,770 We want to get the city and state that's passed into the input. 16 00:01:33,970 --> 00:01:47,350 So let's say city equals document Daut get element by the city and we want the value from it and we 17 00:01:47,350 --> 00:01:49,840 want the same thing for the body. 18 00:01:50,740 --> 00:01:53,590 So it's a bar on not body state 19 00:01:57,260 --> 00:01:59,100 just like that. 20 00:01:59,640 --> 00:02:02,610 And then let's call this change location. 21 00:02:02,610 --> 00:02:13,420 So I want to just cut that go ahead and paste it in and then once we change the location we need to 22 00:02:13,990 --> 00:02:21,160 basically get the weather again fetch it with this new location and then repaint the UI which is which 23 00:02:21,160 --> 00:02:22,580 is called right here. 24 00:02:22,630 --> 00:02:27,400 So we just need to call get weather again. 25 00:02:27,660 --> 00:02:29,050 I will say get 26 00:02:31,670 --> 00:02:34,360 the display weather 27 00:02:37,430 --> 00:02:38,720 like that. 28 00:02:39,010 --> 00:02:44,250 And then finally we want to close the motile and like I said we need to use J. 29 00:02:44,250 --> 00:02:48,140 Corey this is the only J Crew you'll see in this course. 30 00:02:48,280 --> 00:02:50,800 So we need to grab Loek Moto 31 00:02:53,800 --> 00:02:58,340 and we'll say dog motile hide. 32 00:02:58,700 --> 00:03:01,060 OK I'll close it for us. 33 00:03:01,060 --> 00:03:03,160 So let's save this. 34 00:03:03,160 --> 00:03:11,590 And now we have Boston masterless change location to Miami F.L. click Save it closes it and it changes 35 00:03:11,590 --> 00:03:12,850 to Miami. 36 00:03:12,850 --> 00:03:15,730 Now this is all within the UI a fiery load. 37 00:03:15,730 --> 00:03:17,900 It goes back to Boston Mass. 38 00:03:17,980 --> 00:03:24,210 OK because it's not persisted anywhere it's just changing it in the UI and inside the files. 39 00:03:24,250 --> 00:03:26,560 So this is where our storage class comes in. 40 00:03:26,560 --> 00:03:29,190 So it's going create That's all go to storage. 41 00:03:29,190 --> 00:03:30,360 Yes. 42 00:03:30,610 --> 00:03:34,240 And let's a class storage 43 00:03:37,740 --> 00:03:39,370 will put in the constructor 44 00:03:42,900 --> 00:03:43,870 constructor. 45 00:03:43,910 --> 00:03:48,790 We're going to just initialize a city and state but not set it to anything. 46 00:03:49,040 --> 00:03:54,430 However we are going to set a default city and state in case there's nothing in local storage. 47 00:03:54,620 --> 00:03:59,330 So we'll say default city equals Miami 48 00:04:02,380 --> 00:04:10,540 default state schools F.L. OK and then we're going to have two methods. 49 00:04:10,540 --> 00:04:20,050 We're going to have get location data and excuse me set location data so scored here and say Get location 50 00:04:20,050 --> 00:04:20,520 data 51 00:04:23,400 --> 00:04:31,900 we'll go under that set location data set is going to be significantly easier. 52 00:04:31,900 --> 00:04:40,610 So let's just do that real quick it takes in a city and state and we simply just set local storage. 53 00:04:41,200 --> 00:04:44,230 So it's set item now. 54 00:04:44,260 --> 00:04:50,960 Remember in the past when we use local storage we were doing like Jason Daut string ephi and all that. 55 00:04:51,040 --> 00:04:56,860 Well we're just now saving just strings we're saving city as a string and state as a string so you don't 56 00:04:56,860 --> 00:05:04,240 have to worry about using string of fire Gees and parts or you know turning arrays into strings or anything 57 00:05:04,240 --> 00:05:11,770 like that we're simply saving city as the city and then we're going to save 58 00:05:14,910 --> 00:05:19,910 the state as the state and that's it. 59 00:05:20,040 --> 00:05:22,110 Now getting location data. 60 00:05:22,890 --> 00:05:29,880 We're going to check to see if the city and stay in the location data is now or in local storages. 61 00:05:29,880 --> 00:05:36,360 Now if it is then we want to set them to the defaults right here if not then obviously we want to use 62 00:05:36,360 --> 00:05:37,530 whatever is in there. 63 00:05:37,770 --> 00:05:39,000 So to do that 64 00:05:41,740 --> 00:05:57,630 we're going to say if local storage Daut get item city is equal to no put in place here. 65 00:05:57,670 --> 00:06:09,400 So if it's equal to know that we're going to set this city equal to this default city else that we want 66 00:06:09,400 --> 00:06:15,150 to set this city equal to whatever is in local storage. 67 00:06:15,610 --> 00:06:21,810 So get item city guy pretty easy. 68 00:06:22,000 --> 00:06:24,880 And then we're going to do the same with the state. 69 00:06:25,570 --> 00:06:27,640 So we're going to check for state 70 00:06:30,990 --> 00:06:33,270 set to the default state 71 00:06:39,990 --> 00:06:41,080 just like that. 72 00:06:41,250 --> 00:06:43,170 And then finally we just want to return 73 00:06:48,910 --> 00:06:53,150 and we're going to return city as this starts city you ups 74 00:06:56,220 --> 00:07:01,250 and state as this starts day and that's it. 75 00:07:01,250 --> 00:07:07,180 That's our that's our storage class so let's save it and then let's put it into use We'll go to app 76 00:07:07,170 --> 00:07:10,610 J us and we're going to initialize it 77 00:07:17,430 --> 00:07:24,210 so will say Konst storage equals new storage. 78 00:07:27,930 --> 00:07:31,080 OK so let's see 79 00:07:34,060 --> 00:07:35,740 let's get the location data. 80 00:07:35,740 --> 00:07:38,490 So in storage we have our Get location data. 81 00:07:38,500 --> 00:07:49,660 So we're going to call that and we're going to do that right here so get stored location data so we'll 82 00:07:49,660 --> 00:07:58,870 put that in a variable and when to call it weather location set it to the storage variable and then 83 00:07:59,350 --> 00:08:01,140 get location data. 84 00:08:04,230 --> 00:08:12,090 All right so now we have inside here we should have an object with a city and a state. 85 00:08:12,960 --> 00:08:18,890 So what we want to do is pass those into the weather here instead of hard coding Boston Mass. 86 00:08:18,930 --> 00:08:25,650 We want to put in here the weather location Daut city 87 00:08:28,270 --> 00:08:38,710 and weather location dot state OK and even if there's nothing in local storage it should use Miami Florida 88 00:08:41,390 --> 00:08:43,640 so pass that and that's good. 89 00:08:43,940 --> 00:08:47,690 And so yeah let's let's go and save this and see what we get. 90 00:08:47,690 --> 00:08:53,420 So we get Miami Florida and let's check to see if there's anything in local storage at the moment. 91 00:08:56,480 --> 00:08:56,820 OK. 92 00:08:56,830 --> 00:09:00,920 So there actually just something from a past application which I can get rid of. 93 00:09:01,240 --> 00:09:06,510 So there's nothing in there so that's why it's showing Miami Florida because that's what we set here. 94 00:09:06,580 --> 00:09:11,190 If I were to change this to Tampa Florida. 95 00:09:11,620 --> 00:09:12,070 That's it. 96 00:09:12,070 --> 00:09:12,690 Yes. 97 00:09:12,910 --> 00:09:15,610 OK and it doesn't really matter what we do we put. 98 00:09:15,970 --> 00:09:24,280 So now when we actually change the location that needs to persist to storage instead of just updating 99 00:09:24,280 --> 00:09:25,140 the UI. 100 00:09:25,300 --> 00:09:32,870 So to do that we'll go down to where we changed the location which is right here. 101 00:09:33,060 --> 00:09:36,350 Let's just put a comment here. 102 00:09:38,060 --> 00:09:46,610 And then old all right under it and we'll say set location in local storage and we can do that by saying 103 00:09:46,610 --> 00:09:59,360 storage Daut set location data and then just pass in the city and state and I'm sorry. 104 00:09:59,360 --> 00:10:10,060 This right here should actually be king city and state not hardcoded. 105 00:10:11,120 --> 00:10:12,260 OK and that should do it. 106 00:10:12,260 --> 00:10:13,960 So let's save. 107 00:10:13,980 --> 00:10:22,470 All right so we have Tampa Florida let's change location to Boston Mass and save. 108 00:10:22,470 --> 00:10:26,160 It gets updated to Boston and Letteri load. 109 00:10:26,160 --> 00:10:33,660 And now we still get Boston and if we look in application local storage we have Boston Mass also. 110 00:10:33,660 --> 00:10:38,970 So our application is now working and complete. 111 00:10:38,970 --> 00:10:46,350 And you can see how easy this stuff is you don't need react or angular or huge ass to build something 112 00:10:46,350 --> 00:10:47,330 like this. 113 00:10:47,520 --> 00:10:53,070 OK frameworks have their place large full stack applications. 114 00:10:53,070 --> 00:10:57,990 Most of the time 90 percent of the time you're probably going to want to use a framework. 115 00:10:57,990 --> 00:11:03,480 But for small applications there's there is no need for it in a lot of the cases. 116 00:11:03,480 --> 00:11:03,810 All right. 117 00:11:03,810 --> 00:11:08,060 So these are some applications that give you some good examples of that. 118 00:11:08,610 --> 00:11:08,900 All right. 119 00:11:08,900 --> 00:11:11,830 So thanks for watching guys and I'll see you in the next video.