Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners

why hello there everybody how you doing today hope you are doing fine today we're gonna build a cool vanilla JavaScript project and this is great if you're beginner in JavaScript or even great if you don't have that many projects in JavaScript so this is a good way to start I believe because hey you're working with api's and real world stuff and then you're gonna add the content as you can see here so you're pulling data from a API and then you're gonna inject it in your page and you're gonna get these cool things so again you're gonna get the timezone here you're gonna get the Fahrenheit here you and if we click it it's gonna change to Celsius and you also get this cool SVG here that's gonna represent what what's going on okay so we're gonna add this as well and this changes so if the weather changes you're gonna see a cool Sun icon here and we're gonna take a look at that as well so before we move on to the video I want to actually get ask you guys a question would you like to see like a beginner JavaScript series so I've been thinking about doing a modern JavaScript tutorial series so all the way from beginning all the way to more advanced topics but we're gonna do it with es2015 so we're not gonna be using var and functions we're gonna be using everything modern arrow functions also constant let and obviously I'm gonna explain the differences between the old ways and the new ways and why certain things are better or what's different and yeah just let me know so write please please write in the comments down below if you want to see that happening all right let's get going so let's build this thing out alright so I have an empty HTML here going so I don't have anything I just linked my style sheets here and I linked my a BS which both are empty by the way so we can start working on our HTML here so let me quickly stop the previous server I have running and then we and open up this one right here so we're gonna click open live and it should pop this up here perfect so I'm gonna drag this down here and for some reason when I have two monitors this never works for me so I'm gonna drag this a bit smaller because we don't really need to see anything right now all right so in our body we're gonna go in here and we're gonna add just some minimal HTML here and this by the way you can expand this so because we're gonna pull a lot of information from this API and if you want to add more things then it's gonna be very easy so what we're gonna do is basically we're gonna create two divs one that's gonna display the location and the icon and the other one's gonna display the temperature and the description so let's do a div here with location all right so this is the dip with the location and here we're gonna have the h1 which is gonna be the title so we're gonna say timezone for this one and we're just gonna say class we're gonna add a location time zone to this like that good and here we're gonna have a icon so for now we're just gonna put a place for it holder here we're just gonna say P icon but we're gonna change this in a bit all right so moving down here we want to display the temperature and the description so for that we're gonna say temperature like this alright and then here we want the to display be Celsius or the Fahrenheit so I think the information we're pulling from the server is actually in Fahrenheit so let's just name this degree okay let's keep it simple so we're gonna say h2 you with the class of degree here and this is gonna be our Fahrenheit so we can actually just write a random number here let's say 32 34 good and here we also need what do we need what do we need we need something else we need the description so we're gonna say I just say description like this all right and here we're gonna say it's freaking cold because we're in January and it's very very cold and actually to keep it tied to this I'm gonna say temper temper or description like this alright so we have a degree temperature description and we can also name this I guess temperature degree so we know which section we're talking about like that so we keep it calm consistent with this as well alright so this is everything we need alright let's go into our CSS here and let's just add some basic styling to this we're gonna say we're gonna remove all the margins and we're gonna also remove all the padding's here we're gonna say padding:0 and box-sizing we're gonna say border box like this alright now we're gonna work on our body here because these are literally the only two sections we have so we're gonna add a height of 100 we hitch to this so it's full screen you're gonna say display flex justify content we're gonna say Center actually I'm gonna move this in column so I'm gonna say flex direction column like this if you need help with flex box I posted the tutorial a few days ago explaining everything about flex box so if you're interested in that take a look alright and let's do a line item Center as well so just centering everything like that let's add a linear gradient to this so we're gonna say background linear gradient I have two nice-looking colors here which are RGB we're gonna say 47 150 and 163 all right and then we have RGB deleted my thing 48 60 - actually let's close this up so we have more space here boom mark space 62 143 let's see how that looks should look decent there we go I'm gonna say fawn family let's just add sans-serif here I'm just way better color white so we can see everything very very clearly awesome yeah all right so let's modify this a bit bit these two sections that we have here and so we have the location and the temperature so the two big sections we're gonna say location so for location we're going to add the height of 30 VH like that we're gonna add a insanity with the 50% like that we're gonna say display flex just the five content space around and we're gonna add a line items Center all right so what we have now is just a bit of space between this and the icon here so it looks better and I believe we can actually just add the same thing here to the temperature so if we do temperature or temperature class like this there we go but the difference we can do is just like temperature insert separately and just add flex direction column two this is actually we need to display in the Celsius or Fahrenheit here so we need to wrap this around in another class actually so let's go back into our HTML and I'm just gonna name this let's say the gree section okay so this is all about the degree and we're gonna just close it up in here and I'm just gonna add a span of let's just say Fahrenheit okay from Fahrenheit like that alright just added this and all we need to do is just select that degree section here I'm gonna say display flex to this and a line item Center all right there we go select the span separately just add a bit of space to this we're gonna say a margin of 10 pixels let's make this larger a bit font size let's go 30 pixels and we're gonna make the h2 here also larger degree section h1 h2 or h1 gets h2 yep we're gonna say font size let's go 40 pixels so this is the information we want to see very very visibly and also let's add a cursor:pointer to this section so we know it's clickable so we can change between the two things all right now this is kind of messy CSS I apologize but this is the fastest way I can make this happening okay because I want to focus more on how to build this out and JavaScript how to pull out the information from the API and all the other good stuff all right so what we're gonna leave it like this for now and then let's go into rjs so go into your Jas here and the first thing we need to do is actually get the longitude and the latitude from our location now there's a very very simple way to do that and it's actually built into JavaScript so let's do it first of all we're gonna say window dot add eventlistener and we're gonna say load so we're gonna use this so after our page loaded we can get the the location so we're gonna say load and we're gonna just do an arrow function here like so all right so after our page loads basically this function runs and everything inside here runs it's kind of a few new jQuery scan the equivalent of of load unload how was it unload I haven't used jQuery a long times I don't even remember propperly I believe it's onload correct me if I'm wrong all right so here we're gonna define the coordinates so we're gonna say let and we're gonna say long the longitude and we're gonna say let's let which is the latitude alright so the way what we can do is actually say if and we're gonna say navigator dot geo location so if this thing's exists in the browser then we can find the exact position of the user now remember this will only work if when you access the site there it's gonna be a pop-up here that's gonna say allow geolocation or not so what you can also do is add an else statement here and if it doesn't work or they don't allow it get the h1 off your page or something and say text content and you can say hey this this is not working because reasons okay so you can say hey please enable your thing or maybe your browser does not support it so this is why we add this if statement here so if you want to do that definitely do that all right so here we can see navigator again dot geolocation dot get current position like so and here we're gonna have access to something called position now you can name this whatever you want I'm just gonna say position and here we're gonna run an arrow function like so and actually we can close this out because we're not gonna be bothered with the HTML for now like this and if we console.log this position you're gonna see we're gonna get all the coordinates here going so let's open this up and as you can see we have the position here and we have some chords and we get the longitude and the latitude so to access this all we have to do here is say our longitude alright so the this one up here is equal to our position so the information we get back from this position dot and we have chords here you can see it also the displays it and if we press control space you can actually get the information here so if you say dot and look at that we get automatic completion here longitude boom let's get the other one latitude equals to position position the chords thought latitude alright so we pulled out the information that we needed all right now what do we do this information well we need to access the weather right we need somewhere to pull that weather out from so to do that the best one I found and the easiest I found was something called dark sky dotnet so you can go here and it's free which is great because hey everything that that's free is nice so you can go on dark sky dotnet here you can go on the dark sky API you can click it you can click try for free you can make an account and after you do that you can go to your accounts console you can go to your console and you're gonna get this sample API call here it's gonna give you a ton of information now you need this API key which conveniently they place it here in your code so basically how this works is you have the the website then you have your API key and here you have your latitude and your longitude right here all right so what you're gonna do is after you made your site your your account you can copy this from here and you are gonna paste it down here so we're gonna say Const we're gonna say API and we're gonna do quotes and paste this sucker in here actually let's go pack that's not the quotes let's do backticks ok so the number next year 1 and paste it in like so good let me close this up there we go alright so what we need to do is basically we all we need to do is just modify these two informations here so remember this website if you check the documentation uses this as the latitude and the second number has the longitude so we're gonna get this here so before the comma and delete it and all we have to do is say a dollar sign we're gonna open up some brackets like so and all we have to do is say lat and we can actually copy paste this here and just change this to long so the longitude and that's all we need nice now I'm gonna do something and then I'm gonna tell you why it's not working all right so here to get the information we're gonna use something called fetch so we're gonna write fetch and what this does is basically tries to do a get request which is basically getting information from this following URL all right because if you click on this we copy/paste this you're gonna see that we get this nice information of a random location here so the longitude latitude timezone currently what's going on and all the other good stuff so but the only difference is that we replaced it with our own so let's make a call so all we have to do is say fetch and then we have to say API all right so we're fetching this thing with our own custom latitude and longitude and after it fetched so after I got the information we can see then so all this does is basically hey after you got that information then I can do something with this data so here all right so that's all it does you get the information and when the information arrives because this might take some time to get from the server down to you it might take like a second half a second and you don't want to run everything in here only after you only want to run it after you get it back from their server so that's why we use dot then and this information is gonna run only after you get it back all right let me not repeat myself 10,000 times so here you can name this anything you want data response whatever you want all right so we get back the response here we're gonna use an arrow function and this is conventional you're gonna have to take this information and convert it to JSON so with JSON you can easily use it in your JavaScript so to do that all you have to do is say return we're gonna say response dot JSON like so and after again after it made it into a JSON you can say dot then again and this is where we have the actual data so let's do another arrow function we're gonna say then data console log data and this is not gonna work so if we save this you're gonna be like and why are we even bothering with this nothing's working you're gonna say API is not defined okay wait we have another issue here so why is API not defined all right cause API so we fetched the API all right so we it's not because it's only available in these brackets so let me copy paste everything from here I apologize copy paste everything from here and just paste it below this code here because our API is not available outside of this bracket scope so let's paste this in here hit save let's see let's see what's going on now all right so look at that beautiful error it's gonna say hey dark sky API does not allow you to access this API from local host because it has cross browser origin whatever whatever you're gonna get this error a few times but what what it's basically doing is they for some reason they're not gonna let you access it from localhost as you can see it works just fine here on the on Chrome but on localhost it's not gonna work so to get around that issue so it's basically called a course issue and there's this cool thing that I found which is the simplest way I can get around this this errors a site of course dot a course line anywhere that Roco app.com all right so what this is gonna do is basically it's gonna act as a proxy and it's gonna allow you to make requests even from from localhost so we're gonna copy this course anywhere the Heroku comm and we're gonna go back to our our visual studio code here and we're gonna say cost proxy is equal to and we're just gonna stick this thing in here and here we just have to do again dollar sign and we're gonna say proxy that everything is gonna work just fine so hit save there let's go back let's see if this console log gets console logged and look at that there we go so we get back a lot of information here we can get back the currently daily so you have every day here you can get icon summary what's happening hourly there's a lot of information you can mess around in here so as you can see it brings back a ton a ton of data flanks not even sure what this is but hey we're not gonna work with that all right so what do we do here well let's pull out a few information from this so I wanna pull out from this data currently all right we're only gonna use currently for this so in this current view we're gonna let's take out the temperature we're gonna use the temperature and we're gonna use the summary okay so flurries so let's go back here and a good way to do this is actually like so we're gonna say Const and I'm gonna leave space here and I'm gonna say equals to and I'm gonna save data dot currently so I'm accessing this data that currently like so and here if I do brackets I can pull out all the information from data that currently so this is a cool way you can shorten your syntax so you don't have to do every time like data currently dot temperature like so you can just do temperature here which is gonna pull out temperature from data that currently so this is a shorthand and es2015 good so we need the temperature we also need let's pull out the summary here some early like so good now up here let's define some more up here let's define some more elements so let's pull out the actual information let's get the actual HTML elements so we're gonna get the timezone here we're gonna get the temperature degree and the temperature description so let's say let temperature description it's gonna be equal to document query selector we're gonna say temperature description like so we can copy/paste this one and we're gonna say temperature degree we're gonna pull this one out as well temperature in degree alright what else do we need let's make this smaller kind of want this to be in one line and and it doesn't want to give it to me in one line ah all right we have this temperature the temperature description let's also get the location timezone here so we're gonna paste this again we're gonna say location time zone which is gonna be location time zone so this element up here alright I think that's fine for now and the cool thing here is we can just add everything down here so to do that all we have to do is just access these things so here actually I'm gonna delete this actually let's leave it so we can actually look at the data that we're getting back here so let's go here and let's just say set Dom elements elements from the API all right so we're gonna write that and all we have to do is just change the text so we're gonna get the temperature degree here temperature to green all right so the Dom element up here and all we have to do is say dot text content is equal to we're gonna get the temperature from this this API so we pulled it out from the data that currently in this temperature all we have to say is temperature hit save let's pray and there we go we have thirty six point fifteen let's see if that is accurate so thirty 6.15 there we go hey it works all right so for the other ones it's quite simple we just repeat the process so temperature description it's gonna be context content it's gonna be equal to summary hit save and it's freaking cold it's not freaking cold anymore it's mostly cloudy okay the last thing is the location time zone and that actually we can pull it out of we don't need to access the currently we have it right here so you're a Berlin so how we have to do is just say we have location time zone dot text content is equal to we're gonna say data dot time zone hit save and there we go you're a Berlin awesome all right let's clean this up a bit we're gonna remove this console.log like so all right looking good so let's get this icon working so to do the icon we're gonna use something called sky cons so if you write sky cons we have this cool cool thing here all right so basically SVG canvas elements actually canvas elements not SVG elements and how this works is basically you define a new sky khon and then you add it you add a canvas somewhere here you add the canvas in your HTML and then you say what kind of SVG you want to use in your canvas so partly cloudy day is going to display the partly cloudy day which is probably this one so what we need to do is we need to modify this according to whatever it's going on and our in our app so to to basically get this all you have to do is go to github we're gonna hit clone and just hit download as a zip so all I'm gonna do is just open this thing up the zip folder and just drag the sky Khans into our app here all right close everything up and you're gonna see it appear right here so we have our skykans going nice all right so what else do we need to do well for this one we can actually go outside here alright so below where you have this single quote bracket so this is gonna be right outside of our navigator here alright so down actually down here so below this alright so we are just in this window without load function right here okay so right above this we're just gonna create a function it's gonna take care we don't want to like put 10,000 things in our in our than response here to get it bloated so we're gonna separate this a bit to make everything a bit more clear we're gonna say set icons and we're gonna get the icon here and the icon IB because these are the two things that we need so if we go back somewhere if I still have skykans open so we we need to declare sky cons new sky khon then we need to add an icon so this is the ID all right here in the canvas as you can see the ID so this is like a query selector in a way you get the ID of the canvas and then you say what kind of what kind of an icon it should display alright so you just grab the element here and then you display it with the built-in sky khon elements that it has so this is kind of the same thing we're doing we're just getting the icon and the ID here so what do we need to do we need to say Const sky cons and we just initiate the sky cons library here like so and here we can add a property so you can change the color if you want I'm just gonna say white for this one like so and then we need to say cons current icon now how how do we know what the current icon is well from the API we actually get back the icon here partly cloudy night but the difference is everything has like a simple line here not an underline like we have in sky khon so as you can see here every every element has a underline like so so what we need to do is take everything from our icon here and just basically replace it with the underscore okay so how do we do that well actually we need to get the I believe we need to get the icon from the API so to do that let's just go let's go here I believe it's in data that currently let's see currently icon all right so we can pull out the icon from this so we're gonna say icon like so hit save and then we're gonna when we are gonna run this function we're gonna add this icon so here again this is just a weekend this is where we're actually gonna run this set icon so this is where we add this icon from the server into here so what's gonna happen is the icon is gonna arrive here and we're going and what we were gonna do is we're gonna say replace and we're gonna replace we're gonna say slash like so we're gonna say we're gonna add the line we're gonna say slash again G and we're gonna say comma and then we're gonna say quotes and then underscore whoo that's difficult so what this is gonna do is basically it's gonna look for every line and when it finds every line it's gonna replace it with the underscore so that's all it's happening and another thing we need to do is as you can see here in these sky cons everything is uppercase like so so to get around that issue how we have to do is say to uppercase that's gonna take the whole thing and just uppercase it here good hit save on that and to initiate so the animation goes off all we have to do say skykans dot play like so and then we're gonna return skykans dot set and we're gonna add the icon IDE here and then we're gonna say sky cons like so and then we're gonna add this current icon current icon like so so again all we do is we add the ID and then we add the sky cons thought-current icon which is gonna be the thing that we're getting back from here so up here we're gonna say set icon so here is where we invoke the function so we're gonna say set icons and remember we need these two properties so the icon is gonna be the icon we get back from the server so it's gonna be the same like cell and the ID if we check here well we need to replace it with d canvas so just copy this one here and place it in here so but we're gonna replace this B with this we're going to remove the ID we don't need the ID if we're gets just gonna add a class of icon to this and here to get the ID all we have to save document the query selector icon like so hit save and let's pray let's pray and let's see what's wrong there's always something wrong skykans is not defined why are you not defined alright so this needs to be uppercase like so that's it save sky counts is not defined okay so how about we actually linked our sky constant in our HTML how about that let's add source and we're gonna say sky cars ah there we there we go so it's gonna say mostly cloudy we have this nice animation so again to run through this very quickly what's happening here is we define a function here we add a icon and the icon ID so if we look at the documentation here the icon and the icon I this is the icon ID and this is the SVG then let me open up up real quick then we just replace whatever we get from the server with the underscores and we uppercase it just so it conforms to sky Colin's naming here and then we just run the function we add the icon so the icon here on our HTML we select it and then we just put in our icon so this thing the long thing that we've been working on and then we hit sky cosplay which is gonna animate it and here we just return it so we can run it up here good all right so that's done the last thing we need to do is change this to Celsius whenever we want so to do that let's go up here let's just do it up here and we're gonna say a new I know I said that we should probably not pollute this with 10 and lines of code but let's let's just finish it now but definitely separate these things and add them and separate functions would be more viable all right so here what we can do is basically we need to listen to an event on this thing so when we click it it should change so that is our hmm degree temperature degree here so let's select it up here I'm gonna say Const temperature oh we have it selected all right so we do Dewey yeah it's temperature oh it's temperature section my bad we're gonna say Const then actually let's say left now we could have changed everything here to Const temperature mistakes were made temperature section is equal to document dot query selector and we're gonna say temperature temperature temperature section like so good so down here we're gonna say change temperature to Celsius Fahrenheit like so all right so what we need to do is let's also select the span here it's called temperature span is equal to document query selector temperature temperature section and we're gonna say span like so if you want if you're smarter than me you can also select it with the child nodes but this is way faster good so here what we want to do is we want to check if it's on Fahrenheit or on Celsius so how do we do that well first we're going to run the degree section so we're gonna select the degree section here temperature section the temperature is section we're gonna say add eventlistener and we're gonna listen to a click event and we're gonna run a function here so here we're gonna check the span the temperature span so we're gonna say if temperature span dot text content is triple equals to F all right so if it's on Fahrenheit then what we on to do is say temperature spans we're gonna sit like the span again dot text content sequel to Celsius and then we're gonna copy paste this line and we're gonna say else it's gonna equal to Fahrenheit again so if we see now let's see what's going on it's gonna say add event listener of null so we didn't select something correctly here temperature section add event listener click temperature section so we probably mess this one up temperature section temperature section and we need the dot here and the dot here as well so we missed these two dots click Save and now if we check let's refresh it still says null and see why it's now temperature section let me see if that's correct all right so it's not temperature section it's only temperature all right I did not name these correctly so I messed everything up so I would just damper ature here and temperature there hit save let's see now and it's working very nice very nice oh the naming conventions I'm gonna keep these as sections now because they are the sections I should probably name the sections as well but it's too late now all right we're getting this to change now the last thing we need to do is change the actual degree so to do that here what we're gonna do is let's actually define what the Gries are and and Celsius so we need to do the formula now how do we do the formula so here we get back the temperature so let's do it above the icons here we're gonna say formula for Celsius like so and all we need to do is say let's Celsius and our Celsius is gonna be and I need to look at this because I'm not that smart so I got this off the internet obviously we're gonna say temperature like so so this is gonna be our Fahrenheit and we're gonna say minus 32 we're gonna say multiplied where's my multiply x I'm gonna say five divided by nine so that's our formula now here down here we can change our and a temperature degree which is let's see temperature degree okay so we can say temperature degree the text content is going to be equal to Celsius it's save let's see Wow so you get this ugly-ass number here now to get a quick fix around this we can just map that floor this one I just mapped out floor you're gonna see map tile floor we're gonna say Celsius and else here we can just put back the temperature degree the text content back to the temperature that we get from the API and it's safe and everything should be working fine so yes there we go everything works fine and yeah that's it hopefully you enjoyed this one I apologize if we messed up the naming conventions there but yeah I try to put everything very quickly together and it seems like sometimes you mess up a watch again I do I'm a human as well alright I hope you enjoyed this one I know this was a bit of a long one but hopefully you learned a few new things and yeah let me know again if you want to see that javascript full-on javascript series thank you so so so much for watching hey we are almost hitting 1,000 subs and we're so early on in January and we're doing so great so I appreciate it so much and if you're new here I'd highly appreciate it if you drop a sub and yeah that's it for me today I'll see you very soon [Music]

Channel: Dev Ed

Views: 407,493

Keywords: build a weather app, weather app, freecodecamp, freecodecamp weather, vanilla javascript, javascript for beginners, javascript weather api, javascript api, javascript tutorial

Id: wPElVpR1rwA

Length: 43min 20sec (2600 seconds)

Published: Sun Jan 06 2019

Reddit Comments

[u/Norien711]

This was a really well done tutorial with an easy to follow along setup!

I love the final product and enjoyed it!