Build a Weather App With JavaScript

hello everybody kyle here from webdev simplified I know I know you have seen a million weather app tutorials before they're all over the Internet but in this weather app tutorial I'm going to be doing one thing in particular differently that none of the other tutorials I see do and this could down the road potentially save you a ton of money so make sure you don't miss that let's get started now let's quick take a look at the application we're going to be building first thing you do down here enter some location that you're interested in you'll see we get a list populated at the bottom and as soon as we find a location that we want it'll show us the status give us an icon as well as our wind speed temperature and precipitation and this also is based on the location here so this is in Fahrenheit and miles per hour because we're in the US but if for example we decided to go with England and we click here you'll see that the temperature is now in Celsius and the wind speed is in kilometres per hour because it's based on the location that you typed in now to get started with this weather we need to have some API to access in order to get both the weather information as well as this location information down here for the different places on earth so to get the weather information we're going to use the dark sky API all you need to do is create a simple account on here it's easy and free to do and here's all the API documentation we need and the important thing you need from here is an API key as well as the documentation on where to call to get your API key you just click on the console here it'll show you your API key I'm going to be resetting this after this video so don't actually use this API key make sure to create your own because this will no longer work afterwards and the one crucial mistake that most people make is they take this API key and put it directly into their JavaScript on the client side and the problem with that is if we go back to the documentation and scroll down a little ways this API if you sign up for a paid account will actually charge you for the number of requests that you make after a certain amount of free requests so if you put your API P in the JavaScript itself then you're going to be opening yourself up to someone stealing that API key and using it for their own means while charging you for it and this is a mistake so many people make so in our video we're gonna make sure that we put our API key inside of the server so that no one has access to it except for us the other thing we're going to need is we're going to need to use the Google's API which is what's populating this list down here which is going to be the Google Play API it's quite a bit more difficult to set up but I'm gonna walk you through all the steps needed when we get to that point the first thing we need to do though is set up our server using nodejs so let's open up our visual studio code here and the very first thing that we need to do is type in npm in it and this will allow us to set up our project with a package.json we can just hit enter a bunch of times here to get all the default options and O's receipt will have an empty package.json here next we want to install all the different dependencies that we're going to need for this project luckily since our project is mostly front-end facing we don't have very many dependencies our main dependencies here that we're going to have so we'll say npm i we have Axios which is going to allow us to call the api's that we need it works very similar to fetch does if you're familiar with that and also we're going to need Express because that'll just make setting up our server much easier than if we use the default node HTTP module and also we want a few development dependencies so we'll say NPM I - - save dev these will essentially only be for when we're developing and we want env to load in our API key as well as node Mon to automatically refresh our server for us now that those are done let's set up a simple script here - in order to run our server so we'll just call this dev start and we're just going to set this to node Mon and we'll call it server is this is just going to be the file we create that has all of our server code so let's create that file now server jeaious luckily as I said this is a really basic expression application the first thing we want to do is we want to actually load in our environment variables so we're going to check our environment to make sure we're not in production and to do that we can just say that our node environment variable is not equal to production and if that's the case we want to require that dot env library that we loaded in for development and all we want to do is called dot config this is going to load in everything we put inside of our DNV file so let's create that env file right now and in here we're going to put our API key so let me find the API key remember it's on the console section we can just copy this API key and this is the dark sky API key so we'll just call it such and set it in there and now we have access that API key from inside of our server by just calling this will say Const dark sky API key and we're just going to set this equal to our process env which this is going to populate that variable for us and again we just want dark sky API key just like that let's expand our browser a little bit and there we go now the next thing we want to do is actually set up our server so we're just going to say content Express is equal to required Express and we want to set up our app which is just going to be the Express function being called and lastly we need to set up what we want our app to use this is going to be really basic we want to use JSON because we're going to be sending JSON to our server so we'll say Express JSON and we also want to set up our static folder so we're gonna say app dot use Express static and this static is just going to be inside of the public folder this is just standard practice to use the public folder here and our API is only going to have a single endpoint so I'll say app post and we want this to be our weather endpoint this is going to get our weather for us from the dark sky API and again like I mentioned this is where a lot of people mess up they actually put this inside of their front-end which means their API key is exposed to anyone that has access to the JavaScript which is anyone that knows how to use the developer tools inside of the browser it's very unsafe and we definitely don't want to do that is that if here we're going to implement this later for now we're just going to leave a blank and we're going to actually tell our server what to do so we're gonna say app dot listen tell what the port in our case we'll just use 3,000 and then this is going to return a function here and this is going to run when the server starts up so we'll just say console dot log that the server has started that way we just know when things are working and if we save that and we do npm run devs start which is that command we created in our package JSON we should see everything start up just fine and that's perfect and now if we go to our localhost 3000 you'll see that we cannot get slash which is perfect because we haven't actually set up an endpoint for our server here at slash but we know that our server is actually running right now before we jump any further I want to set up a dot git ignore file and this is for when we're using version control to store stuff we don't accidentally check in our environment variables or our node modules so we want to ignore environment variable folder and our node modules folder here make sure I put that as an underscore and that'll be that we never accidentally check this into our version control because we don't want to expose us anywhere as I said since people can use this to charge us now let's create our public folder here this public folder is going to contain all of the different code for our front-end so the first thing we're going to have is an index dot HTML this will just be our main page we're gonna have a Styles dot CSS for styling our weather app as well those script J's which is just going to run all the different JavaScript we need in order to call the API I want to get started by rendering out our index.html page an easy way to get started with this is type the exclamation point in and enter in visual studio code and it will create the boilerplate code for us next we're just going to title this weather app and we also want to include in here our style tag so we'll say link href is going to equal that styles.css and we need to tell the browser that this is a style sheet so that it knows how to actually parse this data and lastly we want to have a script tag here which the source is just going to be equal to script J is close that off and make sure that we defer this so that it's going to load after our page is done rendering now inside of the body here we can actually do the code for our weather app so let's take a look at what we have as you can see we have the container here which contains this header section with an icon as well as the information for our status location and all the different details of our weather and then finally this input down here with our different options for the places so the very first thing we want to do is we want to wrap everything inside of the container so we're just going to give a class here of container close that off and everything inside of here the first thing we're going to have is our header so again we'll just use a div for this give it a class set that equal to header and the only thing that we need inside of our header is our icon icon is going to be inside of a container again we'll just call this icon container that's because we have this nice white circle around it and our icon we're actually going to be using canvas for because we're going to be using a library which will import our icons and the library takes canvas icons so we're going to create a canvas give it an ID of icon so we can reference it later we're also just going to give it a width here of 100 and a height which is going to equal 100 close that off and that's all of our header section done next we want to work on the content section of our page so after let's create another div and this div we're just going to give here a class which is going to save content can't type today apparently and inside of this content section we have our general information as well as our details so let's create a div for the general information we'll just call it general information make it nice and straightforward so that we know what everything is doing and inside of here we're just going to have two divs first div is going to have the class of status and close that off and the second div that we're going to want down here is going to be our location now the first thing that we notice if we refresh this page we want our default text so we want enter a location to be here we want to find the weather to be our default text for our location and this is just what's going to load as soon as we refresh our page we want the same thing down here for all of our different details of our weather so now we can go down into our details section which is going to be after our general information make sure this is a div with a class of details section oops I really can't type today there we go now inside of this detail section we're going to have a bunch of different details and we're just going to give them a generic class of detail so we can share all of our different styles between these different sections and each one of these details is going to have a div with a class of title just like this and our title for the first one is going to be wind and then we're also going to have a div which is the value so we'll just give it a class here of value and this is just going to say to be determined as a default value now let's copy this down two more times because we're going to have three details in total and we want this one to be temperature and this next one it's going to be precipitation and there we go the last thing that we need to do is actually put in our location input so to do that would scroll all the way down to the bottom here we want to put this inside of all of our containers still so let's just put it right here we're going to give it a div that is going to be wrapped around we're just going to call that our city search container because it's just the container that we're going to put our search bar inside of and then we need an input which is going to be our text input so we'll make sure it has a type of text here and we want to give it a class of a city search we go that way we can actually use this and we're just going to give it a placeholder as well which is going to say enter location because as you can see here it has that placeholder text and we'll close that off and that's all of the actual code that we need and you will notice one thing we have a link down here at the bottom that says powered by dark sky and this is required to use the dark sky API it actually is mentioned in the documentation so we need to make sure to put that link so let's go down at the very bottom of our page outside of absolutely everything even this last container div we're just going to put an anchor tag the HRF here is going to go to https colon backslash bash past dark sky oops can't spell dotnet slash powered by and this is just required by the documentation as I mentioned let's also give it a quick class or so we can style this as our dark sky logo and close that off and we want to say powered by dark sky perfect now we have all the requirements that we need in order to actually render this properly and now if we go over to our page here and we refresh this you'll see that all of our information is being shown up if i zoom in quite a bit we can see all of our different sections are showing up obviously nothing is styled yet but that's okay now that we have all that out of the way all we need to do is set up our Google Maps API let's go over to the Google Maps page here you can get this by just going to console Cloud Google comm and it will bring you to this page here and all you need to do is create your own application we're just going to create a new project we're just going to call it whatever we want I'm just gonna call it weather app tutorial so that I can easily know this is and we click create there you go this is going to set up our project it's going to take a little bit of time but that is no worry now that we have our project created we can select this project you should see that it says weather app tutorial up here or whatever you named your project and from here we actually want to start setting up our project to use the correct api's so all we need to do to do that is go to this API and services section which is in the menu and we click library from here we can search all the different API as we want to use and there's two in particular we need to use the places API which you can see right here click on it and we want to make sure that we enable this as soon as that's done being enabled we need to go back to the library section and enable one more by so we'll just go back a few times and it said here we need to use the je s maps so let's see if we can find a budget typing in JavaScript are maybe maps whoops maps and there we go Maps JavaScript API we also need this enabled so that we can use the Google Maps JavaScript API as soon as we enable both of those we need to set up an API key which we can use inside of our JavaScript and now this API key is a little bit different than the other API keys that we've been worrying about because we can actually share this API key in our public JavaScript because it's not anything that we can get charged for so in order to set up that API key we just go into this text box here type in credentials you see credentials pops up and here we need to create some credentials we want to create an API key so we can use in our application and we want to actually restrict this API key so click restrict key and as soon as that loads we just want to scroll down here we want to strict by API and we want only the places API and the Maps JavaScript API the two that we just enabled now we can click Save and this API key will only be able to be used for those two particular API s that we want to use now with our API key setup last thing we need to do is look at the documentation to set this up to do that we're just going to go to the places API click on that scroll down till we find the documentation and we want to make sure that we look at the JavaScript documentation and inside of here is all the documentation we need to set up this places section and the most important thing here is that we want to be able to load our library properly so let's just make sure that we click here to choose our API key this is going to load up real quick and we already have our weather app tutorial selected as well as the credential that we just created so we'll insert that and then we're going to copy this this is a script tag we need to include inside of our JavaScript so let's open this index.html up scroll all the way to the top make sure it's above our normal script tag we're going to paste that in and we need to make sure we add defer to this so that it loads after the entirety of our JavaScript and HTML is loaded and not before now if we say that we are all loading in the JavaScript API that we need in order to use that drop-down list now with all of that boring stuff out of the way we can finally jump into the fun part of this tutorial which is creating the actual JavaScript that is going to call this weather API for us and return the information to get started we first want to get our HTML input element we're just going to call it our search element and we can just do document query selector and right now we don't have anything good to select by so let's go into our index dot HTML scroll down here and we're just going to put a data attribute on here we're just going to call this data city search and that way we can use this data attribute instead of our query selector instead of brackets just like this and this is going to get us our search element next thing we want to do is create our search box this is going to come from that API for Google that we just set up and to do this we can just say new Google Maps dot place places sorry dot search box and this is going to be capital search box and instead of here we just passed that search element that we just queried so this essentially says at the search element right here we want to set up a search box and then we can set up a listener on that search box so we can say search box dot add listener and it does not add event listener this is add listener this is specific to the Google API and the listener we want is places changed this means any time that the check or the box inside of our HTML has a place selected inside of it this is code inside this function is going to be called and it doesn't actually pass the place that was changed I wish it did but it doesn't we actually have to get that place from the search box so we can say the place is going to be equal to search box that get places and this actually returns an array of places and in our case we only want the first place so we're just going to get the first place that's being returned and of course we want to check first to make sure that this place is not equal to null so if it is equal to no all we want to do is just return because we can't do anything if we don't have a place now after we check to make sure our place exists we want to get the latitude and longitude so and the reason we're doing this is because if we look at the documentation for dark sky scroll down just a little ways here you'll see that we need to have both the latitude and longitude inside of our call for what the API is it doesn't actually take a city or anything so in order to get the latitude we can just say place dot geometry dot location and this is going to have both the longitude and latitude so we can say dot lat it's actually a function and we can do the same thing for this one is LNG for longitude make sure we type that out and you can get all the information on all the different methods and properties that this API returns to us by just looking through the Google's API documentation right here for the places section but since I already know what it is this is all we really need to worry about for the getting the latitude and longitude now we can do the fun stuff which is actually calling our API which we created which is slash weather and sending it the latitude and longitude that we need so in order to use fetch we need to tell what method we want to use in our case this is going to be a post method because in our server we set this up as an app dot post next we want to send it the different information we're going to need for our headers this is just so that our application knows that we're sending in JavaScript to do that we want to use content type we want to set this to application slash JSON this just says that we're going to be sending JSON to the server and for the except which is just capital except we want to set this as well to application JSON slash JSON make sure I spell that correctly and this just says that we're going to be getting JSON back from it and now we can actually send the body of our application and this body needs to be a JSON object but we need to stringify it so we need to say json stringify and in here we'll pass the object we want to send to our server in our case we want to send the latitude and we want to send the longitude and just like that that's all the information we need to send if I spell weather correctly and this is going to post to our server then obviously we're going to have a dot then we're just going to take in the data that we get returned which is going to be a response we need to convert that response to JSON so I'll say res dazon and then again we're going to have a dot then which is going to give the data in an actual object format for us and inside of here we're just gonna call function that we're going to create which is going to called set weather data and inside of here we're going to pass the data as well as the location so we'll say place dot formatted address and this formatted address is just going to send it zoom this out it's going to send us this string down here so that we can place it up here which is going to be really nice for us now back to our actual application zoom that in so it's easy to see and we're going to go to our server and we're actually just going to in here console dot log request dot body we just want to make sure that we're getting the information sent to our server so if we check our logs down here as soon as we enter a location let's just refresh our page first make sure all of our JavaScript changes are in here and type in we'll see that we get all of our stuff being pre-populated which means our API integration worked flawlessly and if we click this you'll see it sends to our server and logs out latitude and longitude and that's perfect now instead of our server we can use this dark sky API key in order to call the dark sky API and this is all going to happen on the server so no one has access to it which again is the one thing so many people miss out on when doing these types of tutorials so now let's open up the dark sky API and see what the URL looks like let's just copy this over this gives us our forecast which is exactly what we want we're gonna paste this in here instead of a string interpolation so the first thing we need to do is pass in our key so let's just replace this variable here with our dark sky API key just like that next thing we're going to do is our latitude so again we're just going to replace that here with request dot body dot latitude and we want to do the exact same thing this is going to be far longitude so we replaced that but instead of latitude we want longitude and now this is the URL that we're going to use for our server so we're going to set this into a variable call it URL is equal to that and the very last thing we want to do is we want to add a query parameter which is called units and we're going to set that equal to auto this just means that our units are going to convert based on the location that we query so if we query somewhere in the US for example it's going to be imperial units and if we query somewhere in England or in Europe it's going to use metric units and now we can actually use Axios which works just very similarly to fetch so we want to first require Axios up here Const Axios is going to be equal to require and we're just going to type in Axios here there we go and now we can use Axios in order to do this we just call it like it's a function and we're going to pass it an object the fur parameter of this object is the URL that we want to query which in our case is just this URL variable that we created next thing we need to do is since we're using Axios we can just say response type and set it to JSON and this does all the fancy stuff with headers that we had to do over here with fetch for setting the content type in the accept and this just says okay we're gonna be getting JSON so don't even worry about it also it takes care of this step here where we had to do that dot then for res days on it does all that automatically for us so now here inside of our dot men we just have the data of our request back from us and if we look through this API you can see it gets sent back a ton of different data and all we actually want is our current data so in order to get that all we need to do is say whoops data dot data because it's going to be coming inside of an object and data here is just the actual data from the response so now once we have data is for our object starts here and we want to get just the basic current information so we're just going to say dot currently and this is going to be the section inside of our code which is the most up-to-date current information for our budget latitude and longitude we sent to dark sky and we want to send this as JSON back down to our server so we'll say res dot JSON and this is going to send a JSON version of this currently variable back down to our JavaScript here inside of our event we can comment out this function here we can just do a simple console dot log of our data and if we save that go back to our web application refresh this here and we again type in a location click on this and if we inspect our page you'll see that if we go over to our console you'll see we get an object being returned and this object has all of the different information that we need inside of it as you can see we have our icon that we'll be using we have a precipitation our summary etc etc that we're going to be using to populate all this information instead of that function set way the weather data so now let's actually create that set weather data function scroll down here we can say function set weather data it's going to take our data as well as a place and instead of here we want to get all of our different elements and right now we don't have an easy way to do that so again we need to add some selectors to these it's so light right here we're just going to say that this is our data precipitation oops preed CIPA tation I can't spell very well right here we have our temperature so we'll say data dot temperature and this is just so that we can select these elements in our JavaScript again we're going to do the same thing for wind so up aways we have our location data location and we have our status so data status this should be everything that we need to select inside of our JavaScript back and our JavaScript let's create variables for these so the first thing we want to do is get our location element we're going to set that equal to document query selector for that data location selector that we just created let's copy that down a bunch of times next we're going to have status so the status element if I can smell the brewery it is not a good day for me for spelling it's going to be data status next after that we're going to have temperature and this is going to be data temperature and this is just really fun repetitive stuff of course precipitation and precipitation body loud a la no no no fun and finally very last one here is going to be wind and remove that extra one that we don't actually need and now we can have the fun part of actually setting our data so the first thing we'll do is we'll say our location element dot text content this is just going to be the text here we're just going to replace enter location and this is just going to be the place that we sent down here next we want to do our status so let's say status element dot text content that is going to be equal to data dot summary and as you remember oops I cannot spell it all when we looked at our console logs over here if I open that up you see that we had a summary object inside of here and this is just the summary statement next we're going to do temperature text content and this is just data temperature and if you want to get all this information it's of course available on the dark sky API as well as in the console log that we printed out next we have precipitation dot text content and this one's going to be a little bit more confusing because we want to convert this to a percentage because it actually returns to us as decimal so just say data dot precip probability and we will just multiply that by 100 so we get it as a percentage and put a percent sign afterwards there we go and lastly we're going to do wind element dot text content and we're going to set that to the wind speed which again is inside of here now let's close that out save this refresh our page and we're going to enter in a new location click on this and you'll notice that nothing actually happened so let's inspect our page to see if we got an error you see that we did get no error but as you will notice of course we didn't uncomment out our function so stupid mistake uncomment that back out and refresh our page type in our location again save this and you'll see we get everything being populated up here well it looks like wind and precipitation are not being populated for some reason so let's look at why that is I'm sure we have a console log error if we click over to our console you'll see that we had person probability is not defined so Oh that's of course I have a slash here instead of a dot while that's really dumb okay refresh one last time this should do it again we'll type in Boston will actually do Norway and there we go everything's perfect got temperature wind precipitation everything is pulling through and our entire API is set up - of course the icon which we need to use and we're going to be using something called sky cons which is set up through dark sky so they integrate really nicely we can just go over here to the CDN js4 sky con and we just want to copy this minified version here it's just going to be slightly smaller going to our index and of course we just want to put this somewhere before our normal script tag so we're gonna create a script tag for it make sure it's defer and we want to set the source here equal to that source and this is just going to pull in that sky cons library and we can check out the sky khon documentation so let's just search for that we'll go in here for Sky cons and as you can see is really straightforward documentation for how to set these up I'm going to create a variable which is called icon which we're going to set equal to a new sky khon and instead of here we can define the color in our case we're going to be using the color here which is just 2 - 2 which is just a really dark grey color for us make sure this is actually sky Khans instead of Scott Caan and now we have an icon that we can actually set and use so let's do that down here we just say icon dot said this is where the ID that we said on our canvas element went as you can see here our canvas has an element of icon as an ID so we use that exact ID inside of this set here and anybody should want to tell it we want it to be data icon because this dark sky API returns the string of the icon that we need to set and lastly since these are animated icons we can just call icon dot play to make it start playing now if we refresh our page again we'll search for Boston click on this you'll see that we get a nice animated icon up here it looks really blurry that's because I'm zoomed in to 200% on my browser so you won't actually have this problem also we want to set a default icon for when our page just loads because as you can see there is no icon so we'll just do that right here will say icon dot set again we'll get that icon here and we're going to set this equal to clear day this is just the default sunny image and we're going to play this now if we refresh our page yes if we get the nice little animated Sun icon showing up on our page and right there that's all the JavaScript code we need so now we can work on style in our page to make it look just like this over here which is going to be really fun to do open up our Styles dot CSS and the first thing we want to do is the actual body style because we have this nice yellow to orange colored background in order to do that we'll just select our body element here we want to set the background and we're going to want to set this to a linear gradient and we want this just to go to the right so we're going to put the yellow color on the left and the orange color on the right and I'm just going to paste these colors in we're just going to be using this orange color and this red color and you can use really whatever color you want it doesn't matter so now if we save that go back here refresh you'll see that we get that nice or in just red color showing up the next thing that we want to do is work on making sure all of our content is centered in order to do that we're just going to use display flex which is a really easy way to make us Center things so we can set the justified content to Center as well as the line items to Center but we need to make sure that our page has at least a minimum height of 100 so we're going to set the minimum height here to 100 view height so that way everything will be centered and lastly we just want to set the margin to zero and the padding to zero so that we don't have any weird borders around the edges of our page save that refresh our page and you'll see now everything is already centered and looking pretty great now to make styling everything really easy we're just going to do a nice little trick that I do on every single page that I work on select all the different elements on our page before and after and we want to set the box sizing to be equal to border box and also I'm going to set the font family so it looks a little bit nicer I'm going to be using a font called a Gotham rounded you may not have this font on your default machine but that's okay you can choose any font that you want I'm gonna set this default font to stand serve as a fallback and refresh and you'll see already our font is starting to look quite a bit better get that back to 100% and now we can move on to style and our container here so let's select that it's just dock container which we put into our CSS already and this dock container is going to be fairly straightforward we want to set a maximum width here of 90 percent because as you can see we don't want it to ever touch the edges of our screen or go past it so maximum width of 90 percent and we want to have an overall width of 1200 pixels if our screen gets too big because as you can see here if I expand the size of my screen at a certain point 1200 pixels it'll stop getting bigger because we don't want it to become massively huge on big screens so we have that maximum width here of 1200 pixels next we want to set the background color so this background color is just simply going to be white very straightforward and also a box shadow now box shadow is a fairly difficult property to work with essentially the first few values that you have is your offset for the y direction in the X direction so first you have X direction then we have Y directions and then we have how much we want the shadow to kind of spread around and Blair and the color of the shadow so now if we save that go back over here refresh you'll see that we get a shadow at the very bottom because we offset by 0 in the X direction but by 5 on the y direction so put a black border 5 down on our shadow and it also spread out 10 pixels so as you can see it's a little bit around the corners but mostly on the very bottom and again box shadow is a fairly difficult thing to work with so I'd really recommend looking at the documentation for it if you want to get into the nitty-gritty of using box shadow next after we're done with our container all we need to do here lastly we should want to add a little border radius give it that nice rounded corner we'll say 5 pixels for example we can now move on to styling the content of our page and the content is essentially everything that's not inside of the header so to do that we're just going to add a bunch of padding it will just say 40 pixels that we have nice spacing between the edges of our content and the inside of the content and also we want to set the margin top to be also a large number of 50 pixels because we don't want this text to come anywhere near our icon now that we have the content styled let's work on the header then the header is going to be a bit more involved first thing we want to do is actually set the background color for a head this background color we want to be the exact same as our iconic color so again if you remember that's just going to be to to to set that in there like that and we also want to set a height of 120 pixels and the reason we're hard coding this height is though we can easily position our icon inside of it we're going to set the display to flex and we want to justify the content inside of it in the center because we want this icon to be centered also we want to align our items to be Flex end because we want the icon to show up at the bottom and not the top of the container and finally we need to add a border radius to this as well so we'll say border radius and we only want this to be in the top left corner of our screen of the 5 pixels and we want to do the same thing but for top right and if we go back refreshers you'll see we had the nice rounded corners and if we get rid of these two borders you'll see that our corners over here when we refresh our square so we need to make sure that we have the border radius here as well as on our actual container itself so that everything works perfectly now let's go back here to make sure we have everything we need and we can start working on an icon now the icon is going to be a bit difficult as well to style because we're going to need to position this using position:relative so let's set that position to relative now all we want to do is put the top here 250 pixels and we want to set the padding to be 20 pixels and the reason we're doing the padding is so we can get some space around our icon where the white will show through so in order to make sure it's white that shows through we want to set a background color and this background color will be white also we're gonna set a actual hard-coded width of 140 pixels and a hard-coded height here of exactly the same thing 140 pixels and lastly in order to make this a circle we'll set the border radius to be 50% just like that save that go over here and refresh and you see our icon does seem to be a little bit too high though so let's increase this top here to 70 pixels and refresh it and now it's actually dead centered inside of our line which is what we want now onto the meat and potatoes we have our actual information for our weather the first thing we want to style is the general information so we're going to select that class which is just general information this is going to be again just using display flex I really like display flex for setting up columns and items we're going to set the Flex direction to call them so that they're stacked vertically on top of each other like this and we want to just align the items in the center that is the real power or of using flexbox that really makes it easy to line things up in the center also if we're going to give a little padding around this so that nothing is too close to each other now we can style the actual status we're gonna give it a font size whoops make sure that I actually put this inside of here font size we're going to use three REM and we're also going to do a font weight of bold now let's go back to our weather app refresh that and that's looking perfect we can do essentially the exact same thing but this is going to be for our location instead and our location is going to have a font size of two are a.m. a font weight of normal and we also want a little bit of a margin on the top so we'll say a margin top of 10 pixels save that refresh and there we go our status section is exactly as we want it and all we have left is these detail sections and our button at the bottom so let's select our details section again type out that class name and we'll put everything inside of here and as you guessed it we're gonna be using display flex with justified content space between this time so that way we can get our elements spaced out as far apart from each other as possible and we're going to put the margin on the top to be 40 pixels again just spacing everything out for us next we can move on to the actual detail make sure I spell this properly I am terrible at spelling today so on to the detail and instead of here again you guessed it display flex this one's going to have a flex direction of column because as you can see here everything is vertically on top of each other and we want to align our items in the center we also want to set a flex basis of zero this just means that everything is going to grow from zero so that nothing is going to be different sized or too large or too small everything is going to take up an even amount of space and lastly we need to put flex grow we want to set this to a-1 so there are elemental will grow if they can and a padding of 20 pixels again spacing around everything now if we save that go look over here already you can items are spaced out from each other but of course they're too small to read so let's increase that size quite a bit we can go into our detail here we can select the title and all we want to do for this is we set the font size to be to our a.m. we're going to make it flex grow as well so it takes up as much space as possible and we want this to be bold because this is our title so we'll set it to bold and the color is just going to be kind of a lightish grade color 777 that way it blends a little bit in the background save that and the REO our titles are set up perfectly and all we have left is the value just go down here detail dot value and we want to put the font size of two REM and a margin on the top again to space everything out of 20 pixels now if we refresh that there we go this is looking great but of course you'll notice we don't actually have these borders between our elements so in order to do that we'll go into our index.html we want our middle one to be bordered so what are you going to give it a class here I've ordered and instead of our styles we can select that by saying detail dot ordered so the center one in this case we want to set a border on the left we're going to be one pixel solid and we want to use that exact same 777 color we're going to do the exact same thing on the right as well now if we save that and refresh we got our borders right down the middle and all we have left is our actual styling of our city selection box right here first we want to select the container it's inside of so we'll just say City search container and yep you guessed it display flex again and this time we're just using it so that we can send to our content and if we save that refresh you'll see that it puts it right in the center of our page for us next thing we want to do is actually style the select itself so we'll say City search and instead of here we're gonna put a large margin on the top again just to space things out we're going to put the font size two to REM again make it more readable for you guys remove the outline so outline:none border on this thing is going to be one pixel of that same exact solid seven seven seven color and we're going to give it a nice little bit of rounding of five pixels some padding inside of our input element so that is spaced out from the edge not right up on the edges and we want the width to be equal to 100% so that we have plenty of space to type in now if we refresh that you'll see that our input looks great but you'll notice as we start typing our text down here is still incredibly small so we need to use the Google API to style that and they have all the classes set up where you need to use them on their API but I'm just going to list them out for you guys because I already know exactly what they are the first thing we need to do is the PA see heightened instead of here we just want to change the font size to be to our a.m. and we want to set some padding around it this PA C item is essentially each row inside of this drop down here so we're just giving them a bit of padding and a larger font size also this icon if we type in here you see this icon that shows up on the lift on my to zoom in so it's easier to see we don't actually want that icon so we're just going to remove that by selecting the PA see a con and we're going to set the display here to none lastly all we want to do is again select PA C item query and this if we type in down here it's just going to be this blackish section right here because if we save and refresh you'll notice as we're typing this black section is smaller than all the rest of the sections so we just need to bump up the font size on this so we'll increase the font size to 2 R am just so it's the same as everything else and we're going to set some padding on the right just like this and we just want that to be 14 pixels we just want to space everything out now if we refresh and start typing in here you'll see that down here our options for selection are equally as large as the rest of the text in our application and for you you may not have to increase this text size but in order to make this easier to see in the video for you I've increased the text size now the last thing we have is this powered by Dark Sky button right here on our actual application we just have it off into the corner in the bottom of our screen so it doesn't take up much space so let's do the design same thing over here the easiest way to position something so that it's out of the way in the corner of the screen is going to be using position absolute and now if you're unfamiliar of position absolute I have an entire video I just released on that so make sure you check that out in the cards in the description linked all so what we're going to do here is set the bottom to 20 pixels and we're going to set the right to 20 pixels this is just going to put it in the bottom right we're going to set the color to this nice grayish color so that it really doesn't clash too much with our application and I'm just going to increase the font size again so that it's easier for you guys to see now if we save that and refresh you see that it's being put down here right into the bottom corner now let's make sure our application still works we'll just search for Boston and we'll see everything populates and it looks really nice I'll even make this bigger so it's easier to see and now let's search for something like we'll just say something in Sweden and again you can see everything populates and looks really nice now if you enjoyed that weather app related tutorial make sure to check out my other project-based tutorials which will be linked over here also subscribe to the channel so you can get more project-based tutorials just like this and let me know down in the comments what projects you want me to create after this because I really love making these project-based videos thank you all very much for watching and have a good day

Channel: Web Dev Simplified

Views: 63,180

Keywords: webdevsimplified, weather app, weather app tutorial, weather app js, node js weather app, weather app node js, weather app javascript, axios, axios tutorial, darksky, darksky tutorial, google api, google api tutorial, google api js, javascript weather api, javascript api tutorial, javascript api, javascript weather api tutorial, weather api, weather api tutorial, weather javascript, weather tutorial, weather javascript tutorial, build weather app, build weather app javascript

Id: OE7kml0pigw

Length: 43min 14sec (2594 seconds)

Published: Sat May 04 2019