How To Build A Weather App In JavaScript Without Needing A Server

in this video I'm going to show you how to create this fully fledged weather app using JavaScript HTML and CSS this is using all entirely free apis which is great and it's going to teach you great skills around data parsing API access CSS dialing and so on and also it's just a great project for your resume [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and today we're going to be building the weather app that you can see on the side which has a bunch of hourly information in the top it has daily information and current information and this is going to be pulling from your exact location which is really cool now to actually use this weather API we're going to be using the open media weather API and this is a completely free API all you do is just call a URL and it gives you back information no API Keys needed which is great but before we get started with actually implementing the API we first need to set up our project and actually start using some HTML so to do that we're going to be using Veet so if you just type in npm and we can say init or npm sorry create we want to say Veet at latest that's going to download and start a Veep project for us we can call it whatever we want or we can just put period and that's going to create this in our current project we want to use vanilla JavaScript and we're going to be using JavaScript not typescript now if I type in npmi that'll install all the packages being used for this project so just give that a second and then we can run npm run Dev and that's going to start up our project for you as you can see right here our project is running now by default this is going to give us a bunch of files we don't necessarily need so everything in our style sheet I'm going to just remove everything in our main JavaScript I'm going to remove there we go so if I'm going to import my styles.css in here just so we have those Styles those should be imported and sorry it's called style.css so if we just change the you know body to have a background of red that should work yep that works perfect so now what we can do inside the counter we don't even need this file let's remove that in our public folder we can get rid of SVG since we're not using it same with this SVG and our HTML we can get rid of this link for that SVG we're not using we can get rid of the title since we're not using it and we can get rid of this right here so all we're left with is just essentially a mostly empty HTML file that's importing our JavaScript that we have right here which is importing our CSS we could also import the CSS in here if you want it's entirely up to you now the only other thing we need for this project is going to be all of our icons I'm going to copy those into this folder it's just a bunch of svgs that I'm using font awesome for these are all completely free svgs you can use yourself and I'm going to have them Linked In the GitHub repository so you can install them and download them yourself or you can just go to font awesome and get them now to get started let's write our HTML so it looks exactly like what we have over here because we want to have a shell of the page that shows up first because when I refresh you'll notice for a split second we have a blurred out version of the page that renders first and then the actual content loads behind so if you have a slow internet connection it at least gives you something to look at so so what we want to do here is we're going to come in and we're going to select our header and that's going to be this top section right here also if you're curious where I got the idea and the design for this project this is actually straight from my JavaScript simplified course this course right here pretty much covers everything you would ever need to know about JavaScript to land a full-time job as a JavaScript developer I mean in this course I cover more than I even knew when I first started learning JavaScript and as you can see the video lists are quite large this is just one of the modules inside the course we also have like a beginner course and so on so this is an absolutely massive course on JavaScript and if you're interested in learning more about JavaScript and tackling large projects like this I highly recommend you check it out it'll be linked down in the description below so to get started with our header the first thing we want to do is give it a class so we can select it so I'm going to give it a class of header and you may be wondering why I give it a class of header instead of just selecting the actual header element this just makes it easier for me to write CSS that's flexible and if I want to add a header somewhere else on my page I'm not going to be breaking my code by doing that now inside the header we have two sections we have this left side and this right side so let's create for that we're going to have a header on the left and we're going to have a header on the right our left side header is going to be relatively simple because we're just going to have an image this image is going to be for our icon so let's just come in here we can say the class is going to be a weather icon to style our icon and we're going to make this a large icon because as you can see this is larger than all the other icons on our page those are going to be our classes for the source we're just going to give this a default source of icons sun.svg so it shows the sun icon and then finally I'm going to add a data attribute onto this called current icon and this is so in the JavaScript I can really easily select this image and actually change what the image source is going to be based on my weather itself so if I give this a say if you can see we have a giant Sun icon showing up just because we don't have any CSS Styles yet the next thing I want to do is next to that put essentially the text 31 degrees or whatever the current temperature is so we're going to have a div and I'm going to give it some classes we're going to give it the class of header current temp just like that and then also inside of this I'm going to have a span that's going to tell me the temperature so in our case let's just put 31 that's what's on our screen right now and I'm going to say data current temp so we can select that inside of our JavaScript now the reason I put this inside of a span is because I want to have the degree symbol outside that span so let's put the degree symbol in if we look over here you can see it says the text 31 degrees if I just zoom in a little bit you can see that's easier to read now the reason again I put this in a span is so I can select the span change the number inside of it without actually removing or changing my degree symbol now let's Zoom back to what we had before you can see we have this vertical line that's going to be CSS and then we have the six sections over here on the right so inside of our header right we want to have those six sections and we're just going to use CSS grid for laying those out so I'm just going to put all the sections side by side so we can have essentially multiple different info groups and inside our info groups we're going to have a label which this one's just going to say hi for example and then we're going to have a value which is going to be inside a div and that's because again I want this degree symbol to be separate so I'm going to have a span which is going to say data current High just like that and then we can put whatever the temperature we want in there for example 32 degrees and we can put the degree symbol just like that so now if we come over here you can see we have a high of 32 degrees now we just need to do that with all of the other sections so essentially we're just going to copy this down and all we do is we change the label in our case this next one is FL high and we're just going to go essentially right to or left to right so for this one let's do 27 degrees and we can just copy that down so I'll just jump to when I have all of these done there we go I just finished writing out all six of those sections and you can see we have all six of them right here but there's a few other changes we need to make first of all we need to change our data attributes for all of these so this one currently is going to be the FL Dash High we're going to have one for our wind this next one is going to be for our low and we're going to have our FL low and then finally our precipitation now the only other thing we need to take into account is you notice this miles per hour and this inch text is quite a bit smaller than this .01 and this 9. we're going to put those inside of their own span which is going to have a class which we can use to denote that this is going to be that smaller size so inside of a span we're just going to give that class here a value whoops make sure I put that inside of there value sub info and that's just essentially again saying that this is a smaller section of information so we should make it look smaller so again same exact thing for our miles per hour just like that so when I save and we come over here nothing actually changes about the Styles we still have the text being larger but in CSS we can make it smaller so now before we move on to styling all the rest of this with HTML I want to get the styles for this top section done so in our style sheet let's do a few Styles here the first one I want to do is dial my before and my after elements and just everything to make it be a box sizing of Border box just like that then in my body I'm going to set the margin to zero we're going to set the background color to hsl 200 100 and 85 that's a light blue color now we're going to set our actual text color to be very similar 200 100 and 10 so it's going to be a very dark blue version almost black finally for our font family I want this to be Sans serif and if we look back over here you can see our colors have changed and our font has changed slightly now the next thing to work on that we need to do is our header and for our header we just want to have this be a display of flex so the left and right side are showing up next to each other I'm going to align all the items in the center just like like that so now as you can see everything's Center aligned and we have everything right to left just like that next what I want to do is I want to do the header section on the left so we can say header left this is going to have a display of flex again to line up items right next to each other I also want to make this quite a bit wider so we're going to say width 50 we're going to align the items in the center we're going to justify the content in the center as well and just doing that you can see everything has been centered exactly as we want it to be we're going to set some margin on this to give it some space from its container 0.5 REM we're going to do the same thing with some padding 0.5 REM again give it some space and then finally a border on the right which is 2 pixels solid and we're going to use that really dark color again 200 100 and 10 so now you can see it's giving us that border on the right hand side now to finish up that left hand side let's work on our weather icon because this is way too big so we're going to have our default icon which is going to be a width of 40 pixels a height of 40 pixels and we're going to give it an object fit of contain which is just going to make sure that the actual aspect ratio of the image is stored properly now for ours we want this to be larger so we're going to do weather icon large charge and we're going to set the width and height to 80 pixels instead just like that so now we have a larger icon which is what we want now the next thing we want to do is style our text right here because as you can see over here it is a much larger text this is going to be super straightforward we already gave that a class of current temp in the header this is going to double our font size to 2 REM and we're going to set some margin on the left to space it out from the icon of one REM and there we go now that section is a pretty much done next we're going to have our right section so this is going to be header right as I already mentioned we're going to be using grid for this section so we can change the display here to grid we want the width again to be 50 same as the other side and then we can come in here and we can say we want to justify our content space around just to make sure that everything is spaced out properly give some gap between our different elements 0.5 REM and if you save you can see everything is centered currently now we need to determine how many columns we have well in our case we know that we have three columns and we want them to be Auto sized so we can just say repeat three Auto and for our rows again super simple we know that we have two rows so we can just say we want two Auto sized rows now you can see we have our columns and our rows showing up exactly as we want but our sections don't look that great so for our info group let's change the display here to flex we want to change the flex direction to column and then we want to line everything up in the center so we'll do a line item Center this little bit of code is just lining up everything Centered for us the next thing I want to do is style out the labels that we're using so first of all I want to do a text transform this is a really cool property which allows me to make my text uppercase by default I want to change the font weight here to bold and I want to make the font size much smaller because it's pretty large so we'll do 0.6 REM as you can see it already looks a lot better and finally for this I want to change the color to be slightly lighter so it's just a slightly different color so in our case we're going to use 20 instead of 10 percent that's just going to make it a slightly different color finally we're going to get the sub info of our value I want to just change the font weight here to be lighter so it's going to be essentially a less bold font and I want to make the font size smaller we'll do 0.75 REM and that's just making this miles per hour in this inch section A little bit smaller and now if you compare these two values they are pretty much identical to each other which is exactly what we want now the only other thing I want to do is you'll notice like I mentioned when I refresh the page we get that blurred out background to do this I'm going to add a simple blur class to our body so we can say class is blurred make sure I put that inside the body there we go and now inside of our CSS we can just select our body let's just do this at the top here we can say dot blurred what I want to do is I want to add a filter which is just going to be a blur of 3 pixels and an overflow of hidden just so we can't scroll our content now as you can see we get that blurred out body and that's just from this blur right there now obviously we don't want that while we're doing all this so for now I'm just going to remove that we can add that back in later once we're done with all the styling of everything so let's minimize out our header here and move on to our next section which you can see is like this day section right here so I'm going to create a section and we're just going to give it the class of day section and I'm going to give it a data attribute of day section again so I can select this in my JavaScript now if you're curious why I use data attributes in JavaScript and classes for CSS I have a Blog article on that I'll link down in the description for you it kind of goes into the inside of why I think this is better now for this we're going to have a bunch of cards I'm going to call them Day cards inside these cards we have an image some text and some more text so we're going to have an image and inside this image we're going to give it a source let's just say icons cloud.svg it really doesn't matter get rid of the alt tag here for now and we're going to give it a class which is just weather icon there we go so if we come over here you can see we have a small little Cloud icon that looks really good next we're going to have a div and this is going to be our Day card date just like that so for example Monday will be our very first date in our case I'm recording this on a Thursday which is why Thursday is the first date here lastly we're going to have a final div and this div is just going to have our temperature whatever it's going to be so in our case we'll just do like 32 degrees now one thing I do want to mention is you'll notice I didn't separate this degree into its own span and I didn't add any data attributes for anything inside this card and the reason for that is because I want to actually create a template which is going to be our Day card so we can create an HTML element called a template and this template is essentially going to copy a lot of the content inside of here but a lot of these sections like this are going to be completely blank and that way when we actually use JavaScript to populate this information we can just create our Day cards from this template instead of using the ones that are pretty built into the page because we don't know exactly how many rows we're going to have or exactly how many days we're going to show it really depends on what the weather app data returns to us it may return to us seven days it may return six it really depends on if the API changes in the future so this gives us more flexibility but these hard-coded values give us something to show on the page while it's loading the data in the background for the user so obviously I'm going to copy this down just a couple more times we're going to do like two three four five six seven and there we go that's going to be 7 4. I'm just going to change the data in them real quick and there we go I just finished adding all those different days and that's all the HTML for our day section essentially done we can move on to style unit which shouldn't be that hard because it's really just a simple card like this so the first thing we want to style is that day section so let's come in here we're going to use a display of grid for this one as well but this time instead of hard-coded columns we're going to be doing a repeat which is an auto fit in our case we're going to do 75 pixels there we go so that's how wide our cards are going to be if we just save you can see they're now showing up and based on the size of our screen we're showing more or less of those which is exactly what we want next I want to add some space between them let's do 0.5 REM I'm going to justify by content in the center and then finally let's add some padding to make it so that we have some space between the edges of our card because as you can see here our card has some space on the edge next I want to style the actual card itself that's going to be pretty straightforward so we're going to say Day card we're going to use a display of Flex for this and our Flex direction is going to be column just to stack everything we're going to align our items in the center again this is just for Center and things finally I'm going to give it a border one pixel solid whoops solid and this is going to be that dark color again so we're going to use that 10 percent and then finally I'm going to give it a rounded Corner 0.25 REM and then some padding .25 REM there we go so now you can see we have the beginnings of our card which is great our date is obviously a bit too big though so Day card date let's shrink that down we can say font size is going to be 0.75 REM we're gonna put some color inside of here which is again going to be that slightly lighter color that we used for all of our labels and then our margin on the top is going to be 0.5 REM there we go give that a quick save and it looks like that didn't quite work if we check our HTML it looks like I used descart day so let's change this today and there we go that actually worked now that's all that there is for our day section so we can move on to our hour section so let's just minimize this down we can move over here to see what the hour section looks like it looks like it's just a really simple table so we can come in here we can create a table which is going to have a class of that power section then what we can do inside that table is we can have a t body oops T body and this T body is going to have a data attribute called our section so we can select the actual body of our table inside of our JavaScript now we're going to need to have some rows and each one of these is going to have the row or the class of our row just like that and then we're going to need to have some different elements inside of here it looks like we have one two three four five six different of these so we can just copy that down six different different times now inside the very first one we're going to want to have an info group and that's because we've already defined a style that looks the exact same as this stuff down here so we might as well use that so we have our info group just like that and inside this info group we know that we can have a label in our case let's make this say Thursday there we go and then we can have a label that's going to have the time so we'll just do a div here that says 3 pm there we go next thing that we need to do inside of our table is we need to add our image so we can have an image that has the class of weather icon just like that inside of our source we'll do icons slash clouds dot SVG I think it's actually just Cloud there we go and we'll remove that alt tag so if we just look at this you can see that that's coming along pretty well next row that we have is going to be essentially the same as this we're just going to copy this down because all the rest of our rows look almost exactly the same we just need to change the label which in our case is our temperature and we need to change here our value which is 31 and then we have the degree symbol so let's just say Ampersand degree there we go I'm going to copy that down again because we're going to have our feels like temp just like that and this one is 25 and I'm going to copy that down again for our wind and then for our precipitation so for our wind here we're going to have a value which is 6 miles per hour and we just need to make sure that we have a span that has the class of value sub info to get that smaller styling for our miles per hour just like that and then I'll finally copy this down one last time for our precipitation just like that and we'll just say in our case Zero inches and now if we look you can see we have a full row of our table now what we can do is we can just minimize that row and we can just copy it down a bunch of times it doesn't really matter there we go that looks like a bunch of times enough that we just have content on our page and we don't even need to really worry about updating these dates I mean we can if we want but it doesn't matter too much okay I decided just to go through and update them all anyway again it doesn't matter too much what the actual page looks like because we already know we're going to have it blurred out so if we say class is blurred you can see it's already really hard to read what anything says anyway so it really doesn't matter too much now for our styling this is going to be pretty straightforward first we need to tell our hour section to take up the full screen size because right now it's not so we can say that the width is 100 and we also can say we want our text to be lined up in the center and this is going to be our border spacing we want this to be zero just because we don't want the spacing of our borders to do anything as you can see with this property there or not there it changes our spacing a little bit and this is just a table property essentially next we're going to have our rows and for each one of our rows all we want to do is set the background color so we can say background color is hsl we want to use that same Hue and saturation and lightness we've been using 200 100 and in our case we're going to use 75 percent and I'm going to copy this down because I want to have every other row have a slightly different color so we'll say nth child 2N that'll give us every other row and I'm going to change this to 70 so it's slightly darker so now you can see our rows have this slightly different color which matches what we have over here these ones are a bit more bright though so we're going to bump down our saturation to about 60 percent as you can see that kind of desaturates it and makes it a little bit less eye-catching which is good now the last thing I want to do is just add a little bit of padding so we can say our hour row we want to select each TD inside of there so each element itself change the padding to be 0.25 REM and 0.5 REM again give them a little bit of space make it a little bit easier to read the data now this covers Us for almost all of our HTML the only thing that we have left in our HTML is to actually create the templates we're going to be using like I mentioned at the beginning so we're going to need a template that's going to be for our Day card so we're going to have a template for that then we're also going to need a template for our row so for the day card I'm just going to come in here I'm going to copy what we have for an existing Day card I'm going to put that inside of the template and all I want to do is just remove everything we don't need so I can remove for example The Source from this image but I'm going to add a data attribute of data icon onto that same thing here for our Day card we don't need the text inside of here but I'm going to put data date on here then inside of this div we're going to have to split this out so it has a span so we're going to set a span here and I'm gonna give this div itself another span to wrap the number there we go and we can just give this a simple data attribute of our temperature and we can remove the text in there because we don't actually need it so now we have a way to set the temperature the date and the icon for our date card now the next thing that we can move on to is our hour row template and again I'm just going to bump inside of here take one of our rows copy it completely I'm going to paste it down inside of here now all we need to do is go to all the places where we have data for example right here we have a date so we're going to say data day to get that date let's just remove the text we don't need it same thing here this data is going to change so let's give it a data attribute data time and remove the Min hook text also here's our icon so let's say data icon and we can remove that Source next up here we have some more information right here we're going to be using our temp and we're going to use that same span trick so I'm just going to copy that span over where we have our temp I'm just going to paste that down data temp that works just fine because that's what this is let's remove that old value you can do the same exact thing here for our feels like temp I'm just going to change the data attribute to the feels like temp so we know which one we're still acting for our wind we're going to have something very similar I'm going to have a span that has our number 26 inside of it we can just remove the number because we don't need it and this will just say data wind then we're going to do essentially the exact same thing for our precipitation so I'll just copy this down and this will say data precip now that we're finally done with all of our HTML you can see everything looks exactly the same as on the other version of our application which is great now we can finally move on to the JavaScript and actually using this weather API right here so what I'm going to do is I'm going to create a new file I'm going to call it weather.js and this is where we're essentially going to export a function called get weather this get weather function is going to take a latitude and it's going to take a longitude and it's also going to end up taking a time zone and that's just because of how this API works we want all the dates to be in our current time zone so with that out of the way what I want to do is I want to expand this page so we can really see what we're working with and as you can see down here we essentially have a URL Builder which allows us to build out a URL that we can just copy paste into our application so we're going to take in a latitude longitude we'll just leave this defaulted for now and then we want to figure out what we want of course for hourly weather if we look at our page we need to have the temperature the feels like temperature the wind and the precipitation as well as whatever this icon is going to be so to do that here's our temperature that's perfect our apparent temperature that's like our feels like here's our precipitation which is what we want the weather code is how we're going to get the actual icon and then finally we're going to get the wind speed at 10 meters above ground level that seems perfect next we're going to move on we need to get our daily weather information so if we look at our application and we scroll up to daily all we need is the temperature and the weather icon so that'll be pretty simple weather icon and we don't have an actual like current temperature so I'm just going to use is the maximum temperature for the day in this scenario you will notice though we're actually going to need a little bit more data than that though because we have the high the feels like high the wind precipitation and the low data for the current day so we need to get all of that information as well as well as the current temperature so we need the minimum we need the apparent temperatures as well as we need the precipitation here and finally we're going to want to get that wind speed but this wind speed here is not quite what we want so we're actually going to uncheck that and instead we can check this current weather with temperature wind speed and weather coated so this will give us the current temp current wind speed and the current weather code which is great because that will give us the icon that we want this temperature as well as the wind over here that's all the data we want then we say what units we want I'm going to be using Fahrenheit and I'm going to be using miles per hour because I live in the US same thing here we're going to be using inches if for our time format we're going to use time stamps because it's a little bit easier for us to work with and then here we need to set our time zone so for my example I'm in the central time zone so this American Chicago time zone we're going to set this dynamically to JavaScript but for now that's what we're going to use as our time zone click preview chart and that's going to load up all of our information in this chart but most importantly it's going to have this URL API click open in a new tab and you can see we get a bunch of JavaScript being returned to us we can actually copy that URL and use that inside of our application so for now I'm just going to come up here I'm going to put a comment that has that URL so this is the full URL to get all of our information and all we need to do is dynamically add in our latitude our longitude as well as our time zone which we're passing into our function right here so in order to make this a little bit easier I'm going to be using a library called axios so we can just say npmi axios this is just a fetching Library which makes fetching a little bit easier so now that we have that installed I can actually import that Library by saying that I want to import axios from axios there we go and then inside of our get weather what I can do is I can say axios.get and we can pass it in a URL so for now we're just going to pass it in the start portion of our URL everything before our query parameters right here and then what I want to do is I want to Define all of our query parameters inside of our JavaScript so we can just say params and then we can pass in all of our query parameters so in our case we have a Latitude parameter which is just the same parameter we have up here we're going to set to the latitude we pass in same thing for our longitude that's just going to be passed in as our lawn parameter right here and then we have our time zone which we're going to pass in just exactly as is now what I could do is I could just remove the latitude and the longitude here from our URL and I can remove our time zone since we're dynamically setting those and I could just copy all of what's left over and put at the end of our forecast right here and that'll work just fine this is going to do our query for us exactly as we want but we could change this and we could move the print from here into our params list down here it's entirely up to your preference whatever you want to do either way is going to work just fine so for now to test this out let's just return this right here this return from our axios.get there we go return that value to us and then inside of our main let's make sure we import that git weather from weather and we can just call get weather and let's just pass it in 10 and 10 as our latitude and longitude and to get our time zone is actually really easy all we need to do is just say intl dot date time format and then what we want to do is we want to get the resolved options and we want to get the time zone from that this right here is just going to give us whatever the current time zone that we are in is so now what I want to do is I just want to get the value of this so we can say dot then because this will return to us a promise which is going to have a result and we can just console log res dot data and that's going to be the data returned to us from the API so now inside here if I just inspect our page I pull this over we should inside of our console have an object that contains all of the different data that we need as you can see latitude longitude we have our time zone and then we have all of our data that's our current weather right here we have data for daily as you can see all the different things that we're selecting same thing for the units we're using as well as our hourly and our hourly units right here so what I want to do is I want to take this fairly ugly data that's returned to us and I want to process that data into something that we can use inside of our application so if we go to this weather section here instead of just returning the return of this I want to do a simple dot then here I want to use that data value that we've gotten and I want to return to us something brand new I want to return an object that has the current weather that we need I want to return our daily weather and I want to return our hourly weather just like this because that's what we need we need our current daily and hourly weather so for our current we're just going to create a function called parse current weather and pass in our data I'm going to do the exact same thing for daily and hourly so instead of current we'll just say daily and instead of current down here we will say hourly and let's just make sure I spell that right so now what I've essentially done is created three functions that allow us to parse out that data so we can say that's going to take in our data like this and we're just going to parse out the sections we need we know that this has a current underscore weather property and a daily property based on the console log output that we just looked at what we can do I just make sure I clean this up a little bit for some reason I thought I was using an arrow function there which is obviously not correct there we go so now here I want to return an object and this object is just going to contain everything we need so we need to get the current temperature so we're going to say current temp we're going to need to get the high temperature so we're going to say high temp we need to have a low temp we need to have a high fuels like there we go we need to have a low for the feels like we need to have our wind speed our precipitation and then finally we're going to have like our icon code just like that so these are the different things that we need to get from the API so to get that we can pull it from our data so I'm going to destructure out our data from our current weather just like this and the things I want to get are going to be a temperature variable which we're just going to call current temp just like that I'm going to get our wind speed which is spelled out as one word like this I'm going to convert it just so it's being capitalized as we would expect in JavaScript and our weather code is going to be our icon code so those are the three different things that we're getting from our current temp I'm just going to put these on new lines so it's a little bit easier to read there we go and then what we can do is we can pass those in so for our current temp we already have that for our wind speed we have that and for our icon code we have that so we don't even need to worry about passing those at all the next thing we need to do is try to get this other information and this is a little bit more tricky if we look again at the actual object that's being returned to us and if we just come up here get rid of this dot then for now so I'll just put this down here comment it out there we go and then I'll comment out this code right here just because it's giving us errors if we look over here inspect this real quick in our current we have all that information that we pulled out but how do we get the actual current current for other things well if we look in the hourly we have a bunch of arrays and the very first value in the array is the most recent value for that so the most recent precipitation is going to be the first value in the array same thing for temperature and so on so we can just get the first value from the array for all these different properties and that'll give us whatever the most recent or current temperature or so on is so again I can use destructuring for this from our daily values what I want to do is I want to get the temperature that is the 2 meter Max this is going to be an array and what I want to do is I want to destructure that array to get only the first value and rename it to Max temp what this is doing is essentially the same thing as saying this daily dot temperature 2 meter Max of zero these two lines of code right here do the exact same thing so I'm just getting the very first value from that array and I need to do that for a bunch of different properties for example I need to get them in as well so let's change this to Min and change this to Min then I need to do the same thing for our apparent temperatures so apparent temperature Max right here is going to be our Max feels like gonna get the exact same thing for our Min of that so our Min and our Min and then finally here we're going to get our precipitation which is called precipitation sum we're just going to call that pre-sip that right there is all the data we need so if we comment this back in we can just say that we have our high temp which is just called Max temp we're going to have our low temp which is called Min temp or Max feels like our Min feels like and then our precipitation just like that so now we've essentially taken all of the data that was difficult to parse and turn it into something that's really easy and we can just plug straight into our UI essentially the only last step we have is to deal with things like rounding because for example our current temperature could be a decimal point we just want a round number so I'm actually going to change this to math.round of our current temperature same thing with our high temperature I went around this same thing with that temperature and that temperature and that temperature I essentially want to round every single number to a whole number just so our UI is a little bit cleaner for our wind speed I want to do the exact same thing so I'm going to round out our wind speed for our precipitation I want to do this rounding as well but I want to round it to a little bit more Precision so I can say that my precipitation here I'm going to multiply it by 100 and then divide by 100 and that's rounding to the nearest 100th essentially so now if we come up here and we comment back in this section and we're just going to get rid of the two functions that don't exist so we're just going to be returning that current data to us if we inspect our page we look at the console you'll notice we're getting undefined returned I believe that's because inside here yeah we're logging out res dot data let's just change this to data because we can we're getting data essentially back we don't get a response anymore and inside of here I'm also going to remove this comment because we don't need it so now if I inspect our page oops inspect our page we should see in the console we now have an object which has current and it just has all the data we want perfectly parsed which is great next up I want to do the exact same thing for our daily temperature so we can just scroll down here let's comment this in and we can say function whoops function parse daily weather it's going to take in some data in our case all we care about is the daily data and what I want to do this is essentially an object so I want to Loop through this object I want to get the time value and this time value is just an array so we're going to map over that array so we're going to get time as well as the index that we are looping through so to show you exactly what I'm talking about we can just change this to say return data Dot yeah return data that's fine if we inspect our page it should hopefully just be printing out our data it is if we look at Daily you can see we have one two three four five six seven different arrays so what I'm doing is I'm just looping through this first array and I'm going to be getting the index value as well as the value and that index will allow me to essentially access each index and all these other arrays so when I'm on this value of time I can get that value and all of the other arrays as well and that'll give me the current value for that day so like it'll give me the current temperature or time or whatever so to do that let's go back into here where we have our parse daily We're looping through everything we get our time and our index and I just want to return to us an object that contains the data we need all we need is the date we need the actual temperature and the icon super simple so we're going to get a time stamp for the current time and that's just going to be our time value we need to multiply that by 1000 because this API returns to us the timestamp in seconds and JavaScript expects it in milliseconds so we're just converting two milliseconds next we need the icon code which is just Our Daily Dot weather code and we want to get the value at the current index so for on day one this will give us day one day two day two and so on then we got our Max Temp and we want to round this oops let me make sure this is camel case so let's do a math.round of Our Daily Dot temp to meter Max at the current index so now if I come up here don't return that data give us a quick save we now should hopefully have information being returned for our current and our daily and our daily is just an array that has a timestamp icon code and Max temp for all of the different times and days that are being used so all seven days lastly we need to parse our hourly weather which is going to be very similar to our daily weather so we can say parse hourly weather inside of here we need our hourly and we're also going to need our current weather because we need to know what hour to start at because when I started this it was 3 P.M my time that's why my first time here is 3 P.M but if I was checking at 6 PM I want my first time to be 6 p.m so this current weather is just going to make sure we cut off the hourly at whatever the current time is so to see what hourly is returning let's change this back to return data give this a quick inspect over here now if we look inside of our hourly you can see it's exactly the same format as daily just much larger list and if we check our current weather you can see the current time right here that's like the current hour that we are in so it's really useful to have that information so back down into the parse hourly weather what we can do is essentially the same thing that we did in our daily so we can get our hourly that time we can map over that and get our time and our index values and then just return all the data we need so inside of here we want our timestamp which is just our time times a thousand perfect we need our icon code and this icon code is hourly dot weather code at the current index we're going to do the same thing for our temperature and we're going to make sure this is rounded so hourly dot temperature 2 meter and this is just going to be 2 meter no maximum because we're just getting the actual temperature at that hour there we go I'm going to copy this down a couple times because we're also going to have our feels like which is very similar this is just going to say apparent temperature with no maximum then we're going to have our wind speed like this and the wind speed is wind speed whoops underscore 10 meters and then finally the last thing we need is our precipitation so this is going to be at precipitation and this one I want to multiply by 100 and divide by a hundred just to give me that extra Precision on my rounding now that'll give us all of the hours but we haven't filtered by what our current time is using this current weather so to do that we can do a simple filter at the end here and I know that this object has a time stamp property inside of it because of what we're returning right here so I know we have a time stamp here and what I could do is I can just check to see when my time stamp is greater than or equal to my current weather dot time and I just need to multiply that by a thousand since I multiplied my original Time by 1000 so they both are the same units in this current weather time always returns to us the current hour that we're inside of so as long as this is greater than or equal to that means it is either the hour I'm currently in or at some hour in the future and that's all I need to do for parsing my hourly weather and if I remove this return here inspect our page we should hopefully see in the console we have an object which has our hourly weather and you can see for each hour we have all the information we need for that hour to render it out so now what we can do we can close out of this real quick let's scroll up and let's go into our main page here and instead of doing our DOT then like this where we're actually you know writing out the function by hand let's just call a function called render and this is going to render our weather information to the screen so render weather just like that then we also want to put a dot catch on here just in case something goes wrong so inside of this dot catch what we can do is we can just say that we want to console dot error out the error and we can just alert to the user air getting weather sure that's fine it doesn't really matter this is for testing purposes so for rendering our weather data we know we have a current a daily and an hourly just like that so now what we can do is we can actually render that data and what I want to do is just use individual functions so render current weather we're going to pass in our current we're going to render our daily weather and we're going to pass in our daily and then we're going to render our hourly weather pass in our hourly also the very last thing I want to do is I want to get my body and I want to remove that blurred class so remove blurred just like that so now if I just comment this out for now give this a quick save I add that blurred class all the way at the top here so we just say class blurred now what's going to happen is you can see briefly we have the Blurred class and then the Blurred class goes away as soon as our data is done loading which is exactly what we want all we have left to do is actually render it so let's start with our current weather so we'll say function render current weather and this is going to be taking in all that current data we'll just say current just like that and then what we want to do is we essentially want to set a bunch of values on something so if we go to our HTML for example inside of our header we have this data current temp so what we can do is we can say document dot query selector data current temp and then what we want to do is we actually want to set the value for that so we can say dot text content is equal to whatever the value is let's say it's current dot current temp there we go so now hopefully our current temp up here is being set as you can see it says 67 which is the current temperature being returned by this API quite warm now this is going to be a bit of a pain because we're going to have to do this a bunch of times so instead what I'm going to do is I'm going to create a helper function this function I'm just going to call set value and it's going to take in a selector and it's going to take in a value and then optionally I'm going to pass it apparent but by default I want that to be the document object so what I can do is I can take our parent which by default is the document I can do that query selector whoops query selector I know that I used data attributes for everything so I can just come in here I can paste down that data and I can just put our selector in the middle so I know for a fact I always started everything with data Dash so I can just pass in everything after that and then I can say my text content is equal to that value so now I can come down here set value for current temp and I can pass it my current dot current temp that's simple little fix right there has made my code so much easier because now as you can see this current temp is still being set my code is much easier to read and I can do that for essentially all of my different values so we're going to have our current temp we're going to have our current High we're going to have our low we're gonna have our feels like High or feels like low or wind and our precipitation and for all these we can just say we have our high temp low temp I feels like low feels like wind speed and our precipitation so there we go all of the values over here are now properly being set all we need to do is make it so our icon is the correct icon so we need to get our current icon dot Source but we need to select our current icon so let's just say const current icon is equal to document.queryselector of that data current icon there we go and I want the source to be equal to our icon URL but again we're going to have to set this a bunch of times as you can see by all the icons on our page so let's create a function for that git icon URL and we're going to pass it in the code that we want which is our icon code so let's create a function get icon URL which takes in a code we need to return a path which is icons slash and then we need to convert that code to essentially an SVG file so somehow we need to take our code oops and convert it to an SVG well if we go over to the API we're using these are all the different codes that we can get returned to us as you can see there are a ton of different codes essentially zero to 100 with some of them missing and they all correspond to different things but we can group a lot of them together into different sections and the best way to do this is going to be with a map so what I'm going to do is I'm going to create a brand new file called icon map.js this is essentially going to be a legit JavaScript map so we're going to export const icon map which is just going to be a new map and then down here I want to add some different mappings so I can say like icon map dot set 0 is going to be for our sun because that's a clear sky so we're going to have our sun icon for example I also want to set one equal to our sun icon because it's also meaning mainly clear and a lot of different icons are going to have multiple of the same symbol so I'm going to create a really simple helper function that'll make this easier called add mapping which is going to take an array of values and the actual icon we want so I can call this function pass it zero and one and the value sun and it'll essentially output this code right here for me so I'm just going to Loop through all my values whoops for each value what I want to do is I want to call icon map dot set where I take the value and set it to my icon that's all this does so now those two lines are code are the same so I just condensed it down to here next I want to add a mapping or two which is partly cloudy so I have an icon called cloud sun which is a cloud and a sun partly cloudy icon 3 means that it's fully cloudy overcast so we're going to use the cloud icon then for 45 and 48 that essentially means that we have some level of fog so I'm going to use my smog icon which is my fog icon and then I'm going to copy over this next mapping because it's very long so this next mapping is for anything that deals with rain so as you can see there are tons of codes for dealing with rain of various different levels and degrees and that's just going to be our showers heavy icon I'm going to copy over these last two as well because they are pretty lengthy so again we have stuff for snow which is going to be our snow icon and then finally our Cloud bolt so I just essentially went through red every single icon to see what they went with and just tried to map them to the icons that I have to the best of my ability so now we essentially can just say iconmap.get pass it a code and it's going to return to us essentially the name of my SVG so what I can do in the main file here is I can use that icon map dot get and pass it in our icon code I just need to make sure I import this at the top of my file so get that from dot slash icon map just like that so now hopefully we've done that right we should have got our icon properly obviously we have an error though I believe it's because yes this is not a default export this is a named export and that fixed our problem and now you can see it showing the sun icon which is because it's currently sunny in whatever location is at 10 10. now let's move on to the next section where we're rendering out our daily weather so we can just create a function for that render daily weather it's going to take in our daily weather and inside of here we're going to do a lot of the same stuff we did up here first I want to select the things we need for example we need our daily section so that's document dot query selector of data day section just like that and we also need to have our day card template that's the template we've created which essentially tells us what each card looks like and this one we gave an ID of day card template just like that so we have our section and we have our template for our section I want to First just remove everything from it so inner HTML is blank so if we just save this you can see the day section has been removed that's great because now we can add in our cards one by one so for each one of our days let's Loop through that and get our day and what I want to do is I want to create a brand new element which is a clone of our template so we can say element equals daycardtemplate dot clone node or sorry content Dot dot whoops dot clone node let me pass in true and that'll just make sure it clones all of its children as well so this is how you clone a template essentially and then what we can do is we can use that set value function where I can say hey I want to set the data temp if we look at our HTML and if we just go down to that section you can see we have that data temp right here that we're trying to set so the data temp I want to set to my day.max temperature value and the important thing is the parent is a current element that I'm working on so I want to search within this element that I just created to actually set that value I want to do the exact same thing with my data date in this case I want to get the time so this is the time stamp but I want to convert this to obviously a readable value I'm going to create a simple formatter which we're just going to call day formatter and it's going to be intl dot date time format and I want to create a new one of those so we'll say it's going to be a new one of those pass in undefined as my Locale so to use my default Locale I want to pass in some values for my weekday so I can see weekday and I want to pass this in as long so what this is going to do is just going to run a formatter that's going to return just the day portion of my weekday so I can say day formatter dot format and pass it in that time stamp and it will now format my actual date as a day instead of a date that has a bunch of other information so once we have all that done we can then take our element and we can get the actual icon as well so we're going to query selector for that data icon oops make sure I do that ordering correctly there we go and the source we're going to set to get icon URL of our day dot icon code and then finally we're just going to take our daily section and append that new element we just created on the end so now you can see each day has been added with that element and this date formatter right here is what's giving us that date if we for example change this to say short instead of long you can now see it says a shortened version of our day and the great thing is if you change your language to like Spanish for example it'll show the Spanish date which is great now the last thing we have left is going to be this hourly section before we move on to actually getting our local location so let's create a function foreign render whoops render hourly weather it's going to take in our hourly weather and this is honestly going to be very similar to what we have up here so I'm going to copy this code right here for our formatters and stuff because we're going to have essentially in our formatter we're going to have an hour release section which is data hour section there we go and we're going to have an hour row template just like that however that's called our row template now for our formatter all we need to do instead of weekday is we're going to say hour and instead of long I want to say numeric there we go now inside of this rendering it's going to be very similar to what we have here I'm just going to copy it down exactly so we're going to have our hourly section and we're going to remove all the HTML inside of it and then we're going to Loop through each of our hours for each hour we're going to clone our template to get a new element and then we're just going to essentially set a bunch of different values so for our temperature we're going to get our hour dot Max temp for our feels like temp we're going to get our hour dot feels like so let me just copy this down feels like temp is our DOT feels like there we go copy this down a bunch more times we're gonna have our wind our precipitation we're going to have our day and then finally we're going to have the actual time so for wind this is just wind speed there we go for our precipitation it's just called precip and then we need to do our formatter so I'm going to copy over the day formatter because that's what we're going to use here and we're going to pass it our hour dot timestamp so this will format our essential current timestamp as a day so you can see it says Thursday right here and we want to get the time and we're just going to use our hour formatter and pass it in the exact same time and it'll just format it as an hour for us instead the final thing we need to do is get the icon code and we're going to set the data icon for that and then we're going to add on our hourly section and append that element if I give that a quick save you can now see we have a bunch of stuff showing up even though it looks like our temperature section is incorrect the reason for that is this should say temp instead of Max temp now you can see this is looking really good let's just expand this and you can see everything for our dates and our times are showing up correctly it's only showing up as the times that are after my current time because I'm currently recording after 4 pm so that's why 4 pm is the first one that shows up and you can see all this other information is showing up and it looks really really good now the last step that we have is to actually hook it up to our current location this may sound really complicated but it's actually incredibly easy let's just go all the way to the top of our page what I want to do is I want to say navigator.geo location dot get current position and we need to pass it to callbacks a success and a failure so we're just going to say position success and position error just like that and we're going to create two functions for that so we're going to say function position success make sure I spell function properly there we go in the success function that's what we're going to call get weather and all we need to do is pass it in our coordinates which coincidentally come in as a value for this function so we can say chords.latitude and chords dot longitude and that right there is going to pass in the information we need so we have our latitude and longitude being passed in now we just need to create our error function so position error and all we can just say is alert I'll just copy over the alert message that I used oops there we go alert and essentially is just saying hey there's an arrow getting your location make sure you allow us to use your location and now it's getting my current temperature and location where it's currently raining and 31 degrees outside if for some reason I had this set to block I refresh my page you can see it's going to give us an error and it's going to make sure that I come up here and select that I want to actually allow my information to be used and then when I refresh it'll get my information and that's all it takes to create this weather app if you want to create more projects like this and learn JavaScript from scratch you're definitely going to want to check out my JavaScript simplified course it'll be linked down in the description below with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 98,367

Keywords: webdevsimplified, javascript weather app, js weather app, weather app, code weather app, build weather app, program weather app, js project, js, javascript project, javascript

Id: w0VEOghdMpQ

Length: 54min 33sec (3273 seconds)

Published: Sat Dec 24 2022