Build A Weather App Using HTML, CSS and JavaScript with Openweathermap API

hi everyone in this video we'll create this Twitter app using HTML CSS with JavaScript okay within open Weather API okay so it is the depart video which display to us so now let's enter a name for example a city name New York and let's press this so it will change the values for us see all values have changed for us for example let's sensor couple [Music] let's press it see the value has changed the shower so we will create this uh wither up using HTML CSS in JavaScript Field open Weather API so let's get started before sorting if you are new to my YouTube channel don't forget to subscribe yeah for This Bitter app I have this okay excited with our op.html and also a CSS file and these are the images that we will use so now let's get started from wizard.html generate code either up and let's import our HTML scss let's try default properties for our ccs and let's import it here so let's assign to the body ground color we will make it a little bit wider like this okay so now let's write that card it will be name it container inside this we will um how up input field type would be text and also a button inside button we will have an image and the image path would be either image is Slash in classic cloud.vng so let's design our container which would be 450 pixel background would be linear gradient and this would be 3 30 degree and click okay so let's say take the color let's assign this color like to take this one and here we will take this one okay color would be white padding will be 20 pixel and margin enter it pixel cool order ideas would be 10 pixel so let's write here yes it's okay so now let's run it so to run it we will use the extension of this Visual Studio code this go live okay we will press this and it will be run and it will appreciate automatically yeah that's running now see it looks like this okay so now we will just change this oh sorry the image should be search image yeah that should be searched PNG yeah it looks like this now so now let's design our input field [Music] press enter foreign and display should be Flex and align item Center justify content space between space between yeah it looks like this so now let's come here to the dot search now our input field okay so for the search input border should be zero line zero adding 18 pixel and 22 pixel to the left hand right and next one it will take all the spaces from right to left chain margin right would be 20 pixel motor radius to be 30 percent font size 18 pixel background color would be like light and color black yes so let's check it now sorry it should be 30 pixel yeah it looks like this so let's add it here power input field placeholder Intercity name yeah so now let's design our button we put the button let's come here this and also the furniture it will sell 22 pixel motor zero and outline zero background color would be like this okay 60 pixel border radius 50 percent and let's add design for our image search button IMG with them itself so let's check it now yeah it looks like this but let's make the button smaller yeah it's okay now okay but cursor should be cursor Point yeah it looks like right now so now let's add um then video icon and city name and immediately and wind in this area so before that let's come to the container and we will add earning 30 pixel so after that let's come here and we will add our third section here now let's try to be there inside whether we have an image the part of the image is with their images rendered PNG after that H1 tag in this we will display our temperature for example 22 Centigrade but for that [Music] and we will copy this okay in this degree and just come here right paste it here and after that we will print the city name okay let's check it now okay it looks like this now so let's come here to our species which come here to the our container in the container just text online Center it's okay so now let's stick it here it's the center now so now let's implement this is another section which is dot detail so let's create two more new elements one let's try to take an image so here I will take the image with their images humidity okay dot PNG and let's create one another view inside this we will print our humidity percentage for example 20 percent and here humidity so after that let's add here copy this code paste it here and just change this the window.png and this should be for example 20 kilometer per hour per inch would be wind so let's check it how it looks like see it looks like this okay but let's let's make it then design it to display it side by side so let's come here first of all we will add some design to this one okay video Plus icon okay here that video and here I add here margin top is a 150 pixel and width would be for example 160 pixel after that let's add design for dot video which one tag okay for this the font size will be full size would be like 160 pixel uh sorry that would be 70 pixel front weight would be 500 and let's copy this and it would be for H2 [Music] and let's make it 40 pixel and this would be but the merchant term would be so let's stick it once yeah it looks like this okay so let's come here let's make it top would be minus 10 pixel after adding this now let's come to our section to this okay to the details let's go to this the details should display Flex items Center content Center and dividing would be 0 for the top end pixel from right and left hand let's check it yeah it looks like this but let's add some demo design and not so much in top that would be 50 pixel and now let's come to add some design to our columns add to these columns yeah these columns display Flex align items Center it looks like this number two text align left it doesn't look like looks like here justify Garden space between but this should be just if I cut in space between let's remove from this yeah it looks like you will now so now let's add some design to this image in this text dot com which these would be 40 pixels and margin right would be 10 pixel yeah it looks like wheel now so let's just start here text a line left it's okay now so let's add some design to this then just come here and here we will add a class humidity and here we will pass point Dot wind fold size 20 30 pixel yeah it looks like we'll make it 27 pixel and the image would be 45 pixel yeah it is okay now it looks like well so now whenever we enter a city name here so we should display the data based on that okay so let's compare further we will use open video API it will come here close it yeah let's come to open video map.org to this so here we will get our API so I have already created my account so you you should create first of all your account so let's come here to our API click here my apis we will see our apis here and also let's come to the API here to this documentation yeah here we can see our API so first of all when you are getting the API so that will take some time okay so wait for that it will maybe take a couple of hours to activate your API then you can use that okay so let's come here to the weather API documentation so here we will come to the current weather data for this API Docs yeah here we will come to the API calls and we will call the API based on the city name okay so let's write it city name yeah let's come here yeah here in API calls here we will get this API we will search based on city name okay just search in a city name so let's copy this [Music] after copying so let's paste paste it here let's add a city name here the city name would be for example London and let's start API key let's copy our API key let's copy this one copy this and paste it here let's press enter yeah we got our data based on the city name London okay but it is not in the clcs Celsius okay so to get in that format so we will come here to oh yeah here we will come to the units section okay in the units we will add Matrix okay unit is equal to metric we will write here and units is equal to metric yeah we got it in Celsius okay 12 now okay so now let's copy is it and we will use it in our code here so let's come here and here we I will add JavaScript or is Javascript code in the same file let's come here so here we will create a function um the name of function would be Gita should be a sync function asynchronous function okay so here we will call our API so let's create a variable response is equal to fetch and here we will paste our URL okay this is our URL but here yeah later we will make it Dynamic okay because the this city name should be dynamic so now let's just assign them okay we will get the data based on the London okay City so now let's data is equal to uh result dot Json we'll change it to the Json format let's use a weight here [Music] so I need here so now let's first of all print it on the console so let's cancel that log here print our data here and let's call our git reader function let's come here to our application inspect and come to the console yeah we got this object inside the object we have all this C Main in the main area we have the our temperature and these things okay time zone and all these things we have here okay send video ID main clouds okay so now let's remove it so now let's get these videos dynamically okay so let's assign a class name to this okay so Cs and city name for the city name plus City in 37 light glass percentage after that let's give to this event so now let's get these videos document dot dot query selector by class name the first of all we will get the Celsius okay we copied the name sorry let's copy that name yes this one and use it here dot inner HTML is equal to data data so let's check what we should assign to this let's come here to the console you have to the console we should and let's just comment it yeah we will get our data now we call that okay oh we didn't print that sorry we should print that DOT log I will get a yeah we got our data so now first of all we will get the Celsius that is in mean okay main dot temp so we will write here data dot main dot team after that we will get the name the city name okay dot City is equal to so to get the city name so we will come here dot name directly data.name sorry and after that we will get the humidity this copy this and write down it here and to get the humidity we will come here to weather that is not here dot Main where is the humidity yeah just come here to the main here we have dot main dot humidity okay uh final estimate is equal to that domain Dot we will get that so now let's get to our uh speed okay and here for the speed we will come here to event and invent we will get the speed when dot speed dot domain dots yes it's okay so now let's save it let's come here see that has updated okay based on that 81 12.12 3.6 let's check it and let's 12.20 12 temperature and also we can check here the speed 3.6 okay 3.6 we have reached that okay so now let's add here with our humidity plus we will attach the Centigrade okay with this this would be attached with that and also with the humidity we will attach a touch percentage and also with the speed we will attach km per hour okay yes let's save it and let's see it see that has added here so now let's remove this point 12 okay 0.6 okay so it will remove that we will write here uh two so we should attach it with temperature sorry okay you should attach that here with temperature yeah it's okay now so to remove that we will light here round with that inside yeah let's check it now see that has gone just 12 and also we will light it with this one and with that one just come here made that round sit here sorry yes it is okay now yeah it looks like wind now so let's close this I will just come here to the CSS design into the Container the margin just fill out here like that zero yeah it's okay now and also let's decrease it yes it's look like this now without scroll bar so now whenever the user input to the data in this input field okay so we should do search based on that okay so let's come here descriptive light const search input is equal to our document dot query selector dot search and input you will get our input and also let's duplicate this this would be sir pattern and here we will light button after getting this now let's come down here whenever we press on the search button that add event listener and here we will right click we will call this method and we will call this our method inside that okay and here we will pause the video okay search input dot value will pass that value to this function this city we will get that here and now instead of this city we should attach this CTA with it okay so let's write this partition and inside the city this city I will write something like this okay yeah let's try it let's stick it and our solids move to the castle we will display and cancel also so now let's enter the city name for example New York yeah let's press this button after pressing the button let's wait what happened see we got this error City not found okay so later we will um just to handle this error handling okay so now let's write here we cannot like this picture money okay press enter yeah we got this data and this is updated C Germany 12 percent 74 51 kilometer per hour it has updated okay so let's write Washington is it exist or not yeah that has existed in Washington okay six percent this is the data which has updated based on this Washington so now let's send the left if the name was not existed then we should display an error here so before error handling so we should update our image okay so let's check it we should update this image based on that okay so let's see these objects let's come here to the Wither so here here we have the clouds we should display here cloudy image and here let's come to the last one and here we have that is again here is also we have the clouds but we have different um condition okay Cloud rainy and sunny how different okay so we should display our images file that we have the images Okay so let's see the images whether ivgc these are the images clear Cloud stressal humidity Mist rain and these are the snow windy so we should display our images based on that so for that first of all we will in check this image okay that icon okay so let's come here and we will take that this is our IMG image is equal to instead of this we will write dot icon here we assigned icon to our image yeah icon now let's come here down so here we will light Apple data data let's come here to go have data dot either okay it is an array type with us if data dot to either sorry it is an a tab array0 that mean was equal to equal to with clouds within our image Dot SRC is equal to with images we will write our path like this we have written here the image is in the same folder okay that way there are slash feeder images instead of this we will light this image okay let's come here we have clouds.ng clouds.vng okay and else if if this was is equal to with clear so then we will display the clear condition okay so instead of this we will display clear .png and also except I will add all conditions so I wrote it okay for clouds clear and dance of rain drizzle for all image for all of them so now let's check it okay so let's come here enter the city name for example the shower let's check it yeah it is that has changed so now let's come to right Kabul let's press enter and the image has changed C for example it's right here on and press it see the image has changed with that so it was all about that so now let's handle if the city was not existed for example write something like this the city now take that we will handle that error so to handle the error so let's come here under this input field we will add a new div element and we will assign a class name to this error and we will write here A P tag and we will write here in wire it CT name let's add some design to this okay and we will display it to text align okay and color should be read and also margin top could be 5 pixel and explained and by default okay display none so now whenever we get an inverted code okay so let's come here and before this we will write if a result Dot status was equal to equal to with four zero four four zero four it means that the city name is not valid so then we will just write document that query selector that error dot style dot this display is equal to black yeah so now let's check it see we have here for example this so let's see it see invalid city name okay it displayed for us inverted name so let's add it some that's in top yeah it looks like beta now see it will display us invite name let's for example write Karachi search it but the data has displayed but we still have this error for that removing for the removing of that copy this play it's coming see that has that does disappeared so it was uh wither up using HTML CCS with JavaScript I hope this video was helpful for you if you like this video so please subscribe our YouTube channel and finally thanks for watching

Channel: Code With Yousaf

Views: 13,501

Keywords: weather app using html css and javascript, weather app javascript, javascript weather api, javascript weather app, weather app using javascript, weather app, weather app in javascript, weather app using html and css, build weather app javascript, weather app javascript using api, build a weather app using javascript, weather app using html css and javascript hindi, build a weather app, how to create weather app using html css and js, javascript weather app tutorial

Id: Q1zCAteKg8I

Length: 37min 48sec (2268 seconds)

Published: Mon Mar 20 2023