1 00:00:00,210 --> 00:00:03,270 In this video we're going to wrap up the weather application. 2 00:00:03,270 --> 00:00:08,790 The goal here is to take the messages which are printing to the council and have them show up in a browser 3 00:00:08,790 --> 00:00:11,490 instead and you can put them wherever you like. 4 00:00:11,490 --> 00:00:14,580 I'm gonna put the messages just below the form. 5 00:00:14,640 --> 00:00:16,590 Now what sort of messaging are we going to show. 6 00:00:16,590 --> 00:00:19,160 Well if things go wrong we'll show the error. 7 00:00:19,260 --> 00:00:23,010 If things go well we'll show the location and the forecast. 8 00:00:23,010 --> 00:00:29,340 Now the first step to getting this done is to give ourselves a place in the HDL document to actually 9 00:00:29,340 --> 00:00:31,580 put these messages and to do that. 10 00:00:31,590 --> 00:00:36,290 We're going to create two new paragraphs over in index dot HB S.. 11 00:00:36,360 --> 00:00:39,590 Now we could put these once again wherever we wanted to. 12 00:00:39,600 --> 00:00:43,560 I'm going to go ahead and put them just below the forum which makes sense right here. 13 00:00:43,680 --> 00:00:48,350 We'll set up Paragraph 1 and then down below we'll set up paragraph 2. 14 00:00:48,420 --> 00:00:53,710 So if things go wrong the second paragraph will be empty and the first will contain the error message. 15 00:00:53,790 --> 00:01:00,510 If things go well the first will contain the location and the second will contain the actual forecast. 16 00:01:00,510 --> 00:01:07,320 So now that we have the paragraphs set up the goal is to target those inside of apt at J S we want to 17 00:01:07,320 --> 00:01:14,040 select them much like we selected our form and our input so we can manipulate them with JavaScript. 18 00:01:14,040 --> 00:01:19,440 In this case we want to manipulate what text they're showing when certain pieces of javascript code 19 00:01:19,530 --> 00:01:25,520 run now to get that done we are going to use document dot query selector again. 20 00:01:25,590 --> 00:01:31,410 The problem is that so far we've just been selecting by the elements name and that's not going to work 21 00:01:31,420 --> 00:01:32,820 for what we're doing here. 22 00:01:32,910 --> 00:01:37,560 So let's create a variable concept called message one for that first paragraph. 23 00:01:37,680 --> 00:01:45,310 I'm gonna set up document dot query selector and I'm going to try to select by the p name. 24 00:01:45,330 --> 00:01:51,170 Now the problem is that query selector matches the first element that matches whatever you provide it. 25 00:01:51,180 --> 00:01:56,790 So this is gonna be the first form the first input or the first paragraph the first paragraph on the 26 00:01:56,790 --> 00:01:59,100 document is not what I'm trying to target. 27 00:01:59,340 --> 00:02:03,300 That's actually up here and we don't want to change this message over time. 28 00:02:03,300 --> 00:02:06,700 I want to change the message for one of the paragraphs down below. 29 00:02:06,900 --> 00:02:13,800 To do this what we're gonna do is assign a unique I.D. to these two paragraphs using HDMI out will then 30 00:02:13,800 --> 00:02:21,000 be able to target those two paragraphs by their unique I.D. over inside of APT J S giving a nice way 31 00:02:21,090 --> 00:02:23,540 for us to get exactly what we want. 32 00:02:23,550 --> 00:02:29,550 So setting up an idea is much like setting up a place holder or class value right here for the first 33 00:02:29,550 --> 00:02:30,290 paragraph. 34 00:02:30,340 --> 00:02:37,380 I.D. equals then inside of quotes we provide a unique I.D. I'll use something like message Python 1 35 00:02:37,800 --> 00:02:41,470 and the nice thing about I.D. is that they're designed to be unique. 36 00:02:41,490 --> 00:02:47,090 So if I target message one from javascript I'm always going to get this paragraph. 37 00:02:47,100 --> 00:02:52,990 Next up we'll create an I.D. for that second paragraph I.D. equals message hyphen too. 38 00:02:53,040 --> 00:02:56,250 And now we have a nice way to target that as well. 39 00:02:56,250 --> 00:02:59,970 Let's go ahead and get that done over inside of APT J. 40 00:02:59,990 --> 00:03:04,620 S I'm going to change what I'm passing in to query selector. 41 00:03:04,620 --> 00:03:10,620 Now if we want to target by the elements name we just type it out like form or input or P if we want 42 00:03:10,620 --> 00:03:16,260 to target by class which we did already from SS and which we can also do from javascript. 43 00:03:16,380 --> 00:03:23,780 We start with a dot followed by the class name that was chosen in our case we're trying to target by 44 00:03:23,780 --> 00:03:26,430 I.D. that doesn't start with a dot. 45 00:03:26,510 --> 00:03:33,940 It starts with the pound sign that's shift 3 on your keyboard followed by the idea value of the element. 46 00:03:33,950 --> 00:03:41,450 So in our case we have Message 1 and message 2 as those values for the message one variable right here 47 00:03:41,510 --> 00:03:45,050 after the pound sign message hyphen 1. 48 00:03:45,140 --> 00:03:46,070 Perfect. 49 00:03:46,070 --> 00:03:51,500 Now we have a way to actually target that and down below we can change its contents right here. 50 00:03:51,560 --> 00:03:54,970 Let's go ahead and do just that message. 51 00:03:55,200 --> 00:03:57,350 1 is the paragraph element. 52 00:03:57,470 --> 00:04:05,000 And to change the text we set the text content property and we're going to set it equal to a string. 53 00:04:05,000 --> 00:04:07,170 The new text we want to have show up. 54 00:04:07,340 --> 00:04:11,060 In this case let's go ahead and keep it empty for just the moment. 55 00:04:11,090 --> 00:04:15,890 What I'm gonna do is save all of my files I'm gonna refresh the browser. 56 00:04:15,890 --> 00:04:16,820 And what do I see. 57 00:04:16,820 --> 00:04:18,320 I don't see anything new. 58 00:04:18,320 --> 00:04:22,460 Yes I've added two new paragraphs but they're empty so nothing shows up. 59 00:04:22,550 --> 00:04:26,480 Now we're going to make a small change to our code right here. 60 00:04:26,480 --> 00:04:30,140 I'm gonna say something like froma javascript. 61 00:04:30,320 --> 00:04:36,470 I'll save the file once again and this time when I refresh the page the javascript code is going to 62 00:04:36,470 --> 00:04:39,070 manipulate the value of the paragraph. 63 00:04:39,200 --> 00:04:41,690 And that's what we're trying to do in this file. 64 00:04:41,690 --> 00:04:47,710 We want to target those paragraphs and we want to use text content to change what's showing up. 65 00:04:47,840 --> 00:04:50,300 We'll clear all of the messaging in the beginning. 66 00:04:50,420 --> 00:04:53,910 If things go wrong we'll make sure to render that appropriately. 67 00:04:53,990 --> 00:05:00,470 And if things go well we'll also once again make sure all of that data shows up by setting text content 68 00:05:00,710 --> 00:05:02,570 on the appropriate message. 69 00:05:02,570 --> 00:05:07,670 Now that you know how to set the text content for paragraphs it's challenge time because that's really 70 00:05:07,670 --> 00:05:09,100 all we're going to end up doing. 71 00:05:09,110 --> 00:05:12,020 We're gonna use this same feature quite a bit. 72 00:05:12,020 --> 00:05:15,490 So right here I'll comment out this line though I can leave it in place. 73 00:05:15,520 --> 00:05:18,490 So you remember how to use it and then down below. 74 00:05:18,500 --> 00:05:21,230 I'm going to paste in the challenge comments. 75 00:05:21,230 --> 00:05:27,590 So your goal is to render not rendering render content to those paragraphs. 76 00:05:27,620 --> 00:05:33,260 So we want to make sure that these messages get updated based off of what's happening inside of our 77 00:05:33,260 --> 00:05:35,500 submit callback function. 78 00:05:35,510 --> 00:05:41,150 So first up you need to select the second message from javascript just like we did with message one 79 00:05:41,150 --> 00:05:42,170 up above. 80 00:05:42,170 --> 00:05:49,100 You can add that code right here and then down below for step 2 just before fetch you're going to render 81 00:05:49,130 --> 00:05:54,910 a loading message for the first paragraph and you're going to leave the second one empty. 82 00:05:54,950 --> 00:06:01,190 You can just set it equal to an empty string to clear whatever value it might already have from a previous 83 00:06:01,190 --> 00:06:01,990 search. 84 00:06:02,150 --> 00:06:04,370 All of that is going to happen right here. 85 00:06:04,370 --> 00:06:12,040 Just before we fetch but only if someone actually submits the form that's when we show the loading message. 86 00:06:12,050 --> 00:06:14,550 Now there are two places we can go from there. 87 00:06:14,600 --> 00:06:21,200 Step three if there is an error which means that this code runs we want to set the first message equal 88 00:06:21,200 --> 00:06:22,960 to the error message. 89 00:06:23,060 --> 00:06:28,270 And if there is no error we want to have the first paragraph set equal to the location. 90 00:06:28,370 --> 00:06:33,050 And the second paragraph set equal to the forecast step five. 91 00:06:33,050 --> 00:06:39,140 Test your work search for invalid locations and you should see loading followed by the error message 92 00:06:39,410 --> 00:06:45,770 search for valid locations and you should see loading followed by the location and the forecast. 93 00:06:45,770 --> 00:06:46,250 All right. 94 00:06:46,250 --> 00:06:52,040 Take as much time as you need to knock that out test your work come back and click play 95 00:06:56,040 --> 00:06:56,670 how'd you do. 96 00:06:56,700 --> 00:06:59,360 Let's get started with step number one up above. 97 00:06:59,370 --> 00:07:08,300 I need to select that second message so const message 2 equals document dot query selector. 98 00:07:08,370 --> 00:07:15,990 And here we are indeed querying by I.D. So I start with the pound sign message Python 2 is the idea 99 00:07:15,990 --> 00:07:19,540 value I set up over inside of index dot HB S.. 100 00:07:19,560 --> 00:07:20,890 It's sitting right here. 101 00:07:21,210 --> 00:07:27,540 Now from there we can move on to Step Two of the challenge just before we fetch we want to render a 102 00:07:27,540 --> 00:07:32,310 loading message for the first one and an empty paragraph for the second. 103 00:07:32,370 --> 00:07:34,710 So that could happen right here as an example. 104 00:07:34,710 --> 00:07:38,160 I could do it above where I create the location variable as well. 105 00:07:38,160 --> 00:07:39,130 Either way would work. 106 00:07:39,150 --> 00:07:47,610 Message 1 is going to have its text content property equal to some sort of loading message. 107 00:07:47,610 --> 00:07:49,680 You could have picked anything you wanted to. 108 00:07:49,680 --> 00:07:51,330 I'll just use something like loading. 109 00:07:51,330 --> 00:07:52,510 Dot dot dot. 110 00:07:52,590 --> 00:07:59,520 Though any other text content would have worked and then for message too I'm gonna set that text content 111 00:07:59,940 --> 00:08:05,740 equal to an empty string to clear any value that might have existed from a previous search. 112 00:08:05,760 --> 00:08:09,510 Now step number three if there is an error we want to render the error. 113 00:08:09,630 --> 00:08:11,230 That's gonna happen right here. 114 00:08:11,250 --> 00:08:16,350 So instead of dumping it to the console it will render it in one of the paragraphs that's gonna be message 115 00:08:16,800 --> 00:08:23,790 one dot text content and we are trying to render data dot error. 116 00:08:23,810 --> 00:08:24,980 Excellent. 117 00:08:24,980 --> 00:08:26,690 Now we have it step number four. 118 00:08:26,690 --> 00:08:30,640 If there was no error and get the location and the forecast rendered. 119 00:08:30,740 --> 00:08:32,300 We're gonna do that right inside of. 120 00:08:32,300 --> 00:08:34,260 Else for Message 1. 121 00:08:34,430 --> 00:08:42,620 We'll set the text content equal to data dot location we'll show that first then four message number 122 00:08:42,620 --> 00:08:51,060 two we'll go ahead and set the text content equal to data dot forecast. 123 00:08:51,080 --> 00:08:55,400 So right here the goal is to make sure we always render the correct thing to the paragraph. 124 00:08:55,400 --> 00:08:58,880 We start off with loading if things go poorly we render the error. 125 00:08:58,970 --> 00:09:05,450 If things go well we render the useful information and then we can remove the console dot log calls 126 00:09:05,720 --> 00:09:07,910 and we can go ahead and test our work. 127 00:09:07,910 --> 00:09:09,380 That is step number five. 128 00:09:09,950 --> 00:09:15,500 I'm going to start by removing the challenge comments and that commented out text content example from 129 00:09:15,500 --> 00:09:16,640 up above. 130 00:09:16,640 --> 00:09:22,340 I'll make sure to save all of my files and now we're going to test things inside of the browser to start 131 00:09:22,400 --> 00:09:23,780 I will refresh the page. 132 00:09:23,780 --> 00:09:30,080 Since we were running old code and I'll start with an invalid search like an exclamation mark if I search 133 00:09:30,080 --> 00:09:31,320 for that what do I get. 134 00:09:31,340 --> 00:09:36,460 I could see that I got my loading message for a maybe a tenth of a second and then I got my error unable 135 00:09:36,470 --> 00:09:40,460 to find location try another search which is fantastic. 136 00:09:40,520 --> 00:09:43,180 From here we can try a valid location. 137 00:09:43,250 --> 00:09:48,980 I'll use something like Philadelphia once again when I hit enter we're going to see that loading message 138 00:09:48,980 --> 00:09:55,130 show up and then right here I can see my location which is accurate and I can see the forecast for the 139 00:09:55,130 --> 00:09:56,900 current conditions. 140 00:09:56,900 --> 00:10:02,690 Now if I was to search again we'll see that second message does get cleared because of the code we added 141 00:10:02,750 --> 00:10:03,920 right here. 142 00:10:03,920 --> 00:10:06,410 So once again we'll just see loading. 143 00:10:06,410 --> 00:10:09,920 I'll search for something else like Boston hit enter. 144 00:10:09,920 --> 00:10:15,380 I can see just loading shows up then when the data comes back the data is revealed. 145 00:10:15,410 --> 00:10:21,260 The only thing we're gonna do to wrap up this video is to add a few styles to the application for that 146 00:10:21,290 --> 00:10:22,670 input and the button. 147 00:10:22,670 --> 00:10:27,500 Right now they're just using the default styles and we can write just a few lines of code to make things 148 00:10:27,500 --> 00:10:33,830 look a lot nicer to do that all we're gonna do is add a few lines of code at the bottom of styles dot 149 00:10:33,890 --> 00:10:34,930 CSX. 150 00:10:35,030 --> 00:10:40,550 We're going to target two things we're going to target the input on our pages and we're also going to 151 00:10:40,550 --> 00:10:42,940 target the buttons on our pages. 152 00:10:42,950 --> 00:10:46,190 Now right now we only use one input and one button. 153 00:10:46,190 --> 00:10:52,190 But the reason I'm styling in a general way by element to name is so that if I do have other forms on 154 00:10:52,190 --> 00:10:58,430 the site they all use the same set of styles and they all feel consistent right here for the input I'm 155 00:10:58,430 --> 00:11:05,670 gonna set the border and I'm gonna add a little space for that border and then we're gonna set up three 156 00:11:05,670 --> 00:11:12,300 values the width of the border I'll use one pixel the type of border I don't want Dash I want solid 157 00:11:12,510 --> 00:11:20,850 and the color we're going to use a another hex code that is pound sign si si si si si si which is a 158 00:11:20,850 --> 00:11:22,200 light gray. 159 00:11:22,260 --> 00:11:27,210 Now from there after the semicolon on the next line I'm just gonna set some padding. 160 00:11:27,300 --> 00:11:30,390 This is gonna put some space between the text and the border. 161 00:11:30,390 --> 00:11:33,240 Right now it's all crammed inside of that box. 162 00:11:33,300 --> 00:11:37,440 I'll use a value like eight pixels for that before we move on to the button. 163 00:11:37,470 --> 00:11:40,000 Let's go ahead and test these styles out. 164 00:11:40,080 --> 00:11:43,240 If I refresh things it already looks a lot nicer. 165 00:11:43,300 --> 00:11:45,630 Now onto the button for the button. 166 00:11:45,660 --> 00:11:52,440 We're going to set up five different styles and we're gonna start with the cursor property cursor allows 167 00:11:52,440 --> 00:11:56,320 us to customize the appearance of the cursor when we're hovering over it. 168 00:11:56,460 --> 00:11:58,860 And we want cursor pointer. 169 00:11:58,860 --> 00:12:04,830 So right now before I save this file if I hover over the button the cursor doesn't change but when we 170 00:12:04,830 --> 00:12:09,960 go ahead and save it and view it in a moment we'll see the cursor will be that thing that signifies 171 00:12:09,990 --> 00:12:11,370 it's clickable. 172 00:12:11,370 --> 00:12:15,780 Next up we are going to set the border and the background to the same color. 173 00:12:15,840 --> 00:12:20,910 So border one pixel solid 8 8 8 8 8 8. 174 00:12:21,030 --> 00:12:23,730 After the hash sign that a semicolon. 175 00:12:23,730 --> 00:12:28,250 After that we're also going to set up the background property to the same color. 176 00:12:28,260 --> 00:12:31,460 So right here 8 8 8 8 8 8. 177 00:12:31,500 --> 00:12:32,590 Perfect. 178 00:12:32,760 --> 00:12:33,520 The last one. 179 00:12:33,540 --> 00:12:39,810 Excuse me the second to last one is going to be color and we're gonna set color equal to white. 180 00:12:39,960 --> 00:12:46,290 And then after that we'll set up some padding here as well and we'll use these same value eight pixels. 181 00:12:46,290 --> 00:12:50,830 Now let's go ahead and save things refresh the browser and see what we get. 182 00:12:50,850 --> 00:12:53,960 And right here we have a nice search button when I hover over it. 183 00:12:53,970 --> 00:12:59,400 I can see I do get that pointer letting me know that it is something I can click and if I was to run 184 00:12:59,400 --> 00:13:03,410 a search I can see that everything is still working as expected. 185 00:13:03,480 --> 00:13:06,390 Good searches still work errors still work. 186 00:13:06,390 --> 00:13:07,560 And there we go. 187 00:13:07,590 --> 00:13:13,080 We now have the final version of the weather application to actually build this out. 188 00:13:13,080 --> 00:13:15,200 We covered a lot of new information. 189 00:13:15,270 --> 00:13:19,620 We explored express learning how we can serve up Jason and HDL. 190 00:13:19,620 --> 00:13:25,440 We then learned how we can use Express to serve up the contents of entire directories or work with templating 191 00:13:25,470 --> 00:13:26,510 engines. 192 00:13:26,520 --> 00:13:32,950 From there we integrated our asynchronous code into express allowing us to fetch the forecast for and 193 00:13:32,970 --> 00:13:36,450 address right here inside of the browser. 194 00:13:36,450 --> 00:13:38,990 Now we have a nice little weather application. 195 00:13:39,000 --> 00:13:44,670 The problem is that it only works on our local machine at local host three thousand which means that 196 00:13:44,670 --> 00:13:47,140 no one else is ever going to be able to view it. 197 00:13:47,280 --> 00:13:51,030 Before we continue on to the next application we're going to build. 198 00:13:51,030 --> 00:13:57,210 I want to spend the next section learning how we can deploy our node applications live to production. 199 00:13:57,270 --> 00:14:01,040 So anyone with an Internet connection can access our app. 200 00:14:01,080 --> 00:14:06,030 I'm excited to get to that let's jump into the section intro for the next one it's coming up now.