How To Create Weather App Using React JS In 2024 Step By Step Explanations

welcome back to another video of related stack in this video we are going to create weather app using react.js as you can see here we have power weather app here we will write location of any City like New York and if we search then it will give real time weather stats of New York City and also provide data of humidity and wind speed so let's create this project using react.js now we will move to our desktop screen let's create our react project past we will create a new folder naming it weather app and we will open this folder in vs code editor now we will open an integrated terminal we will write npx create react app Dot so it will create our react project in this weather app directory so we will hit enter now hours yet project has been created now we will run it to do so we will type npm start we are not using this CD command because we are in weather app directory itself so we will direct type npm start and hit enter now our react project is running successfully now we will clear this default react project to do so we have to go in SRC folder in app.js and we have to remove header tag and we will also remove this imported logo now we will save it now our default react project is cleared we will change title of this stable file so we have to go in public folder index.html here is the title tag so here we will write whether app and save it now our title of this project is also get changed now we will create folder structure for this project so it is RC folder we will create new folder naming it components inside the component Builder we will create asset folder inside the corporate folder we will create one more folder which is weather app folder so here we will write weather app inside the weather app we will create a new file whether F Dot jsx and we will convert this GSX file into component using rafc now our component is ready now we will create a CSS file for this corporate in weather type folder we will create a new file weather app CSS now we will import this CSS file into our corporate so we will write import end directory of our CSS file we will save it and our CSS file is imported successfully now we will Mount this component on this screen to do so we have to go in the app.js here we will write opening Arrow weather app slash closing Arrow we will save it now our component is successfully mounted on the screen first we will insert all the images in the assets folder and then import all the images in this component so to do so we have to right click assets folder reveal in File Explorer here you can see our asset folder is there but nothing is inside so we will copy required icons from this folder to our assets folder SRC components assets folder here we will paste our icons now we have inserted all the images in the resets folder now we will import these images in this component to do so we will write import now we will give a name to this image Raw and our directory so we will write double dot Plus folder Plus search dot PNG like this we will import all the images from the assets folder I had imported all the images from the asset folder and name it according to the icon type now we will build this component first we will give this div a class demo container inside the container we will create a div with class name top bar inside the top bar we will create an input tag with class name City input now we will add placeholder to this input tag we will give placeholder search now we will create a dip with class name search icon inside this search icon we will use image tag we will use SRC is equal to search icon now we will save it as you can see our input field is here with placeholder search and our search second is here now we will give some properties to container class name we will give width of 607 pixels 829 pixels margin Auto margin top 75 pixels border radius of 12 pixels background image in linear gradient I had provided 180 degrees rotation of this gradient with two color codes now we will save it now our container is ready now we will give a style to top bar class name we will give display clicks justify content Center gap of 14 pixels padding top 60 pixels now our input field and search icon is align centered now I will give property store input field we will give display Flex width of 362 pixels height of 78 pixels background burden none and outline none we will save it now our input tag gets bigger and we have changed the background color of the input field and the I had removed the border and outline from this input tag now we will add water radius 40 pixel padding left 40 pixels color code we will save it now our input build border gets curved we will increase Bond size to 20 pixels and font weight to 400 we will save it now our input field text get bigger now we will give some properties to this search icon game display Flex justify content centers a line item Center so our icon gate center of the div we will add width of 78 pixels height of 78 pixels background background code we will save it now we will add border radius to the search icon cursor pointer we will save it now our input field and search button is ready now we are going to back to the jsex file here we will create the remaining part of the component we will create a div with class name weather image inside the weather image we will insert a image tag inside the image SRC we are going to insert Cloud icon we will save it here I am using Cloud icon for the temporary use after this dip we will create a div with class name whether them women are recorded this data with 24 degrees Celsius for temperature use we will create a dip with class name whether location inside the weather location we will write London now we will create a div with class name data containers inside the data container we will create a div with element class name inside the element we will insert image tag with class name icon we will created him with class name data inside the data div we will create a div with class name humidity percentage if we will write 64 percent after this we will create with class name text here we will write humidity now we will create a copy of element div here I had created a copy of element tag and we will change the humidity to wind speed here we will change 64 percentage to 18 kilometers per hour now I will insert images in this images tag so here we will insert humidity icon here we will insert wind icon now we will save it now I will give sub properties to whether image class name I will give margin top 29 pixel display Flex justify content Center we will save it now we will give properties to whether temperature class name we will give display Flex justify content Center color white font size 120 pixels born to weight 400 now our temperature text gets bigger and get white in color now we will give properties to now we will give properties to this weather location we will give display Flex justify content Center color white font size 60 pixels bond with 400 we will save it now we will give properties to this data container we will keep margin Talk 50 pixel color white display Plex justify content Center we will save it as you can see our changes is reflecting on the screen now we will give properties to this element class name we will give margin Auto display Flex align item Flex the start gap of 12 pixels we will save it as you can see our changes is reflecting on the screen now we will give properties to this data class name we will give pot size 34 pixels font weight 400 we will save it as you can see our changes is reflecting on the screen now we will give properties to this text class name we will give font size 20 pixels Pawn to weight 400 we will save it now we will give properties to this icon class level we will get margin top 10 pixel now our desired of this weather app is finished now we will add functionalities to this weather area before writing the functionality we have to get an API key from open weather map to fetch the data from the server which we are going to use in our weather app the first we will write here open weather map here we will open this website to get the API key first we have to login to this site if you don't have an account or the site you can create your account I already have an account so I am going to login with a debt account I had successfully logged in now I will go in API key section here is the API key which we need so we will copy this API key from here so we will create a variable let API here is equal then we will paste our key here now we will save it now after getting the API key from open weather map one more thing we will need that is hundred client extensor so we've been download Thunder client extension and install it by using thunderclind we can say response data coming from the API now we will back to our jsx file now we will create a search function for our search button we will create a arrow function so this is our Arrow function here we will write all the Logics to fetch the data from the API and display it to our weather error first we will add this function to the search I can give we are given right on click passing an arrow function here we will write search now we will save it inside this touch puzzle we will write logic to get the value from this input field so we will write post element equals document dot get elephant by class name here we will write class name of our input field as we can see I had given City input class name to the input tag so we will copy it from here and we will insert it in get element by class name now we will check if the input tag is empty or not to do so we write if enabled then the I had used CT input only in this input tag so we will write here element 0 dot value if it is equal to empty string then return 0 if we have nothing in the input field and somebody is searching then it will return 0 means function is not going to execute now we will see how to get data from the API so we will write here weather map API so here is the official website we will open it and we will go correct weather data we will see API documentation now when we scroll here is the example of EPA calls so how to get the data to make the API call we have to use this URL so we will copy it and we will paste it in the thunderclight now we need an API key here so we will copy our API key from the code and paste it inside the app ID if I click on Saved then it will give me the current weather data of London City so let's click the send button in our data we are getting temperature in Kelvin but we want Celsius to request data in Celsius we will modify our URL I had added end percentage unit equal to metric and if we send then we will get temperature in celsius now we can use this temperature in our component let's copy this URL inside this first function we will create a variable let URL equal to we will paste our copied URL so here we have the value of input field now we will use this value to get data from this URL so here we can say the London is hard coded we need to insert here the data from the input tag so first we are going to use template literals by using template literals we can insert a variable in any string to convert this string to tablet literals we have to remove this from here so we will insert backtick here and here also we will replace it with backtick now we had replaced it with backtake now instant of London we've been used tablet literals to insert a variable here we have to use dollar side parenthesis and inside this we will write the variable name so we are going to use element 0 dot value which is value of our input field so we will copy it from here and we will paste it here now we will save it after that we will replace this hard ported API key with our API key variable dollar sign parenthesis inside parenthesis we will write API K and we will save it so now our URL is ready now I will use which API to get the data from the API to our variable before using the page API we have to convert our function into a sync function is sync now we will write let response equal await pitch and inside the page we will pass our URL we will get this data in our response variable we will get data from the API and editable story response variable now we have to pass the data into Json format to do so we will create a variable in the data equals response which we are getting from the server dot Json method if we click on search icon it will get our input Fields data into element 0.welling if element 0 dot value equals to empty string then it will return 0. if it is not empty straight then our URL will be constructed in the URL we will get what we type here in this element 0 dot value and we are using our API key to fetch the data using this URL we are fetching the data and store it into the response variable after getting data in the response variable we are parsing that data into Json using dot Json method so here also we will write a bit so it will wait until our data is converted to Json now we will pull out the data which we required from this data variable and we will show that data on our screen to do so we will first we are going to grab the element using class slip so we will write cost humidity equals to document dot get anywhere by class name and we will hear write humidity percent after that we will write caused wind equals document dot get element by class name here we will write wind rate so here we will change it to wind rate now I am grabbing humidity percent and winter rate to change the inner HTML so here we will grab two mode Elements which is caused temperature equal document Dot get enabled by last name here we will pass whether template we will create one more element cost location equal document Dot get an event by class name here we will write weather location by using these four element we can easily change the data on the weather app first we mean update humidity so we will use KVD zeroth element Dot either HT event equals as we can see from our thunderst client we did humidity which is inside the main key inside the menu we have humidity so we will write here data Dot main Dot humidity now we will update the wind so we've been writing wind 0th element Dot either HTML equals to so we have to check where is the wind data in this API as we can see in our response there is wind key inside the wind key there is a speed which gives quick wind speed so we will write here data dot window dot speed now we will update temperature so we will write temperature zeroth element dot end up HTML equals to let's check where we get temperature so here in the main key there is temperature Key which provide us the current temperature in Celsius so here we will write data Dot mail dot temperature now we will update location so here we will write location 0th element dot either HTML equals to so let's take where we get location so here we can see we directly get name key and location so we will use data dot enable now we will save it let's check the functionality though if we click here and write name New York and if you search then the temperature is changing our city never also get update humidity also get update will dispute also get updated now we have to add in the temperature Envy date degree Celsius in the humidity we will need percent test and it windy speed we will need kilometer per hour so here in the heavy duty we will concat a string which is percentage in the wind speed we will concat a string which is innovators in temperature we will concat degree Celsius now we will save it and we will check again search now we are getting degree Celsius in the temperature percent in humidity and kilometers per hour in in wind speed now we have to change this icon dynamically according to the data to update the weather icon first we have to go to thunderclight here as you can see we have weather Key and it is providing the icon code what is icon code as you can see open weather map provide us icon code so here are the icons for that icon code if we are getting code 0 1 day so 0 1 means clear sky and d means day and N wins night so we are getting different types of code if we got 0 3D milk scattered cloud so we are going to display our icons according to the weather icon property as you can see we are getting 0 40 and we had not used that code till now now we are going to give a structure so we will get the weather icon code and it will display our digital icon red icon snow icon and clear icon according to weather icon code it to update our icon so here we will write paused variable name W icon and a function name that W icon equals to use state as you can see in our snippet news state is display when we click here it will automatically include use this state from react so here we will initialize W icon with Cloud icon so w icon is a variable where we initialized it with Cloud icon and set W icon is a function to update the data in W icon so here we will write P power data Dot as we can see in weather K there is an array inside the array this object is there to access this object from this as a we have to write data whether zeroth enabled dot Icon by using we will get whether icon code so we will copy it if it is equals zero one day or we will paste again our data method icon equals 0 1 10 so we will state w i curve in here iconic so if the code we get is zero one day or 0 1 M then we will that clear icon code on this Trail now we will use ticker we will save it now else if we copy this statement from here and we will paste here and we will change the icon code from zero 30 0 2 L if we get 0 to D or 0 to n then we will set W icon Cloud icon we will copy this code from here we will paste it again if the icon code is 0 3D or 0 3 and then we will use result icon we will save it we will paste it again if icon Port is 0 40 or 04 n then we will set W icon is digital icon now one type work we paste it and we will change if icon code is 090 and 0 9 10 then we will set W icon red icon again we paste if icon code is 10 D or 10th and then we will set W icon rail icon we will save it one more time we will paste if icon code is 13 day or 13 and then we will set W icon is no icon we will save it and we will write here l for all other cases we will set W icon clear icon now we will save it and now let's check whether it is working or not so here we are going to write new York and we will search it as we can see our icon is changing because for New York we are receiving 040 code which we had used result icon and it is showing result icon now we will remove the decibel places from the temperature and wind speed to do so we have to go here we will wrap this in math dot flow so I had wrapped these values in math dot floor which remove the decimal places now we will save it and we will search it again now the decimal is removed from the temperature into wind speed now our project is ready so we will check other cities also so I am going to check for the Switzerland as you can see our project is only functional now so thanks for watching this video in our next video we will create more projects like this

Channel: GreatStack

Views: 137,796

Keywords: weather app in react js, weather app react js, weather app using react, weather app using react js, make weather app in react js, create weather app in react js, weather app, how to create weather app using react js, weather website in react js, react js tutorial, react js, react js project

Id: 7JqdjWB88Kk

Length: 39min 47sec (2387 seconds)

Published: Wed Aug 16 2023