Creating a WEATHER APP using React.JS | Glassmorphic Design | React Projects | GeeksforGeeks

Key Takeaways

Geeks for geeks has a challenge for you the 390 challenge choose what you want to learn in 2024 and aim to complete at least 90% of the course in the next 90 days and if you do that you get back 90% of what you paid for the course we believe you can do that now all you got to do is commit to your success commit with geeks for Geek geek for geeks has a challenge for you the 390 challenge choose what you want to learn in 2024 and aim to complete at least 90% of the course in the next 90 days and if you do that you get back 90% of what you paid for the course we believe you can do that now all you got to do is commit to your success commit with geeks for gek for geeks has a challenge for you the three okay guys now I think the audio might be fine so we can start perfect right so hey everyone I'm hasel J your Mentor at Geeks for geeks and today we are going to build this awesome weather application so this is going to be a weather application and you can see that it has a glass morphic look although you can make it a lot of better uh with some more uh properties you can show things which you get from API which we're going to discuss today and uh definitely uh this is a simple weather application which would be very useful for those who are trying to learn react and don't really know how to just show things in their page if they get some data from some location like I got this data from my weather API similarly you can create your own back end and from there also you get get some API like user data or any the kind of data so similarly you can do these things but today we're going to build this weather application we're going to get this complete data into our reactj application first so for that guys I'm going to discuss a few things there are some Basics which we'll see to actually get that data and I'm going to start things from scratch and there is no such prerequisits but I would say you must know at least HTML CSS JavaScript so that you can cope up with me else we are going to use very basic things like in react J we're going to use next J specifically but in that also we are just going to use very basic things like it's like even if you don't know those things you can easily see and learn those things right now okay so let's do that but before that guys I'm going to mention about Geeks for geeks 390 challenge so Geeks for geeks has bought a 390 challenge for all of us and basically in this challenge if you purchase any course in the month of January and you finish 90% of that course within the next 90 days so you will get your 90% of the amount as a refund so it's a very great challenge for that you just need to visit the geks for geks website and there you can pick any course you like okay so I'll just take you there I hope my yes everything is fine so you can see that if I visit this website you can see here we have the steps so the gek for website we have some steps and these are the basic three steps which you can follow to get the uh most benefit and then we have the courses mentioned and all the courses actually have this benefit so it's totally up to you what course you like you can check out all of the courses here right so uh some of the courses which I personally have monitored or you can see that this was a great course full stack development with react and then one more course which I would like in future if I want to learn something then I can go with DSA plus development uh this is a combination of two courses it's like you would learn DSA also and development also web development also and some extra things also would be taught here so you can check out any course here and uh you would get the first of all description a good description in a video also then you can see some alumini work and then there are some steps and then some uh more details about the course and then the phases what you learn and when you learn okay so definitely check out these and I hope everyone can get the most out of this 390 challenge perfect now guys let's continue and we are going to build this so for that first of all we need to have some installation so let me just uh give you a quick view what we really need first so first of all we're going to use vs code ID so it must be installed so you can just go to to vs code and you can just download and install the setup and while installing the setup of vs code just check all the check boxes so that you get all the shortcuts which I am using okay perfect now one more thing which you can do is you need to install nodejs since we are using reactjs that is next tojs we need nodejs pre-installed okay so for that you just need to go to nodejs website if your nodejs is not installed so you can come here and you just need to click in this uh LTS uh whatever version you might see later on but the version must be LTS one okay so LTS must be there so if I click on this it would download my nodejs setup so once both of these things are downloaded and you install vs code and nodejs installing nodejs is also easy just need to open the setup and click next next next and it would be installed just like a video game perfect so we have vs code and we have noj that's all is needed for running the uh reactj application okay so now I'm going to take you the reactj official website some of you might question that in the uh uh title it's mentioned reacts then why you are using next year okay so for that I'm going to take you to react official website I might I would directly use reactj that's also fine that's exact same procedure which I'm going to follow today but if I take you react to react just official website they are themselves mentioning that if you want to install reactjs you can go with any framework of reactjs like nextjs is a framework of reactjs so that's why so if I go to installation and here we have start new project and you can see as uh in the very first few lines they have mentioned that you can use nextjs or you can use remix or you can use other Frameworks which they have for react CH but we are going to use next CH because this is the most popular one and it's used for building websites okay others are used for different things like for example if I tell you about Expo it's for mobile applications okay so I would say you can go with this one you can go with this one create next step for using next Js perfect so this is the uh most supportive one which would help us to build website similar to reactj we're going to build a website in next J okay everything is fine if you know react J and you don't know next that's also fine because there is nothing different between these two next J is just the modified version of reactj that means the code would be exact same whatever code you write in reactj is exactly same in next year also okay just the way of installation is a little bit different okay that's what we're going to do so I'm going to copy this okay just copy this and now guys we're going to create a fresh folder so I'm just going to go to my uh directory and here I'll create a new folder okay so I'm going to create a new folder I'm going to name it as uh weather app okay so I'm going to name this as weather app I already created this today for uh referencing for my referencing but yeah you can just ignore this this is the main folder which we are working on okay so I'm just going to right click and I'm just going to click on open with code open with code okay so you can see that it would open a folder in vs code that's what we wanted so if you install VSS code properly you would get it like this very easily open with open with code shortcut perfect now what we're going to do is we're just going to go to our terminal and new terminal and here guys since we need an xjs application so I'm going to paste this command which we copied from the website okay so that's it that's what you need right now if I just hit this it would just create a next CH application for us now we need to give it a name so you can give it any name I'm just going to name it as uh weather app okay so glass m o r p h i c glass morphic w e a t h e r weather app okay a very long name but I think that's fine glass mic weather app and uh that's totally up to you you're going to use typescript or not but I'm just going to mention yes because in next year people mostly use typescript although we are not going to use typescript we just going to use a shortcut for that like we just going to write code in JavaScript with with some basics of typescript which I'm going to tell in right right away we are writing the code okay so you don't need any knowledge of typescript it's totally fine okay but if you know typescript you can use typescript a lot inside nexj so that's why I'm just going to mention yes here so yes and then you're going to use es lint es lint is for checking error in an xgs application so I'm just going to hit yes we are not going to use Tailwind CSS to make it no and then we going to have SRC then we're going to have app router which is recommended then we are not going to customize anything so no okay perfect so you can see that now your next year's application would set up very easily okay you don't need any kind of specific high highend computer or anything it would be installed very easily okay you can see that it would now take a few seconds also depending on your internet speed but yeah it would create a project here like this okay sample project here like this and then we can customize it we can write our own code inside this perfect so now guys you would see that we have the weather app here perfect so now after this what you have to do is uh first of all we need to get the API like how we are going to get the data it's not like I would be creating my own API for each City I'll be going to Canada or any some specific Place City Country anywhere okay I'm not going to go anywhere I'm not going to go to any City like indor Bal any any other city I'm just is going to use an API API is a service like someone has done that job for you someone has brought the temperature for you and stored it in their database you just need to get that data it's like some other company has done the work for you and you just need to get that data that's what API would help us to do if I give you a very good example let me just take you to open weather map and this video would also clear a lot of confusion of apis what is an exactly an API so we're going to clear that confusion so again I'm going to mention this again suppose you are creating a weather app we are creating a weather app and I'm not going to visit any country or any City to get that weather data okay I'm going to use a service created by some others for example you want to show maps in any mobile application which you created for example zomat or any other food delivery app they show map okay they show the maps so do you think that they have uh created their own Google Earth like kind of thing no they have used Google Maps or some other source okay that means they are just using apis of Google Maps Okay something like that so it's like they are not building their own service they're Outsourcing things okay that means they're using services from Google Maps for this map integration and different kind of things okay similarly we're going to use weather data from some other place for our application okay so we're just going to go to a website named as open weather map okay so I've been using this uh website for a lot of videos where I have shown the weather data and I think it's from past 3 4 years this website has never disappointed so hopefully this in future they never stop their services okay so this is totally free totally free to use that's why I'm showing this so you just need to type open weather map and in this website I think most of the tutorials in YouTube also would mention this so this is very popular one by the way so you can just go to this website and uh here what you need to do is you just need to install uh you just need to log in from here okay guys so we just going to log in and I think the task would be done so here you can see Yes mine is already logged in by the way so I'm just going to log out again and I'm going to log in again okay so you might see a login page like this just click on sign in and you would see a login page like this so you need to just log in so I'm just going to log in and submit and you can see I have logged in successfully okay you just need to do that you don't need any kind of credit card details anything nothing is required you just need to create an account and you would logged in successfully perfect now you just need to go here into the apis okay into the apis you can see you have lot of things here uh so here you can see we have current weather data okay so just click on API doc you can check out the other ones also but right now I'm just checking this current weather data because this is the most popular one which I mostly use so it's like if I pass any city name I would get the uh weather data of that City for example if I go down a little bit by the way this this is what kind of response you would get you can see uh this is the response generally this API would give you you can see yes a lot of things are mentioned here but I'm going to go down and I'm going to search for that specific one which I'm going to use okay so uh by the way you can read details about each field which you get in the API okay you can read details what's exactly the meaning of each field which you get as a response but I'm going to go down and a little bit uh yes here yeah you can see that I want this one okay so I'm just going to copy this link I'm just going to copy this link and I'm just going to paste it here now suppose I want the city name to be suppose any City like jabalpur okay that's my hometown so city name right and then we need the API key to use this API okay so you would get the API key from where from this website only that's free API key is free you just you just you'll just go here and here we have my API Keys okay just click this and this would take you to the page and here you can see we have a default generated API key so I'm just going to copy this okay by default this API key would be generated for you just copy this just copy this contr C and then guys we are just just going to paste it here okay so you can see for this city I just want to get the weather data okay so if I hit enter you can see that for this city I'm getting the weather data okay by the way this this dark format you see here this Json object format you see here is because of an extension which I'm using in Chrome so what you can do is you can just search for Json placeholder uh okay I'm sorry I'm sorry uh Json formatter for matter extension just search for this and you can just go to Google extensions Chrome extensions and this is the uh this is the extension which I'm using just install this and then whenever you have some this kind of response Json kind of response so you would see it in this format else if you don't have the extension you would see some format like this so you can see it's very less readable and it's confusing where are the commas where are the dots very confusing that's why I am using this extension Json format extension okay so here you can see it's little bit more for formatted and easy to understand okay so now suppose if I want to get the city name out of this out of this what I would do is in this extension I have to find the city name how can I find you can see that if I want to find the city name I would simply go to name okay whatever is the response suppose response is data so I'm just going to say data. name that would be this city jabalpur okay similarly suppose if I want to get visibility so I'm just going to say data. visibility that's 4,000 right similarly suppose I want to get the wind speed so data. wind dop speeed would give me 3.09 kilm per hour okay so that's how things would be working here so now we got the API response that means we are going to use this specific API to get the weather data if I want to get the uh data for any other place for example if I type here indor okay suppose if I type this city beautiful city so you can see that we basically get the data of indor okay right and we also get the weather type you can see right now indor has weather cloudy okay so that means clouds clouds right now one more uh if instead if I type something else like for example if I type delh if I write Del so you can see I'm getting Del's data and smoke okay it's like uh um the weather is not that good there okay so it's smoke there okay perfect and we can write a few more places like if suppose if I write a country let's see what happens so in case if you write a country so if I write India okay so yes so you can see that yeah it's St Cloud so for India if you write a country uh you can see yes it's giving me some wrong wrong place okay so it's like you can just type cities here it's only for cities perfect now we got the clue it's only for cities that means this is not for a country so we're just going to go with our cities only perfect so now guys you just need to save this somewhere just copy this somewhere and we're going to save it somewhere okay so since we created a fresh project in vs code right so we are going to open that project this project right we created this we named this this glass morphic weather app don't worry I'm going to share the complete source code source code of today's video so you can easily check out the source code okay perfect so here what we're going to do is I'm just going to click on new file and here we just going to name it as env. Lo why because we are getting a secret API key so we have to save it somewhere secretly okay so that we can circulate that API key throughout our application and it's not uh sec concern later okay so for that we have to save the secret key here okay right now I'm just going to paste my API directly here later on I'm going to save this key which is very important into my EnV file which is this file okay now uh for that what we're going to do is I'm just going to name an EnV variable you can give any EnV variable but since we are using nextjs so your EnV variable must start with nextore public okay if you write this then it next just would identify this easily okay I have read this somewhere that's I'm telling you okay so here I have just to write weather w a t h e r weather uncore app API I'm just going to write it like this API key so this is you can just name it anything I've just named it whether API key equals and I'm going to paste this key which I got so I'm just going to copy this key and I'm going to paste it here perfect like you can use my key also but I won't recommend that because if a lot of people would use my key so they would get slow responses so it's recommended you can create your own account and open weather map website and from there you can get the API key for for free okay so yeah you can get the uh this key for free from that website okay fine now what else we need we are just going to go to our page. TSX so I'm just going to go to page. TSX and I'm going to remove everything from here this is a basic nexs application let me just explain what's actually happening here I'm going to create a division here and I'll create a H1 tag here I'm going to write hey there this is gfg okay so that's it and I'm just going to remove this CSS page. module. CSS I'm going to remove this and from Global CSS I'm just going to select all I'm going to remove this perfect now guys everything is removed and in the homepage this page. TSX B is basically homepage okay right now you might feel that what kind of application I created I just created a basic next year application inside this we have page. TSX which is treated as homeage you're going to do everything here if you don't know reactjs if you don't know nextjs totally fine you're going to do everything here it looks like an HTML page like you can see this is an HTML tag inside this we have H1 tag okay so if you know HTML CS JavaScript you can easily do this okay so this is our homepage we're going to do everything here and this would contain our CSS page. module. CSS and then we have global. CSS also here also we're going to have our CSS but main page is page. TSX okay here we're going to write everything so I'm just going to run this application first so that you know okay so I'm just going to write here I'm just going to right click right click open and integrated terminal and you can see we have glass morphic weather app that means it's totally in the same directory now I'm just going to type npm runev so to run a react just app and nextjs application you need to write npm runev okay npm runev this is for nextjs for reactjs I think it was just npm start but we are using next J so npm runev so you can see that it has start it and uh what I'm going to do is uh I think I need to restart because I'm just going to start it in Local Host 3,000 directly so yes so it would start it in Local Host 3,000 now I'm going to show you this page okay so here guys what you need to do is you just need to type Local Host 3,000 that's it so once you type this it would land it to your specific page uh you can see yes this is the homepage which which I told you about page. TSX inside this we created a H1 tag hey there this is me GF G okay that means everything is perfect here inside this I'm going to call my API data okay I'm going to call what kind of data I'm going to call this data I'm want to show this data how can I do that let's do this so for that guys assume that you have a place okay assume that you have a place how you can say suppose uh I'm going to say my place would be some variable so for that I'm going to create use State use state is like right now you can say value is empty later on the value might come so right now you are saying use state that means if the value changes just recall the API just refresh the data suppose right now I'm watching the data of jabalpur but suppose someone wrote indoor later on okay indoor as city later on so I want to change the data for that first of all I'm going to change the place so for that I'm just creating a hook here so Place dot set Place perfect equals here you just need to import you state from reactj and suppose the default value is this city jabalpur okay so here I just named the city as default for place that means if I'm calling printing place I'm getting jabalpur as a uh result okay that means if I write console.log place if I write console.log place I would print japo okay that's it so I've just uh imported uh used it and one more thing which you need to Ty since we are using next year so at the top you need to write use client okay use client that's it okay so this is for nextjs only right so we have done this else everything is same for react Js nothing different if you're just using plain react J everything is same just this is specific for next J that's it okay so here guys you have imported you state the hook which we have in react J also and here I'm just going to call the API so for the API I'm just going to create a function get uh weather data okay get weather data right so this is the API which I'm going to call and this is going to be an asynchronous function and again I'm just going to say that as soon as my page loads I want to call this API so we a t e r okay so as soon as my page loads I want to call this function I'm going to call this function how can I do this for that I'm just going to write use effect so use effect is a hook in react J which would basically help you to get data in some cases for example if I write uh if if I write here comma and empty brackets that means I am saying whatever is inside this what whatever is inside these brackets would be called would be called as soon as the page loads that's what is the meaning of use effect that means it would load data for one time so if I want to call something for one time I would just call this okay I would call this inside this I just call my function that's what I want to call for one time whenever the page loads okay whenever the page loads I'm not saying there is any City change anything nothing I'm just saying whenever the page loads I'm going to call this function first okay that's it so we have called this now here guys what you can do is you can just just call your API now what's your API you know that this is the API right this is the API which you are calling from that this is the variable which you created okay so I'm just going to cut this from here I'm going to paste this somewhere at uh inside this okay I'm just going to paste it inside this and just comment it out okay so this is the API which I'm going to call out of this this is my API key out of this this is my API key so I'm just going to call the API key from which page from EnV local page so I'm just going to copy this okay and I'm is going to say here itself at the to I'm just going to say let weather _ API uncore key equals and here I'm just going to write process do NV and then the variable name so as soon as I write this as soon as I write this guys I would Target this specific value this specific value that means you can see I don't need to write this value every time I just need to call this variable wherever we need this value okay so that's the use of EnV and and we have made this very secure you can see I can't see this value directly okay so if I want to share my project I won't be sharing the EnV local file I'll be sharing all of the files so that they can see everything they can do everything but they can't use my services okay like this okay perfect so you have the weather API key now instead of this I would show my weather API key that's what I want okay instead of that uh whole API key I would just show this variable that's what I want okay so for that guys I'm just going to use fetch so first of all I'm just going to say that if place exist okay if place is there okay that means it's not null okay if Place contains something that means right now you can see this is not null okay this is not null this is something and it's a string so its length is greater than zero so you can see there is a city obviously the name would be greater than just a letter you can see it has more than one letter okay so obviously you're just going to say that place do length is greater than zero that's it so when it happens like this this is the condition then you're just going to call the API so I'm just going to say try and inside this guys I'm just going to say that we going to call our API and in the catch case I'm just going to say whatever is the error I'm just going to print that error console.log error error would be printed in the try catch I'm just going to say first of all I'll call my API okay I'll call my API so I'll just say that let URL what is your url so I'm just going to write my URL like this so our URL is basically this okay our URL is basically this so you just need to write it here now your city would change later right so for that I'm just going to Target my place I'm just going to write dollar I'm just going to Target my place variable okay according to the place variable I'll I'll get the data initially the place variable is jabalpur so I'll get data for jabalpur then we have to write one more thing what we have to write the API ID also so I'm just going to write uh dollar and here I'm just going to write API uh weather API key okay weather API key that's it guys I'm going to write it here that's it so this is our URL which we are going to call right this is the URL which we are going to call so I created this URL now what we have to do is we just need to fetch it so for that we use fetch okay we use fetch you can use exos also but I'm going to use fetch okay so let re equals a wait fetch URL that's it I'm going to fetch this URL that means whatever is this URL giving me whatever is this URL giving me I'm just fetching that that means I'm just getting this data I'm just getting this data this whole data I got this whole data I have to just convert this data this data would be generally in string format so I have to convert this data into Json format for that what I can do is I'll just say let data equals Rees do Json that's it now I have the data in Json format okay I'm just going to print that data console do log and here I can just write uh get weather data response okay so I'm just going to type it like this and after this I'm just going to print the value whatever data is giving me okay so now guys let's try this so I'm saying as soon as my application loads I'm going to call this function so let's do this in this page uh you can see that what I would get is I would just go to console and here if I just refresh I must get something okay so you can see I am getting something but the promise is spending why the promise is spending because we have to use use a wait here okay we have to use a wait here perfect so now let's see again if I just refresh and you can see that I got the weather data perfect so you can see this is the data which I printed get weather data response this is the data which I printed suppose from this I want to get the city name so what I'm going to do is just print data do name so I'll just do this data dot name that's it so you would see that I am getting what if I refresh now if I refresh can see I'm getting data name okay that means city name perfect so that's how it would help you that's how it would help you right guys so first of all I hope you understood how this API is being called now guys we're going to design our page okay we're going to design our page let's do this AK Malik hi akib Malik Lucifer by fitness app update no not right now I wasn't able to update that soon soon I'll update that like right now I'm just stuck with some a lot of tutorials actually uh because of gigs for gigs 390 challenge uh mostly I have to take two to three sessions of gigs for gigs every day and then I have to prepare content for that also so that's why I wasn't able to work on that old project uh basically everything was done in that project but the source code was deleted so I wasn't able to share the source code that's what is the problem with fitness app okay so I'm trying to recode it so that I can share it again okay so I'll soon do that I'll update the source code and I'll update you also I think you have messaged me on Instagram so I got your message on Instagram I'll update you there also okay right okay so guys now we have the data perfect now we have to show this data into our UI okay so let's build our UI now building the UI is very easy like it's like damn easy what you need to do is you just need to say that first of all I'm just going to say we have a division okay so by the way we are taking CSS from where we are taking CSS from page. module. CSS so if you are using nextjs so way of writing CSS is different that's what we going to follow but if you using normal react GS that what you do you just give it a class name inside that what you do is you just write the CSS okay it's like I just gave a class name I'm just going to write CSS like this that's what you do in uh normal react okay that's what do you you do in normal react but what we're going to do is since our CSS would be inside this page. module. CSS so we just going to say that class name class name and inside this guys I'm just going to type styles do outer div okay that's it so I'm just going to style it like this okay so if you st if you have to style you just need to import CSS like this import Styles that's default done in this page so you don't need to do anything but you need to write it like this so that's how I've just given my class name this is the class name right now inside this guys I'm just going to say that I have to style this okay so for that suppose you have an image okay so inside the SRC I'm going to have an image assets Okay so I have just downloaded some random image from canva so this is a copyright free image which I got so I just downloaded this this for suppose depicting some weather okay so that's what that's why I downloaded okay so you can see it looks cool so we're going to use this image you can use some other image also if you like some other image okay so I'm taking this image as a sample although I'm going to share complete source code of today so you can take out this image from there also you'll get the image okay so now guys what you can do is uh I just named it as bg.png by the way so what you can do is you just need to go to ph. module. CSS and you need to write the CSS for what you need to write the CSS for this page. TSX okay so I'm just going to copy this class and I'm going to go to page. module. CSS I'm just going to paste it here okay so dot and then the class name and inside this we're going to write everything perfect so what we're going to do is we're just going to say that uh I'm going to take the whole Space so first of all my background would be what suppose my background would be this URL okay what URL you're going to pass here I'm just going to say dot dot slash okay I'm going to write dot slash single do slash actually single Dot and slash double do slash okay double do slash so assets SL bg.png that's it so I've given this outer div a background let's see how it looks so you can see yeah it is having a background but I have to give it full size we have to give it full size for that I'll just say background first of all background size background size must be covered okay so background size must be cover okay okay and one more thing which we're going to have is display as Flex Flex direction as column that means everything which we I'm going to show in this page would be in column format and then everything would be in cent center so L item Center okay then what we're going to say is that means center from this side okay center from this side this Center okay so now we are going to say uh we'll have a height also so I'm just going to say the height of this would be 100 VH you can change it but yeah this is the height perfect so you can see that's how it looks and you can see we have some default padding so we have to remove that default padding anyhow how can I remove that for that we need to say here we have Global CSS here I'm just going to write star and I'm just going to say um m0 means margin Z and padding 0 so p 0 perfect so you can see now guys it's removed perfect so now you can see that it looks like this if you want to change this image you can change this anytime now first of all guys we need to show a search bar for searching the city okay for searching the city for that what you can do is you can just create a division here I'm just going to create a division here close this and I'm going to give it a class name inside this I'm just going to write styles do s e a r c HB a r okay search bar now guys inside this I'm going to say whatever input you type here is going to be your place like I type the city name inside this okay so I'm just going to say type of this would be first of all text okay type of this would be text you can make it type as search okay so that you have a cross button also so type as search SE okay then the placeholder equals uh city name city name okay city name and uh I'm just going to type on change whenever you make a change inside this what I'm going to say is it would set the place value place value you can see this is the place value so I'm just going to say if you write bopal inside this so I'm just going to say Bal would be pass here okay whatever City if you write any City like uh if you if you write aodha if you write aodha here so you would get aodha set it here for okay how can you do this you're just going to do uh just just write it like this set Place set place and inside this we have e do Target do value okay that's it so I'm just going to say whatever I'm writing inside this input would be set it to that place okay now the place would be that specific input value so whatever City you write here inside this input field would be passed there in a set place okay perfect now this is it and one more thing is we're going to have a button we are going to provide it a uh like on click on click so how it would work as soon as I click on this I want to get the weather data so I'll be calling this function get weather data right so I'm just going to copy this function and it would just get me the weather data that's it so I've have called this function okay so inside this button I can just show some icons so for that what I can do is I can just go to mui for showing the icons I'm just going to type mui uh you can just type this mui okay and here you would get the react components also icons also I'm just going to go here and this one I'm just going to copy this okay and I'm going to paste it here okay so I'm just going to split it here and I'll play paste things here okay paste and one more thing guys which you need to do is you need to go to get started and uh in the installation you would go down a little bit and here guys you would see mui icon so I'm just going to copy this okay and I'm going to paste it here that's it okay so now we have mui installed so we can easily use this okay now I'm going to Simply search about mui icons so you would get this website okay mui icons you don't need to install anything now everything is done here what you need to do is you just need to search for Icon so I'm just going to search for search icon so s e a r c h and you get this uh search okay you get this icon so you're just going to copy this okay this is going to copy this okay now what you need to do is you just need to paste that icon here perfect now what we can do is we can simply import search icon as a tag okay as a tag so inside this I'm just going to import ort search icon as a tag okay now let's see how it looks so I'm just going to go here and let's refresh so you can see I'm getting the search icon as well as the search bar that means input so this is the search bar division now let's style this guys we going to style this then we going to go to page. module. CSS and we are going to style this okay let's come back yes so let's say that the search bar would be first of all s e a r c h b a r inside this we'll just say that display is flex first of all that means items would be in row the input would be like this and the button would be like this they would be in row and then we're going to give it a background color so we'll just say that it would be having a transparent glass morphic background color so RGV and inside this we'll just say 0 comma 0 comma 0 what you can do is you can just write RGB here and you know that this a black color so you can just decrease this uh transparency so it would look glass morphing that's it okay so now you can add some properties also later on so it would just look different so right now you can see that yeah we don't have any padding that's why we are not able to see this so we're just going to say that we have uh border radius also for example border just a second guys um okay so border radius would be around 20 pixel and then we are going to have overflow of this as hidden that means there won't be any overflow the buttons won't be inside the Border okay and then we have the Border as none okay we don't have any border then we have align items as Center because we have an input and a button so I want them to align that Center okay and then we have margin between the other items as 10 pixel okay so margin okay so you can see right now it looks like this so we have to make this input a little bit bigger so we'll come here and I'm just going to say that do search bar input let's say that the width of this would be around 300 pixels but you can increase this 300 pixel I'm just going to say 300 pixel okay so you can see yes and we're going to say that we have some padding also so padding padding would be around 20 pixel okay and then we have the background color as transparent so transparent would actually adapt the behind color so you can see that it adapted the behind color now we don't any border and outline so we just going to remove this from the input okay so from the input any border or outline would be removed you can see any border or outline is basically removed right now let's come back and we are going to say that the text color which you're going to write here is going to be white and the font size is going to be 18 pixel okay so let's see so you can see that text color is white and font size is 18 pixel okay perfect and you get the cross button because the type of this is search okay so if I cross this you can see everything is removed so it looks cool perfect now what else we need to do is we need to design the button also so I'm just going to say that search bar button and here I'll just say that the width of this button would be 50 pixel and height of this button would be 50 pixel and background would be background color would be transparent okay and we just going to say that this button is not going to have any border so border none and again outline would be also none and cursor would be pointer as soon as I hover on this button and then we just going to say that color of this uh color of this icon would be white so it would become white like this so you can see that's how it looks and I think it looks cool okay so now what you need to do is you need to get the city data so for that what you're going to show is for example uh as soon as you get the city data you have to show it here okay so I'm just going to say that if we have the place data now what's the place data it's like you got the data here right you got the data here you have to save it somewhere okay so I'm just going to save it into one of my hook okay into one of my hook I'm just going to create one hook here I'm going to name it as Place data so it would contain the response the complete temperature and details set Place data and initially this would be empty empty object right so uh actually I'm going to make it as null okay I'm going to make it as null that would be better initially okay that's it and I'm going to say that the type of this would be any okay type of this would be any since we using typ scripts we have to mention the type here because later on you would get a complete object so from n you are changing it to object so first of all here I'm just mentioning the type as any or what you can do is you can mention null and object like that things like that but I'm just mentioning any since I assume that you don't know typescript so I'm going to mention as any okay perfect so here I've just uh done one thing and I'm just going to say that if I got the place data if I got the place data what I'm going to do is I'm just going to do one thing I'm just going to show one thing here for now I'm just going to create a division okay create a division and I want to show the city name okay so right now you got the data from that you have the name that's the city name so here here I'll just say set Place data set Place data and just going to pass data okay that means complete object would be passed from that I have to show the city name how can I do that so I'm just going to say uh Place data Place data do name that's it that's what I'm going to show here okay let's see if it works so this is it would give me some response so I'm just going to type here suppose the city name okay if I type here and let's search so uh right now I'm not getting any anything why I'm not getting anything because of let's go to console and here I think we need to refresh first get weather data okay I think we need to refresh first okay let's refresh first and then guys you can see okay I'm getting something if I write some other city name okay if I write some other city name let's see so you can see that yes I'm getting that city name perfect perfect so you can see that I'm able to get that name now I'm going to show the complete data okay to show the complete data what I can do is uh I'm I'm just going to write things like that I'm just going to say Json do stringy 5 for now I'm just going to write it like this and place data so that you see the complete data here so let's see so if I write here Bal okay if I write here Bal so if I hit this uh I must get the data actually let's see again so yes okay I I think it would work uh for jabalpur I got the data and similarly for bopal I have to again get the data okay if I search this you can see that I got the data perfect it's working perfect just a refresh was needed perfect now I have to show the complete data in an order okay so what I'm going to do is I'm going to follow an order for getting the data so what I'll do is uh for each for each City for example you are printing the data you can see that the weather type is ha weather type is hze so for haze you have an icon for cloudy you have an icon for sunny you have an icon right so different different weathers would have different different icons I'm just going to go here and we'll first of all say that we have class name of this as styles. row okay styles. row inside this we'll have a division we'll have a division I'm just going to name it as section one so I'm going to give class name styles do section one perfect section one now inside this guys we're going to have two sections we're going to have two sections here so I'm just going to again create a division and we'll just have a class name as styles do Section 1 one okay so I'm just going to create two columns inside section one row okay so I'm just creating two columns so this is the column number one and similarly we have created another column that's it so you can see we have created two columns inside section one that's it so that's that's what we needed for the first section and then for the second section that means for the right side I'm going to create a Time clock so I'm just going to show time there okay so another one and here I'm just going to say class name and let's say that the styles of this would be do time div okay and inside this we're going to show the time so we're going to show the time I'm just going to give this a class name of styles dot time okay so inside this I have to show the time so so for getting the time I'll just say cons current time equals and from that I have to just extract the time I would just say that new date and I would just convert it to local string so to local string okay to local time string actually and inside this we are just going to say we need just the hour and the minute so here I'll just say hour two digit and minute two digit okay so yes that's what you can write here okay and I think uh we don't need the 12 R format we'll need the 24h hour format okay so that's fine okay so you can see that's the format I'm just saying I want the hour and the minute from the time now I'm just going to show that time here so I'll just go here I'm just going to write current time that's it so time would be shown that's it now in Section 1 one what you need to show you need to show the weather type and weather icon and the place okay so I'll just say in the section one we basically we should uh basically say here uh we have section one one right so here we just going to say we have different different types of data right now we're getting Haze type of data so we'll just say that if the type is haze how we going to know that so I'm just going to first of all print data I'll show you okay for different places we have different data right now you see right now you see that for a city like jabalpur okay for this city you can see that if I go to uh main you can see temperature is different and when I go to weather you can see that inside this we have main as we have main has his that means the weather type of jabalpur is his if I type any other city name if I type Delhi you would see that the weather type here is Smoky so if I just show you this can see that in the weather you can see that the main is small that means for each kind of uh City there can be different kind of weather right so I'm going to show some icons for that so I'm just going to say that if in this case in this case I'm just going to say that here if the weather main so Place data do weather and you can see that uh Place data do weather is basically an array and I have to Target uh I have to Target basically the zero index so that's why I'm writing zero here Place do weather is B basically an array okay you would see this as an array can see that weather is basically an array that's why we have to Target the zero index of this array right so we have simply written zero do main do Main and here suppose if I say that that the weather is clouds c o UDS okay if the weather is clouds and in that case what I'm going to show is I'm going to show an cloudy icon so for that I'll just go here into material icons again and here I'll just copy the clouds okay so c l o UD Cloud if I write this you can see we have a lot of icons I'm just going to copy this icon copy and I'm going to paste that import that here okay and we're going to use this icon here okay and one more thing I'm going to give it a class name of uh styles do we a t e r icon okay weather icon that's it so if the weather is cloudy I'll get this icon similarly if I if the weather is haze so I'll again search for haze icon in mui and I'm going to import that similarly and uh I'm going to import uh deaz icon from mui similarly okay now we have the deaz icon also if the weather type is haze now similarly if you have smoke icon so I'm just going to search for smoke also so s SM o k e okay so smoke I think SM SM o k y s SM SM o k e okay I'll just pick this one okay I'll pick this one this looks funny so I just say that if th