1 00:00:00,600 --> 00:00:06,000 Hey Guys welcome to your next project dealing with a prize in this video we're going to use the Weather 2 00:00:06,030 --> 00:00:12,780 Underground API which is one that I've used for years now for building our weather applications with 3 00:00:12,780 --> 00:00:18,920 react and angular react native We have a YouTube video building one with Riak native. 4 00:00:18,930 --> 00:00:22,860 Now we're going to build one with just plain old javascript. 5 00:00:22,860 --> 00:00:28,050 We're going to use a bootstrap layout and we're actually going to use a mobile VCR if we have. 6 00:00:28,050 --> 00:00:33,360 Miami Florida is the default and we can get all this different weather information even a little icon 7 00:00:33,360 --> 00:00:38,880 representing whatever the condition is at that time and we can click change location and we'll get a 8 00:00:38,880 --> 00:00:47,340 little more a little modal pop up here and we can change for instance to Boston Mass and save and then 9 00:00:47,340 --> 00:00:48,140 that'll change. 10 00:00:48,140 --> 00:00:53,020 Now if I reload the page it's going to state Boston Mass because we're using local storage. 11 00:00:53,190 --> 00:00:59,250 If I were to look at my chrome tools and go to application and local storage and look at file you'll 12 00:00:59,250 --> 00:01:04,620 see that I have the city and state stored here and this will be here even if we exit the browser and 13 00:01:04,620 --> 00:01:05,220 come back. 14 00:01:05,220 --> 00:01:08,610 So it's a nice little application we're going to build. 15 00:01:08,610 --> 00:01:16,500 We're going to use the fecche API again to make our requests to the the bed the W underground API. 16 00:01:16,500 --> 00:01:20,790 Now again you will need to register to use this API. 17 00:01:20,790 --> 00:01:28,500 So you want to go to w underground dot com slash API and just click register or sign in and then register 18 00:01:28,500 --> 00:01:34,300 from there and you should then have a panel like this where you can see your key settings. 19 00:01:34,470 --> 00:01:36,400 This is your API key. 20 00:01:36,450 --> 00:01:42,360 And then if you go to documentation it shows you how to make a request and it's very easy all you do 21 00:01:42,360 --> 00:01:49,560 is make is use this you are Al you have your API key which they automatically put in here for you slash 22 00:01:49,560 --> 00:01:56,850 conditions slash queue and then whatever state you want and then whatever city and then dot Jason and 23 00:01:56,850 --> 00:02:04,320 if we look at the response you'll see that we have this object that has a response object which isn't 24 00:02:04,320 --> 00:02:05,730 really important to us. 25 00:02:05,880 --> 00:02:09,400 What's important to us is this current observation object. 26 00:02:09,540 --> 00:02:16,110 And this is what has everything in it it has the all the display all the location information if you 27 00:02:16,110 --> 00:02:18,670 want to use like the zip code and all that stuff. 28 00:02:18,780 --> 00:02:21,690 But then down here we have all the weather stuff. 29 00:02:21,690 --> 00:02:28,200 So you can see we have a weather string partly cloudy temperature string which shows Fahrenheit and 30 00:02:28,200 --> 00:02:29,280 Celsius. 31 00:02:29,280 --> 00:02:33,210 We can also get just Fahrenheit or just Celsius. 32 00:02:33,210 --> 00:02:40,980 We can get the humidity we can get the wind the dew points the precipitation the icon you are also there's 33 00:02:40,980 --> 00:02:43,130 a lot of stuff that we can get here. 34 00:02:43,140 --> 00:02:46,800 So this is a really nice API to work with. 35 00:02:46,800 --> 00:02:47,100 All right. 36 00:02:47,100 --> 00:02:49,050 So this is what we're going to be building. 37 00:02:49,050 --> 00:02:55,560 So I want to start off by just creating the UI which isn't going to be too difficult so let's create 38 00:02:55,590 --> 00:02:59,310 a new folder here and we're going to call this weather. 39 00:02:59,330 --> 00:03:05,880 J.S. it's going to it's going to be we'll call this application and this creates So it's not create. 40 00:03:05,880 --> 00:03:12,940 Let's open this up in code and then from here we'll create our files. 41 00:03:12,950 --> 00:03:13,280 All right. 42 00:03:13,280 --> 00:03:25,280 So of course we need index each you know we also want our main app dot J Yes we want a file called weather 43 00:03:25,280 --> 00:03:25,810 Dot. 44 00:03:25,910 --> 00:03:29,590 Yes and that's what we're going to use to make our request to the API. 45 00:03:29,870 --> 00:03:35,650 We want a UI Daut J style for dealing with the user interface. 46 00:03:35,810 --> 00:03:39,920 And then since we're using local storage I'm also going to put that in its own file. 47 00:03:39,920 --> 00:03:45,090 So I'm really separating the different parts of the application here into two different files. 48 00:03:46,940 --> 00:03:52,220 And if you notice the way that we're we're programming has changed along the way back in the DOM projects 49 00:03:52,220 --> 00:03:56,360 we just kind of threw everything in the in the app js file. 50 00:03:56,360 --> 00:03:59,800 We didn't have classes we didn't have anything like that. 51 00:03:59,810 --> 00:04:05,930 Now I'm trying to give you a better way to structure your applications before wasn't so important we 52 00:04:05,930 --> 00:04:09,630 were just learning the syntax and the DOM and things like that. 53 00:04:09,650 --> 00:04:14,300 So I wanted to focus on that but now what we're trying to structure our applications a little better 54 00:04:14,570 --> 00:04:16,750 and I'm sure you've noticed that. 55 00:04:16,790 --> 00:04:18,580 So let's go to index HVM. 56 00:04:18,620 --> 00:04:21,960 And this is going to be a bootstrap theme. 57 00:04:22,070 --> 00:04:28,460 So let's see we're actually going to use boot's swatch again because they have some really nice customized 58 00:04:28,490 --> 00:04:29,340 themes. 59 00:04:29,600 --> 00:04:36,780 So it's going to boot swatch dot com and I'm going to use this first one this sir Julian. 60 00:04:37,190 --> 00:04:43,800 So click download and we'll copy that link and then I was going to put my standard structure using it 61 00:04:45,530 --> 00:04:50,850 and then will do link ups. 62 00:04:51,150 --> 00:04:56,020 I'll furrowing that Boots boot strap or boots swatch theme. 63 00:04:56,200 --> 00:04:58,660 Let's change the title here to weather. 64 00:04:58,980 --> 00:05:00,760 Yes. 65 00:05:01,160 --> 00:05:08,990 And we also want to include the the bootstrap javascript so if we go to get bootstrapped dot com and 66 00:05:08,990 --> 00:05:13,280 go to get started and go right here we want these three lines. 67 00:05:14,580 --> 00:05:19,730 So this is the bootstrap javascript as well as the dependencies. 68 00:05:19,740 --> 00:05:22,860 OK and then we want to make sure we include our scripts. 69 00:05:22,890 --> 00:05:24,780 So it's a script 70 00:05:27,080 --> 00:05:36,100 source and this will be let's do storage J.S. just disconnect copy this. 71 00:05:36,200 --> 00:05:40,830 So we need three more so of storage then we'll have the weather. 72 00:05:40,890 --> 00:05:50,630 J.S. that will have you I dot Jay us and then dot J.S. and save. 73 00:05:50,750 --> 00:05:53,680 And now we can start to build the body. 74 00:05:53,690 --> 00:05:58,100 So let's go right below the opening body tag and create a container 75 00:06:01,160 --> 00:06:03,050 which will push everything to the middle. 76 00:06:03,170 --> 00:06:05,650 Let's create a row we're going to use the grid. 77 00:06:05,660 --> 00:06:12,350 Now we're going to use a six column div here column D6 but I want to push it to the middle so we're 78 00:06:12,350 --> 00:06:16,100 also going to add the x Ardo class. 79 00:06:16,400 --> 00:06:18,990 And then I want a tech center. 80 00:06:19,550 --> 00:06:31,610 I want it to be blue so I'm going to add the B.G. primary class and let's do margin top 5 let's do padding 81 00:06:32,180 --> 00:06:37,270 all around 5 and let's do rounded that will give us rounded corners. 82 00:06:37,490 --> 00:06:37,790 All right. 83 00:06:37,790 --> 00:06:41,970 So quite a few classes there and then we'll put in H-1. 84 00:06:42,050 --> 00:06:48,310 I'm going to give this an ID of W Dasch location. 85 00:06:48,350 --> 00:06:52,460 So the way Im doing this this is a little bit different each. 86 00:06:52,490 --> 00:06:54,860 I'm going to create an element for each part. 87 00:06:54,860 --> 00:07:00,050 For instance the location which will be in an H-1 then will have the weather string which will be like 88 00:07:00,050 --> 00:07:01,420 partly cloudy. 89 00:07:01,490 --> 00:07:07,940 I'm going to do it in each separate element rather than putting the entire HVM owl in javascript and 90 00:07:07,940 --> 00:07:13,770 inserting it into one div which is a kind of a different way of doing it. 91 00:07:13,880 --> 00:07:16,340 So it's put in H-3 here. 92 00:07:16,340 --> 00:07:22,610 I'm also going to give this H-3 a class of text dark to make it black and then we're going to give this 93 00:07:22,610 --> 00:07:28,040 an ID of W Yeah. 94 00:07:28,340 --> 00:07:29,240 What I want. 95 00:07:29,330 --> 00:07:30,850 Location and then yeah. 96 00:07:30,860 --> 00:07:33,020 W dash D. 97 00:07:33,080 --> 00:07:35,800 C for description. 98 00:07:35,930 --> 00:07:37,610 So that will be an H three. 99 00:07:37,820 --> 00:07:43,320 And then we want another H-3 with the idea of W string. 100 00:07:44,250 --> 00:07:50,300 Ok so this will be like partly cloudy and then the string will be the temperature string which will 101 00:07:50,300 --> 00:07:58,430 have the Fahrenheit and Celsius and then under that we'll have our image and this we're going to generate 102 00:07:58,430 --> 00:08:02,750 the source of the image through javascript's so we don't need that. 103 00:08:02,750 --> 00:08:10,940 All we need is an ID and we're going to set that to w dash icon and then underneath that we'll have 104 00:08:10,940 --> 00:08:18,040 a UL have a class of list dash group. 105 00:08:18,440 --> 00:08:25,880 And let's also give it a class of T-3 give it some margin top and I also want this to have an ID 106 00:08:28,370 --> 00:08:33,470 of W dash details. 107 00:08:34,240 --> 00:08:36,790 OK and then we're going to have a few list items here. 108 00:08:36,890 --> 00:08:40,900 All with the class of list group item. 109 00:08:42,530 --> 00:08:43,820 And then let's see. 110 00:08:43,820 --> 00:08:48,400 This will have an ID and I want this to be the humidity. 111 00:08:48,410 --> 00:08:52,800 So B W Dasch humidity. 112 00:08:53,300 --> 00:08:55,260 So I spell it wrong. 113 00:08:56,270 --> 00:08:58,840 All right and then we'll just copy this. 114 00:08:59,630 --> 00:09:02,140 So we'll have humidity will have dewpoint 115 00:09:05,040 --> 00:09:14,150 will have feels like so feels Dasch like and will have the wind. 116 00:09:14,320 --> 00:09:17,580 So this is all stuff that we can fetch from the API. 117 00:09:17,990 --> 00:09:18,340 OK. 118 00:09:18,350 --> 00:09:25,550 Now we're also going to have a mole which will open up a pop up where we can put in our location we 119 00:09:25,550 --> 00:09:28,450 can change our location but we need a button for that. 120 00:09:28,790 --> 00:09:35,030 So what I'm going to do is I'm going to go to the bootstrap Web site and go to components and then motile 121 00:09:36,180 --> 00:09:37,860 instead of just typing it all out. 122 00:09:37,860 --> 00:09:41,110 Let's go down to where it says live demo right here. 123 00:09:41,220 --> 00:09:43,060 We're going to copy this button. 124 00:09:44,850 --> 00:09:46,990 And go right under the UL. 125 00:09:47,460 --> 00:09:52,720 And I'm going to put in H.R. horizontal rule and then paste in that button and then I'm just going to 126 00:09:52,720 --> 00:10:00,360 change a couple things going to change the text here to say change location. 127 00:10:00,790 --> 00:10:07,690 We're going to change the data at Target to EHLO see mode also location mode. 128 00:10:08,320 --> 00:10:10,330 And then that should be it for that. 129 00:10:10,330 --> 00:10:13,640 Now we need the actual modal which is this part here. 130 00:10:14,420 --> 00:10:19,250 OK so we'll grab that and we'll put that down at the bottom. 131 00:10:19,250 --> 00:10:26,330 We're going to change the ID to Loek modal so that the button above links to it will change the title 132 00:10:26,330 --> 00:10:29,910 here to locomotor label. 133 00:10:30,080 --> 00:10:38,040 And then this ID to locomotor label and then this Modal title right here we're going to change that 134 00:10:40,930 --> 00:10:44,050 to choose location 135 00:10:46,840 --> 00:10:52,790 right in let's see we're going to want a form in the body. 136 00:10:52,910 --> 00:11:08,400 So let's go down let's go in the body here and say form will give us an idea of W Dasch form. 137 00:11:08,400 --> 00:11:09,630 We don't need an action 138 00:11:13,810 --> 00:11:16,060 inside here let's put a form group 139 00:11:19,000 --> 00:11:21,300 and we'll have a label. 140 00:11:21,480 --> 00:11:22,690 This would be for the city 141 00:11:26,780 --> 00:11:28,930 and then input. 142 00:11:29,580 --> 00:11:33,180 So have an ID of city. 143 00:11:34,290 --> 00:11:37,340 Let's give it a class of form control. 144 00:11:41,440 --> 00:11:46,790 Just just a bootstrap class to make the input look good and then going to copy the whole form group 145 00:11:46,820 --> 00:11:49,930 and do the same thing and this is going to be for the state. 146 00:11:58,690 --> 00:12:05,110 OK and then in the footer we have a close button we can actually leave that the way it is. 147 00:12:05,410 --> 00:12:09,150 And then this button here I'm going to give. 148 00:12:09,150 --> 00:12:15,600 I'm just going to give them an ID of W dash change button. 149 00:12:17,150 --> 00:12:21,400 Or change between and save. 150 00:12:21,400 --> 00:12:26,590 So let's check that out and see if we go to that's not it. 151 00:12:26,650 --> 00:12:31,540 We want to open this up with live server see what it looks like. 152 00:12:32,470 --> 00:12:32,800 All right. 153 00:12:32,800 --> 00:12:38,260 So notice we don't have any text in here and that's fine because we're going to fetch it from the API. 154 00:12:38,410 --> 00:12:41,650 We just basically have placeholders up here. 155 00:12:41,650 --> 00:12:41,950 All right. 156 00:12:41,950 --> 00:12:48,960 So all this stuff it's just placeholders I click change location we get our little modal dropdown. 157 00:12:49,170 --> 00:12:49,430 All right. 158 00:12:49,430 --> 00:12:50,040 Good. 159 00:12:50,250 --> 00:12:58,140 So in the next video what we'll do is will create our or will work in our weather dot J S file. 160 00:12:58,140 --> 00:13:04,080 We're going to create a weather class where we can fetch the data from the API and bring that in and 161 00:13:04,080 --> 00:13:11,430 then we'll have the UI dot J S class actually insert the data into the the elements here. 162 00:13:11,430 --> 00:13:13,290 All right so I will see you in the next video.