Build a Universal Weather App using JavaScript | Full Project using HTML, CSS, and Weather API

[Music] foreign data from an API and you can show that data in your app so whatever location you will search for you'll get the data for that particular location right the better data so let's move on and let's see that what I'm talking about so we will be using this particular API if you type for weather API so let me just first go into whether API so yes this is basically the link the link will be added in the description if you want right so visit api.com this particular API we'll be using to get all our data right the API is nothing basically it is a set of a Json or XML data which actually is on another server right and you just uh request for that particular data you get that data and you can use it in your application right so all right so let me just uh go over here and log in so I've already created an account over here so I will just login inside this this is a very simple login process you just have to put your username and your password and you will be signed in right so let me just quickly sign up so here I am inside uh the weather API account right my weather report account and this is basically my API key this is my unique API key and I'll be using this particular API key to hit all the endpoints and to get all the data let you see how basically any API Works personally the first things first what you need to do is you need to go into this API response fields that what are all the responses that you can get so if you see that these are all the responses that this API will give give you for a specific location right so that if you have searched for Mumbai suppose so these are all the data that you can get for that particular city right temperature in Celsius temperature in fahrenheit right pressure Cloud feels like Max temperature average temperature sunset sunrise human rights everything right every thing you can get for that particular Rotation by just using this data and that location's name right now how will you search for that particular location how will you query for that particular location let's see that so what you need to do is you need to go into this API Explorer and here you just have to put your API key so first let me just copy my API key so this is my API key I just copy this I'll go over here and I'll just paste this over here right and here in place of London I can search for any City that I want for the data for right and I can just say uh the protocol is HTTP the format is Json the format can be of two types it can be Json it can be XML so uh based on what you need you can ask for the format right and based on the protot called uh there is HTTP and there's https so there's not much difference between them but Json and XML so if you're working with JavaScript if you need JavaScript object notation if you need Json data you should always have the Json format and if you're working with something that needs uh the data in XML format you can always choose the XML format as well right so now let's just search for this so let me just click on the show response and you see that this is the end point that this API has hit right with this particular key with this particular key and the value is Mumbai over here right so if I say that I need to remove the spaces from now let's again hit it so now you have basically the location is Mumbai the region is Maharashtra and every other detail about it temperature condition wind humidity cloud and everything you will get away right so let me just go over here and let me just uh say that this is basically the API that we are going to use let me just copy this particular link over here and we'll just go into our app and I'll just put this over here in space this right so and let me just comment this as well so I have commented it out right so this is basically the key that we will be using this is basically the API endpoint that you'll be using to get data for different location so what we'll be doing is we'll be using this API we'll be using this link and we will dynamically change the location according to our search value and for that particular value we'll get the data so we'll just keep updating this particular area with our different locations right so that will get uh the value for different locations right so now let's just see that how you can actually get some data from your API and how you can put it uh use into your app route uh right so let's see how we can do that so what I will do is I'll just create one function first right that function will actually get the data from the API what I will do is I'll just create one function over here and I will say this function will be an asynchronous function and another function let me say const I say patch details or fetch results this will be my function this will be an RO function and this will be an asynchronous function as well right so I'll just make this async because basically hitting an API and getting data from that API is a time taking task so to do that we'll be using async await right so this is basically our link and we'll be using that so now let's just say that we need to fetch results from this particular API we need to hit this link so I can do that we can just say let URL and inside this URL we can put this data I'll just say copy and I'll put this in This is My URL which I'll try to hit and then from this URL I'll get one response I will say get response and to get the response you have a specific method in JavaScript that is basically fetch you can also use axios but using fetch is recommended over here it will be using page because we haven't seen X years right we have to install it with using npm and all that stuff or we need to have the CVN link and all that so we'll not be going there we'll just use the Orthodox fetch method over here await Fetch and we can just pass in the URL so it will actually provide you with a response so let's see if you are getting some response or not right so now I'll just call this patch results uh and one thing that we'll be needing is we'll be needing to add this script over here so I have already added it you can do it right so we have just integrated our JavaScript from uh basically in the HTML right so now let's run the code and now let's see that if we are getting something or not so I'm just going to HTML I'll open this with live server so this is our app basically right which we actually created and let's go into the inspect and console and see that okay so this is some error let me just refresh this once yeah so this is the response that we're getting but if you see that this is a response this is not the Json data this is a response with headers with status with status tags so how you can get the Json data for that you need to actually use another method that is the Json method right so whenever you are getting a response you need to convert this response into Json right so basically using axios uh eradicates this particular step because what happens is X Plus directly gives you the Json data but when you're using the fetch method so you will get the response but now you have to change this particular response into Json data so you can do that you can just say Commons data equal to response dot Json that's it and now when we will look at the data now you will see that you have a promise pending let me just refresh test oh I haven't used the I haven't used the await keyword I guess yeah so a weight responses right so now you will get the data for a particular location so if I say that my location right now is Mumbai so I'm hitting this for Mumbai right because the key is right now for Mumbai so I'm hitting this for uh this particular location so I'm getting the data for Mumbai over here if you see if you go over here I'm getting the data from Mumbai Maharashtra and all that I have two keys current and location so the current key will tell you the exact uh details that are there right now and the location will tell you that where is this place look at it right so these are the two keys by which this Json data is made up of now we'll be using all these details to actually get all the data from inside these two keys right so let's move on and let's see that what all do we need so now this API is static what we need to do is we need to make this API Dynamic so what I will do is I'll just remove this over here from here and I'll just use the template little and I'll pass location field over here or let me just create one variable over here I'll just say let please or let my Target location right now is Mumbai I'll just say by default this is Mumbai and here I'll just pass my Target location right so whenever I change this particular location the this method I want to call this method with a particular Target location so let's just say Target like this so my target is Mumbai right now so this Mumbai will go into this Target location right which results and then this function will run and it will fetch the results for me for this particular variable that is currently Mumbai right will be changing this dynamically uh moving forward so now this is basically giving me the data of Mumbai and if I change this target variable to let's see looking up let's see so now I'm getting the details for Lucknow right so Lucknow to Pradesh all right so this is done right so we are able to call uh the API and we are able to get the data as well right now what we need to do now we basically need to have all the details what all details do we need if we see into our application our application is a very minimal application we just need the temperature we need the location we need time day uh date and the condition that is missed per by default right so this condition can also changes can be cloudy this can be sunny this can be rainy and all that stuff so we'll be looking at that as well all right so let's see how can you actually get all these data right so uh first if you see if you go back and let me just inspect this for you and if you see inside this object we have this current and location so in the location key we have the country India we have the name we have a name key that is basically which are actually telling you the city's name so this we will be needing so whenever we'll be searching for luck now so this uh API will be hit right so this APL bit and we'll be getting this data so the name is Lucknow so if we can get this name key if we can get this name key and this is Lucknow and we can just show this over here when we have search for Lucknow right so we'll be having Lucknow and same what we can do is we can show the local time and we can show the current details right so the temperature the temperature in Celsius or if you want to add humidity levels or if you want to add anything for that particular location you can do that so we will be doing that so first of all let's see that if we can get the name out or not so what I will be doing is I will just go over here I'll just create a variable I'll say location name and the location name will be from inside data will have to go into the location key and from that location key what we can do is we can bring out the name from data to location to name right now let's just console log and see if we are getting the name out or not the places name are out or not right location name and now if we check respect and so it is right fair enough okay so now what we can do is we can go back to our file and we can similarly call out every particular detail that we need to know so we have location we have time we need time now what I will say is data dot location dot local time I guess it's uh the the key's name is local time right so let's check this out once so inside this location uh yeah the key's name is local time so this is saying the eight and the time right so this is done so we have the time and we have the location name and then we need the temperature in celsius so if you look at this current uh key so inside this you will find temperature in celsius this is temperature in celsius right so let's go back and let's do that so what I will do is I'll just say let temp all right so temperature is inside the current and underscore C right so this is your temperature location name and time and the SEC and one more thing that we need is the condition so we'll just say condition is data dot let's check for condition where is this condition thing so right now I'll just remove this from here comment this out and let's check for the condition if we go into this current and if we see there is the condition condition is itself and another object in which we have an icon so that we can also show this icon that cloud your rainy and all that icon and then we can also show uh the text right so the text is missed right now right so we had just need to get this text key so from current to condition to text so from data current condition to text right so we'll get these particular device right okay so that's it now we have all these data for this particular location now what we need to do is we basically need to include the search functionality over here so that whenever we are searching we are actually able to change this target value and for that Target value we are getting all this data right so we need to do that first so what we'll be doing is for that we'll be needing all our elements right to do this right so basically what I will do is I'll just take all the elements right now and I'll just select them so basically what you can use is you can use the query selectors for doing this so I'll just say temperature field temperature field right so I'll just not write all this because I have already I already have all this set up right so what I will do is I'll just take all that over here I'll just say these are all the fields that will be needed basically the temperature field we have defined this right so I've just added some classes up for that you can check them out later right so basically the temperature field and the time location the condition and your buttons and the form right so we have all this stuff over here so I'll just say that let me just remove this button and I'll just create a form over here then they say document dot query selector and let's just say it so this is how we have all our collectors right so these are all our fields that will be working but the first things first that we need to do is we need to create a search functionality right we need to create a search function so I'll just say function search for location and this will have an event and inside this what I will do is I'll just say search for location as an event I'll just say dot prevent default basically prevent any default behavior that can happen and then we'll just say Target will get the search area value so whatever you will search in that search area right or you should say the search field FID sea are search field the value we will be just passing the search field value to our fetch results location right so what this function will basically do is whenever you will search for any uh thing right whenever we will search for anything so the search field will have that value if you see that if you go back over here and if you search for anything like this right so this is your search field value and now what we are doing is we are setting this to the Target uh value right we are setting the target value if you now see that the target will have the value as Mumbai and now we will be sending this Mumbai to over here and then this movement will go over here and we'll get all the details for Mumbai right same will go for other city as well so that is how we can do that right so uh now this is done this is basically a function but how we'll be calling this one so we'll have to call this function uh with the Press of a button so now we need that button so basically we have created a form for the same purpose so inside this form I can add an event listener and inside this event listen I will say whenever this form will be submitted just call the search for location method like that right so whenever we'll be calling this particular form right so when we will be submitting this particular form we'll call the search for location method right and the search for location will actually set the target to whatever Target we have typed there and it will call the pitch result so we should get the results for that particular location so let's just go back and let's see that if we are getting this or not so if I search for Mumbai over here let's search tonight we have an object which has a retails of Mumbai if we search for London or if you search for Milan let's search this so now we have details for Milan right now what we need to do is we just need to incorporate all these details into our front end that's it so whenever we'll be searching for anything we have all the details and we just need to put these details into a picture right into the design so how you can do that so you already have selected every field now you just need to add these particular Fields this particular values to that particular field that's it so for that what I will doing is I'll be creating a simple function that will say update uh data for update details and in this update details what all do we need we need our temperature we need our location name we need a name and we need the condition so these are all the four things that we need right and now what we can do is we can just use these fields so we'll just say temperature field so here is a temperature field and in the inner text of the temperature field we can just put the temperature value right similarly in the location field inside this location field we can just put the location and name value location name value right and then in the time we can put uh if we see we have this weather field we have the search we have this date field so let me just make this date and time field and this is my condition right so let's name them like that the date and time field here it is I'll just put this pick this up and here I'll just paste this date and time field or in a text equal to time and then you have your condition field inside this condition field so we can put the condition like right and now we just need to call this function over here so I'll just say update details with all these details so first thing is temp second thing is location I guess efficient field they have to pass location name so it is time and then yeah all right so now let's check this out that if you're having this or not you see right now this is for Lucknow and if we search for Delhi this is becoming daily and if I search for Mumbai this is actually getting the data for Mumbai right what if we see this right so uh you have this particular uh format Okay so what if we need to add the day right so what if we need to add the day between this so what you can do is you can also specify the day so for that what you need to do is you can basically uh use a method that is in JavaScript that is basically the date method so what you can do is you just have to go over the talks so let me just show you date method Js so this date method will actually help you to get a particular day to get a particular month right so there is this method that's basically get day so remember this method basically expects uh a date that you can pass and for that particular date it will return you for a particular number from 0 to 6 right so from 0 to 6 you will be needing and you can get basically the day out of this all right so 0 is for Sunday six is a Saturday and the middle numbers are all for the different days in between right so this is how you can do it so let's call this function let's see how this function works but before that we'll need to separate the time and the date so if you see that when we were using the local time right when we are using uh the local time the local time is actually giving us the date as well as the time right so we need to separate them so that we can specifically have the time and we can specifically have the date so you can do that so to do that we can use the split method right so we can use the split method so what I will do is I will just say uh to split something you can use this method so I'll say split date so uh how we can split the date so uh if we see that what is the format of our date and time it so let's just inspect it will go to console location local time first is your date then is your time so if you notice the first element of your string the first element the first index uh is the date and the second index that means the first index so this is basically the zeroth index and this is uh this will basically uh work as your first Index right so this is how we can actually split this according to a space right according to the space so according to space when we'll split we'll have the zeroth index on our date and the first index uh as the time right let's do that first so first thing that we'll be doing is we will just split the date right so to split the date we'll be needing the zeroth index right so we'll make that the zeroth index so let me just say time dot split and we will be splitting this according to our space right and we will be making the date as our so the date is basically for the zero thenx right so yes we'll be doing that and then we'll copy this and we will be making at a time according to space and make this the first this is how we have this and now we can use that date method to actually get the particular day right so I can do that so we can just say let exact let current date current day will be new date they'll be using this method known as new date so new date which will actually take your 8 and this will get the day five according to this particular date you will get the date right but this is basically in the form of number so you will be getting 0 1 2 3 you will not be getting Monday Tuesday Wednesday so for that what you need to do is you just need to create one more function over here so I'll just create a function I will say get a name and this will take a number which obviously the date method will give you right and we'll just we can just use some switch cases over here so I'll just say switch let's pass the number and case 0 will be basically a return Sunday because 0 is for Sunday right and similarly we can use multiple cases and for case one case two is three is four is five and we'll need one more case that is your case h and you can basically uh change all these values right so let me just change them one by one all right so I have changed the dates and now let me just format this so I will just format this so yeah so this is your switch case so gate day name and we'll be just calling this method here so current day and let's just say get day name let's pass this particular function inside this so this will basically uh generate a number for you right and that particular number will go into this particular function and it will check for the case that what number has is there and it will return you the days name that's it right so now we have all these things so we can just uh write this into our date and time field so how can we do that we will just use a template little we will use first uh the date so I'll just say eight then I'll just uh say split maybe 30 days let me add the day first and then so let's add something like that now let's go and check our project out that if it is working or not so yeah it looks pretty good now so the default location is Lucknow let me change this to Mumbai so now this is Mumbai Sunday 12 30 let me change this to London Sunday eight let me change this to Milan this is party cloudy 11 degree Milan it's 9 am wait so uh this is how basically we created a very simple and a very minimum uh weather application so you can actually add more details if you want to but this is how it works right so this was just a simple weather application it will help you to understand functions better it will help you to understand Dom better it will help you to understand that how can you call an API how can you query an API right how can you hit an endpoint and get the data how to use the batch method how to use the Json data right so this was all about this small project I hope you liked the video if you like our efforts please give us a thumbs up please subscribe to our Channel and share with your peers as much as you can right so we'll be coming with more uh projects in the series and okay I'll see you soon bye

Channel: Code with Scaler

Views: 11,659

Keywords: weather app, weather app in javascript, how to make weather app, javascript weather app, beginner javascript tutorial, web development, javascript weather api, create a weather app using an api, building a weather app using javascript, openweathermap api javascript, weather app using html css and javascript, code with scaler javascript tutorial, scaler academy, scaler academy javascript, create a weather app using html, weather app javascript, html css javascript project

Id: JCgX_-aRUXM

Length: 29min 50sec (1790 seconds)

Published: Mon Nov 14 2022