How To Make Weather App Using JavaScript Step By Step Explained

hi guys welcome back to another video today in this video we will learn how to create a weather app using HTML CSS and JavaScript this will be very good JavaScript project for your resume or portfolio here you can see we have this search box where we can enter this city name let me write another city name here and click on the search icon you can see it will update the weather icon and temperature city name and humidity and wind speed let me write another city name here you can see it is changing let me write another city name you can see this icon is also updating and you can see the current temperature and humidity and wind speed we will create this beautiful weather app using HTML CSS and JavaScript so keep watching this video till the end and before starting this video please hit the like button and also subscribe my channel easy tutorials now let's start the video here I have this folder and in this folder I have added one HTML file one CSS file and another folder called images and in this one you can see some icons you can find all these icons download link in the video description and let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is a CSS file here I have added the margin padding font family and box sizing these CSS properties are applicable for all the htfl element in this HTML file I have added this link tag with the file name style.css so it will connect the HTML and CSS file and here we have the web page title whether app easy tutorials now we will add the CSS so let's come back to the CSS file and here let's add body and here we will change the background so let's add one background color here after adding this let's come back to the folder and open this HTML file with any web browser so you can see this dark color on the complete web page let me close this browser and I will open it with the Visual Studio code extension called live server so you can see the same webpage again which is in dark color so this webpage will be refreshed automatically whenever we will add any changes in the code file after that let's come back to the code file and in this HTML file within this body tag let's create one div with the class name card within this card we have to create one search box so here we will add one div with the class name search and within this search we have to add one input box and one search button so here we will add the input field input type will be text and here we will add the placeholder so in this placeholder I will write the text enter city name and here we will add spell check false now in the next line we will add one button so here we will add button and in this button we have to add one icon so let's add the IMG tag and file path of the search icon so it is Images slash file name search dot PNG after adding this let me come back to the website and here you can see this input field and this search icon after that we have to add some CSS so here you can see we have the class name called card so write this class name here in this CSS file and here we will add some CSS properties for this card in this card I have added the max width and width then we have added the background in this background I have added the linear gradient color and this is the colored white that will be the text color inside this card and after that we have added the margin 100 pixel from top and 0 from bottom left right Auto then we have added the Border radius that will make the corners round and we have added some padding that will be a space inside the card and text align center now you can see this gradient color in this box and this box is in the center and now we will add the CSS for this search so let's come back and here you can see we have the class name search so write this class name here and for this search we will add width width will be 100 percent then we will add the display flex and align items Center then we will add justify content this will be space between so the input field and search button will be aligned horizontally side by side after that we will add the same class name and in this one we have added the input field so write input and now we will add the CSS for this input field for the input field I have added border 0 outline 0 and background color then color then I have added some padding and height and the Border radius then Flex 1 and margin right and font size after that you can see this input box is looking good next we have to design this button so let's come back and here we will add the same class name search and in this one we have the button so let's add the CSS for the button here also we will add the same thing border 0 outline 0 and background after that we will add the bottom radius so the Border radius will be 50 it will be Circle next we will add the width 60 pixel and height also 60 pixel and cursor pointer in this button we have the search icon with the IMG tag so write IMG and for this search icon we will add width so divids will be 16 pixel after adding this let's come back to the website and now you can see this input field and search button is also looking good next we have to display the weather detail of any City so first we will add some random details then we will update it using the API so let's come back and in this HTML file after this search we will add another div with the class name weather and in this one let's add the IMG tag file path of the image so here we will add any random image so let's add rain dot PNG and here we will add the class name so the class name is weather icon after that we have to display the temperature so here we will add the temperature in H1 tag and we will add one class name also so let's add the class name temp and here we will add the temperature 22 degree celsius so let's copy the degree celsius from Google we will copy from here so you can right click this 22 degree celsius and after that we will add the city name in h2 tag so in this one we will add one class name City and here we will add any city name and after adding this let's come back to the website you can see this weather icon with a temperature and city name so next we have to display the humidity icon and wind icon and the value so let's come back after this H2 let's create another div with the class name details in this details we have to create two columns so let's add call this is for the first column and in the first one let's add one image so I will add the IMG file path humidity dot PNG and after that we will add the text in div so let's create one div and in this one we will add P tag and one class name and let's add 50 percent and here we'll add another text now we will duplicate this column here we will update the image it will be wind here also will change the class name it will be wind and here we will update the text wind speed here we'll add 15 kilometer per hour foreign so in this weather we have the image with the class name weather icon so let's copy this one and add it here for this weather icon we will add the width it will be 170 pixel then we will add the margin from the top 30 pixel after that we have the title in H1 H2 so within this weather we will add H1 for this H1 let's add the font size it will be 80 pixel and font weight 500. let's duplicate it and here we will add H2 and for this S2 we will update the font size it will be 45 pixel then font weight is 400 and next we will add the margin top minus 10 pixel now the size for the weather icon and text is perfect now let's come back and here we have the class name details let's copy this and add it here in this CSS file for this detail we have to add display Flex because we have to create two column align items Center and justify content space between then we will add some padding padding will be 0 and 20 pixel 20 pixel from left and right side then we will add the margin from the top to add space from the top so margin top 50 pixel so now you can see this humidity in the left side and wind speed in the right side next we have to update the size of these icons and text so let's come back and within this details we have created columns so let's add that class name call and in this one we will add display Flex align items Center and text align left and then we will add call IMG because we have added the icons with the IMG tag width will be 40 pixel then margin from the right side it will be 10 pixel now you can see perfect size for these icons next we will add the CSS for this text which is 50 and 15 kilometer per hour so let's come back and here we have the class name for this text which is humidity and wind so at this class name here comma wind here we will update the font size font size is 28 pixel and margin top will be minus 6 pixel now this design is looking perfect next we have to update this weather information whenever you will enter any city name for that we will use the API so let's open Google and open this website open weather map dot org here you will get the free API here you have to create an account so let's click on this sign in here we will click on create an account create a new account enter the username email ID password and repeat password here in this company field I will add my name and purpose is education save it will send you a verification email open your email ID and verify the email then click on API keys here you will get this API and we have to use this API in our code file here in this navigation menu you can see API let's open this page in new tab scroll down and click here current weather data API doc let's click on this link here to scroll down and come here built-in API request by city name so just copy this one and paste it in the URL here you can add any city name let's add Germany and here you have to enter the API key so let's add this API key here and click enter here it is displaying the error message invalid API key it means the API is not activated now it may take couple of hours to activate the API key so wait for some time let the API key activated after activation of the API key you will see the weather information in this Json format here you can see the CD name that we have added in the URL then you can see the temperature here it is not in the degree Celsius so to get the temperature in degree celsius let's come back and here you will see option to add the unit you can see we have the standard metric and Imperial and the by default unit is standard so we have to add the metric unit so let's come to this URL and here we will add units equal to metric after that you will see the temperature information in degree Celsius and if I change the city name here you can see temperature is changing and the city name is changing so we have to display these data on our app so let's copy this and come back to the code file in this HTML file Above This closing body tag here we will add script script open and closing tag and within this let's create one variable with the const keyword let's add the name API key here we will add the API key and next we will add one more const and it will be API URL here we will add the API URL so let me add the complete URL in this one and from here we will remove this API key this one let me remove this and add it here we have added the API key in this variable and remove this app ID and remove this city also so in this one we have the URL and we have added the unit metric in this URL we have just added the unit metric and let's add DCd also for now here we will add and Q equal to and let me add one city name Bangalore and after that here we will add one async function and we will add the name for this function it will be check whether const response equal to await Fetch and in this fetch we will add the URL which is API URL so at this API URL in this one and at the end of this API URL we have to add the API key also so to add that API key we will add this backtick this is not code this is back tick and in this one let's add and app ID equal to this API key like this in the next line we will add Val data equal to a weight response dot Json now this data will have all the information about the weather from this particular city which is Bangalore so let's display this data on our web page so let me display it in our console so for that we will add console DOT log and data that's it after adding this let's come back to the website and inspect then click on console here it is not displaying anything so first we have to call this function so just copy this one and add it here just above this closing script tag so whenever the web page will be loaded it will call this function so now again come back to the website you can see it is displaying the weather information in this Json format in our browser console so let's expand this one here we have the Main and in this main we have the temp which is temperature we have the name Bengaluru then we have the weather and in this weather we have the added one and in the first array which is index 0 we have the weather condition like clouds and here we have the wind and in this wind we have the wind speed and we need the humidity it will be there in this one let's open this Main and in this Main you can see humidity 32 so we got all the informations now we have to display this information on our app so let's come back we have to update this temp City humidity and wind information according to the data coming from the API so we will select all these element and we will update the data so we will add document dot query selector dot CT so it will select the CT element and inner HTML will update the text written in this element and here we will add the data which is here this data then Dot and in this data let's come back to the web page and you can see we have name directly we have the name so let's come back and here we will add data dot name so it will update the city name now duplicate it and here we will add the next one which is temp and to get the temp data temperature data let's come back and here you can see we have the temperature inside this Main first we have the main and in this main we have the temp so let's come back and here we will add data dot main Dot temp now again duplicate it here we will add humidity and here also we have the main and humidity it is here Main and humidity next we need the wind information so it is here wind then speed so again come back let's duplicate it here we will add wind class name and here we will add data dot wind dot speed after adding this now we will come back to the website and you can see it is displaying the correct data which is 26.7 then Bengaluru humidity 31 and wind speed 4.63 but we need the percentage degree celsius and kilometer per hour so let's come back and after this step we will add Plus and copy this degree Celsius in this humidity we will add plus colon percentage and in this speed let's add the Plus and column a space kilometer per hour so you can see this one degree Celsius then 31 percent and 4.63 kilometer per hour wind speed next we have to round off this temperature so it will display only the integer either 26 or 27 degree celsius so let's come back and here in this stem let's add math dot round and in this one add this data main temp that's it round dot math data main temp after that you can see 27 degree Celsius right now it is displaying the information of the particular City that we have added here in this API link but we need to enter the city name in this input box and that City information will be displayed in this app so let's come back and here we will remove this Bangalore remove the city name we will add the city name through this check weather function so here we will add City and in this fetch we will add API URL plus and City Plus we are adding this city here now whenever we will call this check weather function we have to pass the city name so this city name will come from the input field so after this const here we'll add two other variables so let's add const search box equal to document Dot query selector this class name search and in this search we have the input and button so write this one dot search input so it will select the input field duplicate this line and here we will add search BTN and it will be button when people will click on the search button it should send the city information in this check whether function so search BTN dot add event listener and the event is Click comma Arrow function in this function we will call this check weather so add this here and this check weather will have the city information written in the input field so to get the data written in the input field We'll add the search box Dot value so this search box dot value will give the city name written in the input field and it will pass the city name in this check whether and it will be added in this API and it will give the information of the particular city after updating all these things let's come back to the website and here it is displaying the default information that we have added in the HTML code but if I write any city name here and click on the search icon you can see it is updating the weather information 27 degree celsius Bangalore to 30 percent and 5.66 let me write another city name New York it is displaying the correct weather information right now it is not updating the image here because we have not added any code to update the weather icon or weather image so to update this weather image let's come back and after updating these text we have to update the image so we will update the image according to the weather condition so let me come back and if I open this here you can see we have the weather and in this weather we have the main this main is the weather condition right now the weather condition is clear and if I open this one and here you can see weather condition is clouds so they are multiple weather conditions you can check on this website so I already have the images for all the weather conditions which is this one so we will update these images according to the weather condition now let's come back and here we will add if data dot weather zero you can see this weather in this zero index then we have main so let's come back and here we are adding data dot weather 0 dot Main so this main will keep the weather condition we will check if it is clouds like this so if it is clouds then we have to add the cloud image so we will fetch this element where it is this one weather icon so here we will add const weather icon equal to document dot query selector wither icon and add it here wither icon dot SRC it will update the source file equal to the exact file path Images slash clouds dot PNG you can see in this images folder I have the clouds.png so when the weather condition is clouds it will display the clouds image now let me add the other images for other weather condition so we have added different image for different weather condition clear then missed drizzle so after adding this let's come back to the website and here if I write Bangalore it is giving an error so let's come back and here we have added the class names so we will add one dot also after adding this dot wizard icon let's come back and if I enter the city name search you can see the weather icon is also changing let's add another city name here also we have this same icon we have the same cloudy icon then New York you can see this icon so it is updating all the information when we entered the city name and click on the search icon now let's refresh the website and by default we are getting all these information so we have to hide this information and it will be displayed when you will enter any city name so let's come back and here we have the weather so let's copy this one add it here in the CSS file and for this weather we will add display display will be none so it will be hidden you can see we have only the search bar and this search icon and if I enter any city name here and click on search icon it will not display the detail because we have added the display none so we have to make this display block when we will enter the city name so let's come back here we can remove this console and after this image let's add document dot query selector dot weather dot Style dot display so it will be block so after adding this if I write the city name here click on search icon it is displaying the information zero degree Celsius and we have the icon here website it is hidden and if I enter the another city name you can see it is just playing different icon temperature city name and other informations next we have to add one more thing suppose we enter the wrong city name and click on the search icon so it is displaying undefined and the previous data so it should display one error message so let's come back and here we have the search and after the search we will add one div with the class name error in this one we will add one message invalid city name like this so you can see this message here invalid city name so first we will add the CSS for this error let's copy this one add it here in the CSS file and here we'll add text align left then margin left it will be 10 pixel then font size will be 14 pixel and margin top 10 pixel so it is displaying here so if I refresh the website this error message is displaying by default so we have to hide this error message and it will be displayed whenever user will enter any wrong city name so let's come back and here also we will add display none so it is hidden you can see we have only search bar and search icon there is no error message but if I enter any wrong city name here it is not displaying anything so let's come back we have to display the error message here we have added const response await fetch URL so here we have to check the Response Code so we will add if response dot status equal to 4 not 4. it means if the city name is invalid it will give the status 404 then we have to display the error message and we have to hide the weather information we will add document dot query selector error dot Style dot display equal to block so that error message will be displayed let's duplicate it and it will be weather and it will be none so whether information will be none that will be hidden here we are adding if so again we will add else and let's add the remaining thing in this else condition copy this one and paste it inside this else so when the status code is not equal to 404 then only it will update the data and we need one more thing just copy this display block and add it here and here we will add display none so that error message will be hidden when it is displaying the data after adding this again come back to the website and if I enter the city name click on the search icon it is displaying the correct information if I enter the wrong city name here and click on the search icon you can see it is displaying invalid city name let's add another city name search so finally we have completed this beautiful weather app using HTML CSS and JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 144,693

Keywords: JavaScript, JavaScript Project, JavaScript Mini Project, JavaScript College Project, JavaScript Weather App, Weather App using JavaScript, Weather App Using HTML CSS JavaScript, Weather App Source Code, JavaScript Project Code, Web development, College Project In JavaScript, Technology, Coding, Computer Science, Engineering

Id: MIYQR-Ybrn4

Length: 41min 58sec (2518 seconds)

Published: Fri Mar 10 2023