Build a Responsive Weather App in React JS | Beginner React JS Tutorial

hello engineers and welcome to my channel I am Yash and in this video we will learn how to build this amazing responsive weather app using react and CSS so let me walk you through what we'll be building today on left side I have the desktop version of the application and on right we have the mobile version let's start from the top on top we have this text field which says enter City so you can enter City and it will go ahead and fetch the data from an API for fetching the data we will be using open weather map API for getting our data so let's let's try to enter a new city so I can just say Paris and it will get data for Paris here we have a button to change the unit so I can click here and it will get new data in Fahrenheit for us so basically we are not doing the conversion uh we are actually fetching new data when you click on that button uh in the center we have the city and Country we have this icon once again this icon is dynamic we are fetching the icon from open weather map API at the bottom we have this description of course we have the temperature and in here at the bottom we have minimum temperature maximum feels like pressure humidity and wind speed so uh as I said earlier uh this is a responsive application and along with that we also have Dynamic backgrounds so when the weather is hot we have the sunny background and when the weather is cold we will have this amazing snowy background as you can see in the mobile version here and we can change City here as well let's just say Austin so and hit enter we get weather for Austin Texas right right here and as you can see it's clear sky right now with 27 degrees Celsius so let's do Seattle again how we can actually do Seattle here Seattle and you can see this amazing background so once again as I said it's responsive design and we are going to use react and CSS to make this happen along with that we also have one more dependency which is going to be for our icons right here you can see we have all this amazing icons uh for that we will be using react icons so without further Ado let's get started so I'll open up my terminal and I have already created a folder for us so what I'll do is I'll just say npx create react app uh my bad uh react app and period uh so if you want to name your folder what you can do is just name the folder right here but I have already created the folder so I'll just hit period and hit enter and it will start doing its magic this should take some time depending on your internet speed so we will continue once it's done okay so it's happy hacking uh what we can do is first let's just clear this and LS so you can see I have all the stuff right here known modules and packet.json so before we open our vs code what I can do is let's install the dependency which we need so that's going to be react icons and it should take a while uh okay probably done okay awesome so I'll just do code period and it will open up my vs code and I'll just bump up the size okay okay right here and what I'll do next is let's just do some cleanup we don't need setup test.js we also don't need report web vital we don't we also don't need logo so delete all these files we also don't need app.test.js we also need app.css so delete those files and inside app.css remove all this we will be adding our own CSS and inside index.js remove all this and we also don't need this and we will also remove this we don't want strict mode so I'll just save it and let's create a new folder in site Source uh so first one is going to be a set a set and I'll just drag and drop this pictures uh you can get these pictures from my GitHub repo a link will be in the description below so feel free to go ahead and get this images which we'll be using for our backgrounds and along with that we also need a new folder which is going to be components components and hit enter uh okay so what we can do is uh let's go to our app.js uh probably remove all this we don't have this files anyways and I'll just remove that and let's remove all this so first one is going to be dot app so basically class name will be app and inside this let's just have hello and save it and what I'll do is I'll open up my terminal and I'll just say npm start and it should probably ask me to start on different port because I have already my previous app running so I'll just hit yes but but in your case it should just start automatically and I'll put it right here I'll close my other Safari okay we can see Hello right here and I'll put this side by side okay awesome so we will be start uh we'll start by adding the HTML part and then we'll work on the CSS so I'll close that tab okay so before we start working on the HTML and CSS what we should do is we should go to open weather map API and get our API Keys the reason is open weather map takes like five to ten minutes to activate your API keys so until we are done working on HTML and CSS our API keys will be activated so what I'll do is I'll just bump it up and I'll just say open weather map API just Google it click on the first link and uh just click sign in and it should open up this if you don't if you don't have an account just click on create an account and it should be fairly straightforward after this I'll just say submit uh my details are pre-filled and I'll click here and I'll just see my API keys and here uh if you just create an account you will not see any API keys so how you can get your API Keys is just give it a name so I'll just say whether CSS app and I'll just say generate and you will see your API key right here right so I'll just copy this and what I'll do is Let's uh try to call it and I'll show you right uh it should be deactivated for now but it will be activated don't worry it will be activated in like five to ten minutes okay so what I'll do is I'll copy this one so we want this one built-in API request by city name so I'll just copy this uh put it right here and I'll just once again let's just come back here you know I want this one so ends with 504 and I'll remove this and just paste my API key right here and instead of city name we can just say Paris for now and hit enter and as you can see it says invalid API key so once again just wait for five to ten minutes and uh your key will be working completely fine so we will come back here and check it later right once we need it so that's awesome so what we can do is let's start working on the HTML part uh okay right here let's start by importing our background images so I'll just say uh imp and this one is going to be a sets hot beat uh hot jpg and let's just name it hot BG and what I'll do is same thing for gold background uh this is going to be a set and called jpg and this one is going to be cold BG once again guys uh so assets folder is going to be part of my GitHub repo so just uh click on the click on the link in the description below go there and you can get these images or if you want to use your own images feel free to use those uh just uh make sure to create a new folder a set folder and drag and drop the images right here okay should be fairly straightforward so I'll remove this and hit save okay so let's start by adding the background so what I'll do is I'll just say style here now this is the only inline style we'll be doing in this project the reason is uh our background is going to be dynamic so I just want it to be inside our app component I'll add another curly braces and just say background image hit enter and this is going to be backtick URL and here we'll do dollar and this uh I'll just say let's just do call BG for now so right now it's going to be static but eventually we will come back and make it Dynamic okay uh once we have uh weather data from our API and right now if you see we don't see anything here so what I can do is just say H1 and if we just type in something and we can see we can actually see the background okay but it does still need some styling so remove all this now inside our app uh div we will have another loop which is going to be overlay and inside this overlay we will have another div which is going to be container and inside this container we will have another do which is going to be section uh section underscore underscore inputs now this is my emit string so feel free to copy it and once we are done just hit enter and it will put all the divs right in place so I'll just save it and uh first one is going to be input inside our section inputs uh type of text and name is going to be City and our placeholder is going to be enter City and dot dot and save it and we can see our input field right here after input fill we will have a button and this is going to be fair heat and save it and we can see the button right here so the way you get this symbol is by pressing options shift and 8 on your keyboard for mac and for Windows you can probably figure it out and if you don't want you can just skip the symbol and just put F and C okay uh that's it for our input section and so after this div we will have another section which is going to be dot section dot section underscore underscore temperature and hit enter save it inside this we will have another div which is going to be dot icon so I can oops my bad icon and inside this we will have H3 tag which is going to be so basically this part here uh this two so I think as far as I remember we are using flexbox here so this is going to be one box uh one one part and this is going to be another div so this div is I can div and this is going to be probably yep temperature there okay so inside this we will have all this three stuff so first one let's just say we can say London uh GB and oops my bad uh it's going to be in London and after this we will have image tag now for image source what I'll do is for now I'll just add a static image so I'll just right click and say open image in new tab and copy this link but eventually this image link will be dynamic so we will have Dynamic icons I'll just paste the link here and when I save it I see the icon right there after our icon let's also add the alt tag I'll just say whether I can and after our image tag we will have another H3 which will just say cloudy and save it and we see cloudy right here right uh don't worry eventually we will add styling to it so after this there so after I can div we will have another do which is going to be temperature and hit enter and inside this temperature uh we will have H1 tag and which is just going to be temperature so I can just say let's just say 34 degree celsius so I'll just make it degree C and we see degree celsius right here right awesome so after this so after two divs so this one which is our temperature div and after this which is our section temperature we will have bottom description description and just put a comment here uh eventually we will come back and create a separate component for that so what we can do is let's go ahead and style all this part before we work on this descriptions right so I'll just open this up and what I'll do is uh so actually we are going to do all our styling inside our index.css so let's start by doing just that okay so first we will have uh two variables so first one is going to be section overlay which is going to be RGB a of 0 comma 0 comma zero and this is going to be 0.7 and we can have this here and another one is going to be background background overlay over overlay and this is going to be rgba 0 comma zero comma zero and this is going to be 0.2 and save it so after our route we will have a star tag so I'll just do some basic uh cleaning so margin is going to be zero padding is going to be zero as well save it and okay it's working completely fine box sizing is going to be border box and our font family is going to be verdina and you can have this all this save it but yeah we can keep it like this so let's just keep it like this and after that we will Target our app uh div and this one is going to be width of 100 percent height of a 100 VH and now when you save it we see the full background right after height we will have background position which is going to be Center and we will have background size which is going to be cover and when you save it amazing look at that guys we see the background and I think this is cover so it's going to be pretty responsive so it looks great look at that awesome right okay that's that and after our app component uh after our app div we will have overlay and this one is going to be width of 100 percent height of 100 VH and this is going to background color of variable uh this is going to be background only and when you save it you see like a subtle black background now you can go ahead and play around with this so I'm going to stick to 0.2 but you can come here and make it 0.6 if you want or however you like it okay so for now I'll just do 0.2 after our overlay we will Target our container so this is going to be dot container container and this will be Max width of 800 pixels and we will have margin of Auto and now when I save it it's going to be in Center like even if I increase the size so max width is going to be 800 pixels right so after margin we will have height height is going to be 100 percent and after this we will have display of flex save it okay it's getting in Center uh after that we will have align items Center and justify content which is going to be space between and we will also have Flex direction of column and we will have padding of one REM and now when you save it look at that guys we see it right here the reason it's uh at the bottom is because we still need to add our descriptions but once we add this part which is descriptions uh it will come in center right okay awesome let's move along after container we will work on this inputs part so uh you can have a comment like this so I'll just say top and this is going to be section section is going to have width of 100 and we will have padding of one ram and we will have border radius border radius border radius and Border radius is going to be 0.4 Ram and we will also have color of white and now when I save it uh look at that we still need to add the background color so that's why we don't see anything so after this what we will do is we will have section uh underscore underscore inputs and this is going to be dot section underscore underscore temperature and this one will have display of flex uh align items Center and we will have justify content space between excuse me I'll save it and we see our Flex working just fine we still need to add some more stuff so this is going to have background color variable of section overlay and now look at that guys looks amazing already right okay after this we will have uh let's work on the input field so what I'll do is uh come here so this is going to be section inputs and I'll just Target our input field right there and this will have border of 0.8 pixels 8 pixels uh solid white and save it okay and after that we have bought a radius of 0.4 Ram and we will have background color of let's just say transparent and save it okay it just we can transparent and we will have color of white so our text color is going to be white and padding of 0.5 Ram and font size is going to be 20 pixels and save it okay looks great and after that we will have font weight of 200 and now when I say it looks amazing right so I can have some text here but I still don't like this ugly blue Focus outline so we will remove that so what I can do is come here so once again you can see this blue ugly Focus line which I really don't like it so what I'll do is uh just say dot section inputs and this will Target input again and this is going to be Focus and let's remove the outline so outline is going to be none and save it and now when you focus there is no outline right looks great so once again uh scroll down after that let's work on the button part so this is going to be dot section uh underscore input and this is going to be button uh now guys I know like working on the CSS it's not that fun uh working on JavaScript is much more fun but we still need to do this right so that it looks great so let's just work on this so padding this is going to be 10 pixels and 50 pixels so okay awesome 50 pixels on left and right and 10 pixels on top and bottom and we will have border of none and Border radius of 0.4 m 0.4 M and we will have font size once again which is going to be 20 pixels font weight is going to be 500 and we will have background color of white and save it okay looks great right look at that guys amazing amazing stuff after this we will work on the hover part so when we hover nothing really happens so first we will change it to cursor cursor pointer and we will also have a will change background a little as well so what I'll just do is section once again it's going to be button and this is going to be hover so on Hover what we want to do is make it cursor pointer and also background color is going to be light gray so enter and now if you hover we see light light gray background right awesome amazing stuff guys uh and our input looks great as well okay now we will work on this middle part uh so after our button hover come here I'll just say I can I can is going to be display of flex after that we will have Flex direction of column and we will have align items this is going to be Center and we will have Justified content this is going to be Center as well and now when I save it it just align itself in the center now I I think this name is really bad but uh you guys can change it so basically we are targeting this uh you can maybe change it to description or something but for now let's just keep it like this and after this we will work on the H3 part so this H3 so come here and I'll just say dot I can and will Target H3 tags and this are going to be font size of 15 15 pixels uh save it and after that we will have font weight of 200 and we will have text transform and this is going to be capitalize and save it and the only thing we need to do now is temperature temperature and this one is going to be each one and for this we will just change font size to 60 pixels so I'll just say 60 pixels and save it and look at that guys amazing right so we are actually done with our top part input part and middle part uh the only thing we need to left to do is work on the description part and you might think this looks really complicated but we are going to use grid which makes it super simple to work on it okay so next we will work on that part so I'll close my index.css and what I'll do is uh open this up and we need to create a new file uh which is going to be descriptions so descriptions Dot jsx and we also need descriptions dot CSS file so I'll just say descriptions.css and hit save okay so next let's go to app.js and let's just put it right here so that we can see what's going on so what I'll do here is I'll just say descriptions uh descriptions oh why don't I see it so go to descriptions and I'll just do rafce it will just uh so this is react Snippets you can get this extension by going here and just search for es7 uh this one so this is what you want so es7 plus react reduction snippet if you get this you can do rafc and it will just put all the boilerplate code right so I can show it to you again so I'll just remove this rafce and Bam you get this by getting that extension okay uh I'll close the sidebar save this go back to app.js remove this and let's try again so I'll just say descriptions and now we have it right here save it and we can see description right here okay awesome let's go back to descriptions and instead of this remove this as well so first one is going to be dot section dot section underscore underscore descriptions and hit enter and inside this div we will have another do which is going to be card and side card we will have another div which is going to description uh underscore underscore card Dash icon and hit enter oops my bad I think something went wrong uh okay this okay uh we missed the period here so dot period and Bam right here so inside that what we want is so this one is just going to be the icon so for now what we can do is I can show you how to get the icons so let's go to react icons uh not this one so what you can do is just go to Google and we can Google for react icons and click on the first link which will bring you here and I can for now we can just have a random icon so let's do fa Arrow and let's just do fa arrow down so if I go back to my previous app so this is the error down which we want so I'll go back to I'll go back here and you know what let's check for our API so I'll go back here and okay if I refresh the page and hopefully we get the data it's still loading and Bam okay our API is working completely fine hopefully it's working for you as well so uh just give it five to ten minutes once you register for open weather map API okay uh go back here and what you want to do is just click here okay and go back to this here and I'll just say imp and this is going to be react icons slash fa because uh initials of this icon is fa that's why we want fa if it's something else like for example if you just search for Arrow and if it's AI just put AI if it's BS put BS okay so here I'll just put brackets and I'll just say paste it fa arrow down right okay so I'll close this so that's how you get uh icons guys uh so moving forward I won't go back to the site and search for each and every icon I have name of icons right here in my notes okay so I'll just look it up from right there so next what we want is inside this icon we want the icon right so I'll just do fa arrow down f a a row down and just uh so just self close the the element and after that we will have a small tag and this is just going to be title for now we can just hard code it and say Min and after that after this div we will have h2 tag which is just going to be let's just say 32 degree celsius okay and you see it right here okay so what next we will style it so the thing is right now we only have one but eventually we will create an array and loop over it so that we have min max pressure and all that stuff right so for now let's just go back and style the elements right so this one here right here first so this is description.css and what we should do is we should import it as well so I'll just import and this is going to be dot descriptions dot CSS I'll go back here and let's start by styling it so I'll just say section underscore underscore descriptions and this one first is going to be display of grid and next is going to be grid template columns and it's going to repeat three one friction and after that we want gap of 2.5 RAM and now if you save it we still don't see anything what we can do is actually for now let's just duplicate this like couple of times so 2 3 4 okay and save it and now you see the grid right we still need to add some more styles to it so first one is going to be Dot card this is going to be display flex and we will have Flex direction of column and we will have align items which is going to be Center and we will have Justified content of space between and we will have background color of variable which is going to be dot uh section overlay hopefully it works awesome uh we got it right there next is going to be padding of one rim and we will also have border radius of 0.4 M actually I should have created a variable for a border radius 0.4 M because I just noticed all the Border radiuses are 0.4 M anyways you can work on that next is going to be dot uh description a description underscore underscore card hyphen icon and here we will just say width is going to be 100 percent will have display of flex and we will have Flex direction of row uh align items Center and justify content as Center as well and we will have gap of 5 pixels so 5 pixels margin bottom of 12 pixels and guys you can play around with all the CSS so right now I'll just stick with this but feel free to make changes however you like it okay uh next is going to be dot description icon and we will Target small and we'll just say text transform and this is going to be capitalized okay so the way this works is if we go back to our description look at that right now we have Min but it automatically capitalized it right so if I go back and comment this out you see it just becomes lowercase so I'll just keep it and so the only style we need to add now is for our responsiveness so if you see here if I make this smaller it doesn't really look good right so what we will do is so for devices add media screen and this is going to be and Max width Max width of 1024 pixels so this uh this media query will work for both uh mobile phones and tablets right and next we want to Target one zero to four pixels the thing we are missing here is uh colon and we will Target section descriptions and we will have grid template columns and this is going to be one FR one FR and now if I save it look at that looks amazing guys so when you bump it up we have three columns and once it uh gets below one zero two four pixels we will have two columns awesome right awesome so that's the so actually we are done with all the styling next thing what we need to do is we need to get the data and start filling out stuff right so first let's go ahead and get the grab the data and put it right here right we want data to be live and then we will work on the text field and the button okay awesome so I'll close this.css file and let's also close description.jsx and what we need to do is inside source we need to create a new file which is going to be Weather Service service.j dot JS weather service.js and we will fetch data right here okay okay now let's go ahead and grab our key first so I can just create the variable which is going to be const API key and this is going to be inside weather services so first let's go get our key so I'll go back to open Weather API and grab this key so I'll just copy this and paste it right here okay awesome next what we need to do is let's create a function so this is going to be const get formatted uh weather data and let me close that so that it's easier for us to see this is going to be async function async function and we will have two parameters so City so that we can call for a city right make it Dynamic and we will also have units so units and by default this unit is going to be metric and once again guys all this stuff I'm getting it from the API documentation uh if you want you can feel free to read it so you can see we have units right here so and we it also tells you like what's the default unit and all that stuff uh just go there and read it through okay so for now I'll just keep this opened up in metric and we will return this stuff okay so here what we want to do is const a URL so URL and this is going to be backticks and this URL is basically going to be this so I'll just copy this and paste it right here now we need to make some changes now Q here is going to be our City so I'll just put city right here and our app ID is basically going to be our API key so I'll just say API key and we also need one more thing which is going to be units and this guy over here is going to be unit oh I forgot dollar sign and this is just going to be unit okay our URL looks great next uh let's call the fetch API so that we can get the data so I'll just say fetch and here we will just pass in our URL and we'll have then we will have a response so it's going to be rest for response and we will just say a response.json and we'll have another then which is going to be our data and what we want to do is just return the data so it's going to be right here so this will have all the data right so we can actually test this out so what I'll do is I'll just control log data right here and let's also export this function so export get formatted weather data save it go to app.js and above after our function what we want to do is we are going to make use of use effect hook so I'll just start typing use effect use effect and it should Auto Import for me uh right here you can see if you don't see this make sure you uh put the statement on top okay next we will have a function right right here and this guy over here is going to be this and right now we will have empty brackets but eventually we will have some things right here for now let's just test our uh function right so const uh let's just say data is this is going to be await get uh whether get formatted weather data and for now let's just pass in a static City let's just pass in Paris and uh we should be fine so I'll just save it and if we go back to our app don't mind the train guys okay I'll wait get formatted data okay we need to put this inside a function actually so what we will do is I'll just say const fetch a weather data and this is going to be async async brackets and just do this and just move this inside right here and I will call the function so fetch weather data and save it so let's open our Dev Tools in Firefox so the shortcut for devtools is option command I and you will see this and the shortcut is similar for Chrome as well and look at this we have our weather data right here look at that we have Paris and all this data so maybe I can bump up the size okay awesome look at that guys so but the problem is we actually don't want all this data right we want like some specific data so what I'll do is I'll format the data format the data which I'm getting okay so uh so back to Weather Services remove this console.log what I'll do is I'll use destructuring object restructuring and inside this on the right side it's just going to be data and inside our brackets we will have weather and we will have main from Main what we want is temp uh we want feels like and guys all this stuff is just I'm just using object restructuring to destructure all this data so if I open up main here uh you will see that feels like and all this are properties of the object okay so I'm not inventing something new it's just right there and make sure it matches the property keys and so we will have temp Min we will have temp Max we will have pressure and we will also have humidity and after this after the brackets uh you know what I can do is I can save it so that it's easier for you guys to read after humidity what we want is wind and from wind what we want is speed and after when we want from CIS I think it's for system we want country and after this we want name and what I'll do is I'll return all this data so I'll just say return and return uh one more thing guys if so we are getting weather here right if you open up weather here so which is right here you will notice that it's an array right it says it's an array and the first object is uh has all the details right so what I'll do is we also want to do this so I'll just say const and this guy over here is going to be description and we will also have icon equals to weather brackets zero and we will return all this data right here okay so inside this written statement what we want to do is which we want to return all this stuff so let's start by returning description and we will also written icon will written temp feels like uh temp Min oops my bad so temp Min temp Max uh we will have pressure humidity speed country and name okay so right now if I save it and refresh this there is nothing to control log because we removed our control log but what we can do is go back here and just we can console log right here and I'll just say data save it and we can see the object right here but this time look at this guys it's much more structured okay so one more thing what we want to do is if you notice one thing I can is just this icon code so we need to create the URL so that we can fetch the icon right so the way we will do is we will go back to weather services and we will create a new function or after our API key which is going to be const make icon URL so make eigen URL this is this will take icon ID as parameter and we will just return this statement so the way we you can get the URL is I'll open up I'll say open image in new tab I'll copy this whole thing I'll close it and come back here and I'll just return a string paste it right here and we just want to change this code okay so I'll just grab this put dollar sign open uh curly braces and I just pass in icon ID and now here what I want to do is I'll just say uh I can I can uh you URL and this will be a function so make icon URL and we will just pass in icon right here and now once I save it and refresh this page we should have the icon URL uh come on okay uh something went wrong so what I'll do is okay right here we just got it so I'll open this up and we have the icon URL right here guys awesome right amazing so now we can use this uh so if we actually go here copy this icon URL and go here and we can actually see the icon for Paris right so if I go back to my app and if I just say Paris right here it will bring up data for Paris and look at that that's the icon for Paris guys super amazing right so we are done with the fetching of the data and structuring of data the only thing we need to do is put all this data uh in their respective places so I'll just close this and I okay I'll just close this as well and we also don't want this now and we can close this as well and I also don't want this and I'll just keep this open right okay uh we can probably close this as well okay now let's put all the data right in its place so I'll close Weather Services first we need to create a state so for that we will use use statehook so what I'll do is I'll just say weather and we'll just say set weather and we will use use statehook right here and make sure it's imported right here at the top okay and default value is going to be null and save it next thing what we want to do is instead of console.log we can remove this and we can just set weather to data okay now we will have the weather now we want to render container only if we have the weather so what I'll do is I'll do this and I'll just say weather and then and open parenthesis and I want to move the whole thing so probably this this part from here to right here I'll just cut it and paste it right here and save it so now uh this container will render only if weather is not null okay so next let's start by setting all this uh data right so first we will start by setting our city so this guy over here is going to be let's we can use this and let's just do this and this is going to be weather dot name and then we will have comma and we will have weather dot uh country and now if I save it we should see like the default is Paris okay look at that guys now we have Paris right here okay initially our placeholder used to be London but now we have Paris awesome next uh let's add URL to our image icon so I'll remove this and for Source we will just say weather dot uh I can I think I can so let's just open up our weather Services we want this so I'll go back and just paste it right here and now when I save it okay look at that it just changed and for this guy over here it's just going to be weather dot description description and save it and we get clear sky right here next let's add our temperature now for temperature it's going to be let's let's use jsx here uh and I'll just do this and first it's going to be dollar and we will say weather dot temp and now if I save it we can see 35.27 but the thing is we only want the uh part before the decimal so what I'll do is so after time we will just say talk to fixed and it will remove uh decimals okay now for unit now unit is going to be dynamic so what I'll do is let's just add the degree symbol but uh for now we can actually uh let's let's just keep it uh Celsius right now but eventually we will make this Dynamic okay that's it and next thing is for description so for description we will just pass whether as our prop and you know what we can actually make it dynamic as well so let's start by creating another state so this is going to be const and this is going to be units set units and we will just say U State and default is going to be metric so I'll just say default and it's going to be metric and save it and okay that's completely fine uh next thing here we will make this Dynamic so what we want to do here is so we will create another uh right here and this is going to be unit and we'll just say if units is equal to metric we want it to be C so otherwise it's going to be F okay so right now if I change this to Imperial so Imperial and save it look at that guys we get F but the but our temperature is still 35 because we are still not passing our units here you know what we can do that as well so I'll just pass in units and now if I save it and refresh the page look at that right now it's fair neat now if I put it back to metric and we will get data in Celsius right super awesome guys super awesome now we are passing weather we should also pass in units so I'll just say unit and here we'll just say units and close it and save it now let's uh go to our description so I'll just click here and we are inside our description so first we need bunch of icons because all of the icons are same right now so what I'll do is I'll just copy uh so that we don't waste time just typing it out I'll pause for a second so I just copied all this from my notes so feel free to type it out I'll pause for a second okay awesome next I'll copy I'll bring in my data so just give me a second I'll just copy all the data so that we once again we don't waste typing it out and I'll just put it right here okay this is all the data uh I'll I'll walk you through now this temp unit is uh constant just let me type it out first attempt units is going to be in we should also get our props which is going to be weather units now temp units is going to be units if it's equal to metric once again we want degree C or else we want uh degree F okay and we will also have wind unit uh unit and I think it's just temp unit and wind unit is going to be units unit is equal equal to a metric we uh then the unit is going to be meter per second otherwise it's going to be miles per hour okay so I have it right here and that's what it's doing okay I have six right here so I'll just scroll slowly uh so first is this we have this uh icons right here we have ID we have title we have data and unit so units are based on this constants okay so you can type it out I'll just scroll scroll slowly so one two three four and five six okay make sure you get all this written down and uh make sure you also add ID because it's important okay now what we will do is we will Loop over it and let's remove all this unnecessary divs okay so I'll just remove all these divs that should be it probably and I'll just remove it and now if I save it we should only get one of these right now let's Loop over our array so this is basically our array which says cards and we will just say cards.map so cards dot map and here we will so you can actually say card but we will destructure it and we'll get ID icon title uh we also want data and unit and now we will just return a jsx and our jsx is going to be all of this and I'll just move it inside here let's start by adding key key prop here and key is going to be ID and now if I save it you will see six of these but we still need to add other stuff so first this guy over here is just going to be icon if I save it now you see all these different icons and for small this one here is just going to be title save it and we get all these new titles uh so this guy who let's use jsx here so what I'll do this here uh my red uh let's use curly braces and we will have back text right here and this is going to be dollar data and we will have a space and we will just say unit and now if you save it look at that guys awesome right we have all the data which is real okay this data we are getting from an API uh okay next what we need to do is we need to make this text field work and this button work and also change our background to be dynamic right so let's go back to our app.js uh we don't need description.jsx we also don't need weather services so inside our app.js we want to create one function which is uh let's start by create let's start by handling the units right so that should be fairly simple so what I'll do is I'll create a new function which is going to be const handle units click and this one will have e right here and I'll let this function we will have it for our button right here so I'll just say on click on click we will have e right here and we will just say handle units click and we'll pass in the E right here next what we want is so we'll fetch the button so we'll say cons button e dot current Target and enter const current unit so what I'm doing here is I can we can actually print it out so let's just print out our button uh button and save it and now if I open this up open our console up and let's just okay we should click the button so I'll you know what what I can do is I'll put this at the bottom right here and just bump it up a little and now if I click here a we see button right here right look at that now this is the output now we want to access inner text so I can just type it out inner text and save it and now if I refresh again and click the button okay it's still loading and click the button we see degree Fahrenheit right so we will use this so that we can check right what's the current symbol so uh let's do this so we let's just say const a current unit is going to be button Dot inner text Dot slice and this will be one so now if I print current unit out and save it and click again we only get F right so that now it's easier to compare so let's say is cell CS and we will say current unit is equal equal to C we'll see button Dot inner text so this if it sells yes we want to change it to degree f else we want to change it to degree C and next thing we want to change this we'll say set unit and set unit is going to be is Celsius okay uh I think we have a problem with the name so I'll just sell okay uh let's just select all this uh is sales CS my bad right here okay perfect so send unit is going to be is Celsius metric if it Celsius we will return metric or else we will return Imperial okay awesome now if I save it it should work completely fine so and uh one more thing we need to add is our use effect should reload if our units changes right so I'll put units right here so now if I save it refresh the page and now if I click on Fahrenheit look at that guys our units just changed okay awesome now let's make our text field work so for our text field what we want is let's say we want to create another state this is going to be City set City and this here is going to be use state and by default let's skip Paris so I'll just say Paris right here and instead of passing Paris right here we will just say City and now if I save it it should work completely fine uh just wait a second awesome we have Paris okay now we want to handle our text field so let's just say const uh Enter key pressed and I will just say e and once again the same thing now this we will bind to our input field so input we will say on key down and this one is going to be Enter key pressed and here it's pretty simple so we will look for if Enter key is pressed or not so I'll just say f e dot key code equal to 13. now 13 is just a key code for Enter key and we will just say set City and this is going to be e dot current Target dot value and we will say e dot current Target dot blur okay so blur so what this does is it will so let's just keep it like this and now if I just change it to London and hit enter key you will see oh okay it still does not load because we want to fetch uh data again when City changes as well so now if I save it look at that guys we get weather for London right now if I search for Paris again so we can also do Austin and we will get weather for Austin Texas right so so what this does is so after searching let's say Paris right now if I hit enter our focus is still on the input field you can see this cursor blinking we don't want that right so uh let's uncomment this out and now if I search for Austin you will see that we lose focus and we also get the data right awesome so what we need to do now is we want to make our background Dynamic right so in order for us to do that we want one more State and this is going to be our final State uh we will say const and this is going to be BG and we also want to set BG and by default our uh by default it's going to be hot background and now uh scroll down here and inside here we will just change it to BG and now if I save it by default it's hot right and even if I search for Seattle we still look at that it's 14 degree celsius but we still have hot background so for that what we will do is inside our use effect hook after we set our weather data so I'll just say Dynamic background what we want to do is threshold create a constant units and this is going to be equal equal metric if it's metric we want threshold to be 20 for Imperial it's going to be 60. so basically for Celsius we want to if the weather is below 20 uh equal or below 20 we will set it to cold background and if it's Imperial basically Fahrenheit we the threshold is going to be 16 right it's it's just random uh data dot temp so this is going to be our data which we get right here from our API we will check for threshold threshold and set BG is going to be called VG okay so if our temperature current temperature is less than or equal to our threshold it will set it to cold background else we will set BG to hot BG and now if I save it and refresh the page and now if we search for Seattle and hit enter look at that guys we have called background awesome right uh okay that's that I think we are pretty much done with the app and our app is completely responsive guys so this is going to be our tablet version this is going to be for mobile phones which looks amazing you can also change the units and it fetches new data for you which is amazing next uh let's just search for something else let's do London we get weather for London we can change the units which is super cool and let's also do Paris okay awesome guys uh okay uh so project link will be in the description below feel free to go there and uh use it however you like it if you guys have any questions feel free to leave them in the comment section below and I'll try to help you out as best as I can and I'll see you guys next time thank you

Channel: Yash Patel

Views: 37,322

Keywords: programming with yash, react weather app, react weather app tutorial, react weather app project, weather app react hooks, react js weather app, react js project weather, weather app react js, weather app react api, create weather app react, weather app in react, how to make weather app in react

Id: 7SmMUS3rWjs

Length: 59min 59sec (3599 seconds)

Published: Wed Jul 13 2022