Hello and welcome back to the channel. In this today's video, we are going to build a simple weather app using Next.js 14 and Open Weather API. This is the fully functional weather app and let's see the features of this weather app. So basically here we are getting the today's date and temperature and hourly wise temperature and weather icon and weather data. And here is the weather description and there you will find some additional details of our weather like visibility, humidity, wind speed, air pressure, sunrise and sunset. And after that you will find 7 days forecast data. And here is the main feature of our weather app. Here we will also get a search search session. Suppose for example if I will search for Delhi. So now you can see that we are getting a proper search session for our location. And if I will select for any location and click on that search button. So we will get a data for our that location. So now you can see that the weather report of our Delhi location. Here we are getting the temperature and description and some additional details and obviously 7 days forecast data. Suppose I want to search for Surat and if I will press enter. So this will search for that location and here we are getting the location name. So currently which location is applied and if you haven't seen there. Suppose if I will search for another location. So we are also getting a proper skeleton loading components. So on the meantime our when our data is on the loading state. So we will get a proper skeleton loading. If I will refresh my page or we can also say that on the first loading what we will get. So if I will refresh my page. So now you can see that we are getting a proper loading state there also and after that we will see our data and I have also added a additional feature for our weather app. Here is a button and when I will hover over our button here you can see that we are getting a title like your current location. And when I will click on that button so this will search for the current location. So currently my location is made it so firstly this will ask us permissions for our locations for our location and after that this will search for that location. And suppose if I will go to the another location suppose I want to see our weather report for Pune location and see there we got the Pune location and again if I will click on that current location button. So now you can see that we got our current location data and currently I am living on a Merit city so that's why we are getting the city name here. So I guess you are very excited to build this weather app. Before that let's see our additional feature that is this application is also fully responsive. Suppose if I go on the mobile screen so you can see that on the mobile screen this will look like this and obviously we can check our data by scrolling there like that and on the desktop this will look like this. So I guess you are excited to build this weather app. So let's get started. So to build this weather app we are going to use a Next.js. So first of all we will go to our browser and search for Next.js. So we will go on that first website and here we will find the installation command to install a Next.js. So I will copy the command from there and go to the place where I want to install my Next.js app. So here I will create a new folder and give that folder name is weather app and after that go to inside that folder and open a cmd on that location and after that paste your command there and after pasting your command add a dot there. So with the help of dot we don't have to give any project name. This will install our project inside that folder and after that this will ask us a few questions like what do you like to use, typescript, tailwind, css and etc etc. So what we will do we will just press enter enter and install all the default options. So I am just pressing enter there for the ESLint also. Yes enter for the tailwind css enter and this is asking like what do you like to use source directory. So yes I want to use source directory and after that app router obviously yes and for the import allies no. Now our Next.js is installing. So this will take a little bit of time maybe one minute or two minute. So I will skip that part. So now our Next.js project is successfully installed. So let's open our project in vs code. So for that we will type code dot there and press enter. So this will open a vs code on that location. So now we will run our project and see the output. So first of all we will open our terminal. So I will open our terminal with the help of control J and after that on that terminal I will write npm run dev. So this will open my project on localhost 3001 but in your case this will open your project in localhost port 3000 because on my port 3000 my previous project is running. So that's why this is opening on localhost port 3001. So let's go to the browser and search for localhost port 3001 and here currently we are just getting a default styling by Next.js. So let's again go to the code and from here we will go to the source folder and inside that source folder we will go to the page dot TSX and inside that page dot TSX we will remove all the default code from there like that and for now I am just printing hello. And we will also go to the global dot CSS file and from there we will remove all the default styling from there also. And now let's save your code and see the output. So currently we are just getting hello. Now let's see the final output what we need to create. So here first of all we will create our navbar and after that we will create other components. So let's go to your code again and on the source folder we will create another folder named components and inside that component folder we will create our components and inside that component we will firstly create our navbar dot TSX file and inside that we will create our navbar component. So I will just type TSRFC. So this will create a format function for our component. Now here we will write a code for our navbar component. So first of all let's style our navbar component. So I will take this div as a nav and inside that we will pass the class names that is shadow sm sticky, top 0, left 0, z50 and bz white. So with the help of this sticky we will get our navbar always top. So this will stick on that position for always and with the help of this top 0 and left 0 we are giving the position for our navbar and after that we will again create another div inside our navbar and here we will give the class name for this div and inside that class name we will give the height of our navbar is 80 pixels and width will be full and this will be the flags, justify between and items center and max width will be 7xl and padding x will be 3 and obviously margin x will be auto. So with the help of this margin x auto what this will do this will automatically center our container or anything on the x axis. So that's why we are giving this mx auto and inside that div we will create a one paragraph tag and on that paragraph tag we will give the class name of this that is flex items center justify center gap2 and we don't need border and why I am adding a paragraph you can see this in a second and inside that paragraph we will add a h2 styling for that h2 is text gray and text 3xl. So if I will save my code and first of all I need to import my navbar component in page. So first of all I will import it there like that and if you will see the final output there so here we are getting our background color little bit gray. So for that we will give the class name on our div tag and inside that we will give these class name that is flex and flex column and after that we are giving a gap and bg gray 100. So with the help of this bg gray 100 we will get our background color gray and we are also giving a minimum height of screen and inside that we are passing our navbar and if we will see our output so now you can see that currently we are getting our navbar something like this. So let's go to the navbar again and here we don't need this navbar keyword and now let's save it again and see. So now you can see that currently this is looking like this and now if you will see there so for the logo we are using an icon. So for the icon I am using a react icons so first of all we need to install a react icons in our project so we will go to the another tab and search for react icons and we will go to that first link and first of all we need to install a react icons. So here is the installation code so I will copy the installation code from there and come to my code. So I will open a new terminal with the help of Ctrl Shift and backticks and after that I will paste my installation command there and press enter so this will install my react icons and after that again we will go to that react icons and now we need to search for our icon. So our icon is sun so I will just search for sun and if you will see the final output so here our sun is looking like something this one so we need to search for this icon. So here you can pick any icon that you want but I already know the name of that icon so I will just directly search for the full name. So our icon is this mdwbsunny so I will just click on that one and here I will click on this so this will copy icon in the form of component and after that we need to go to the code and paste our icon there like that and again go to the browser and click on that import code so this is the import code for our icons and after that we will paste our icon there. Now we have successfully imported our icon but here we need to style it additionally so here I will use a class name for that and on that class name we need to give a text size of Txl and on the margin top will be 1. So I need to get the margin top inside the class name and after that we need to give a color for our icon so we can give the color for our icon easily with the help of text property so I need to give a color of text yellow 300 and when I will save my code and see the output so our icon will look like something this and now we have created our logo or icon something like this one now let's create our search bar component. So for that I will create another section and inside that section if you will see there in the final output and after that we have just a location icon and after that we have a search bar component. So first of all let's import these icons and after that we will create our search bar component and let's style this section also so this will be the flags, gap2 and items center and inside that we have our location icon and for the icons I will again go to that website that is react icons and search for location icon. So here we got our location icon so I will just simply click on that one and after that I need to click on that so this will copy my icon in the form of code and after that go to your code and simply just paste and after that we need to also import our icon. So for that again go to your browser and click on that import code and paste your import code there like that and let's style your icon. So to style your icon again we will use our class name and inside that class name we will give the text of 2xl and text will be gray 400 and on hover we have opacity of and this icon will have also a cursor pointer and let's see the output. So here we got our location icon like this. Now let's add another icon. This is also a location icon so for again we will go to the browser and see we have already searched for location icon but we need a different icon for our location. So for now I just know the exact name for our location icon so I will just search for that name directly but you can choose any icon that you want. So in my case my icon name is this one so I will just click on that one and again do the same process and here I will paste my icon and now I need to import my icon. So you can also import your icon by just clicking on control space and after that you will get proper suggestions and after that just press enter. So this will import your icon in your location and now let's style this icon also. For that we will again give the class name and on that class name we will give this size of ext3xl and now let's see the output so you will get your icon something like this. So now we need to make this proper so here was the spelling mistake so that's why we are not getting a proper so I need to give this flex. Now this is proper and now we have to also show our location there. So for that we will use a paragraph tag there and we have to also style our paragraph tag so I will give the class name of this. This is ext_slate_900 and 80 means I am giving opacity of 80 and after that I have given a text sm and on that place I am just writing India and in future we will change this location name with our API data and for now let's save and see the output. So we got our location there and now it's time to create our search bar. So for that again we will create another section so for that again I will create another div and inside that we have our search bar component so here I will give this search box there and we will create our search box component separately. So here I will give this file name searchbox.tsx and inside that we will create our sample component with the help of TSRFC and now we will style our search component. So if you will see there on my search component so what I have done something like when I will press enter so this will also search for our location. So for that we will use a form tag so with the help of this form tag easily handle a submit logic. We don't have to create any additional state or anything we just have to use a form. So for that I will use a form tag there we don't have to import a form from anything. This is form and now let's give the styling for our form tag. So this will be the flags and relative items center, justify center and height will be 10 and inside that we will create our input tag and after our input tag we have our icon. So icon will be inside the button so I will take a button tag and inside that we have our search icon. So again for the search icon we will go to that react icons and search for search. So we need to search for search and here we need to search for exactly this search icon in a small letters. So this is our search icon so again we have to do the same process just need to click on that icon and click on that component. So this will copy that component and come to your code and paste it there. Now import your icon, go to import again come to your browser and click on that import code. So this will copy the import code from there and now just paste your import code there. So your icon is successfully imported. So first of all let's import our search for component in our navbar on that place and let's import it like that and see the final output. So here we are getting error because I guess I haven't saved my search for component. So let's save this and now see we are not getting any error. So here is our input and search icon. So let's make it side by side our code and output so we can see easily what's going on there. So now let's style our input tag. So first of all let's give a placeholder and on that placeholder we will just simply give a search, search location like that and so yeah we got our placeholder there and after that let's give a class name. So on that class name we will give a padding x of 4, padding y of 2 and width will be 230 pixels and we are also giving a border and border will be gray color that is border gray 300 and we are also giving a rounded left MD. We are just only giving a rounded on the left hand side and on the focus outline will be none and on the focus we are changing the background color from gray to blue that is blue 500 and height will be full. So we are giving the height full there but here we are giving the height 10. So this will apply the height of that search box component according to this and when I will save my code so we got our input style something like this. Now let's style our button also. So again here we will use a class name and on that class name we will pass a padding x of 4, padding y of 9 axis, bg will be blue 500, text white, rounded and if you will notice there so here we are passing a rounded right and here we are passing a rounded left. So on this one we are just giving a rounded left and on that button we are giving a rounded right so that this will look like this are joining together and after that we are giving again on focus outline will be none and on hover we are giving a bg blue 600 and we don't need this white space, white space no wrap and height will be full. Now you can see that our button will look like this and we have also added a hover effect there and there also. Now it's time to add a props for our search component. So here first of all we need a value prop and on change prop and on submit prop like when the user submit or click on that button so for that we will use on submit prop and our value will be string type and so what will be the type of our on change. So for that we need to write on change there and after that we need to hover over that on change. So here you can see that they have given the type for our on change so we just have to simply copy our type from there. So I will just copy from there and paste it there simply like that and for on submit also again I will hover over there and here you can see that they have given the type so I will just copy it from there and paste it there and if you will see there carefully so they are just simply using a change event handler there and after that "stimal input element" and on that one react.form event handler and "stimal form element" and after that here we need to pass props like that and we need to pass the values of our props there. So here we need to write props.on summit for our summit and for on change we need to write props.on change like that and for the value we will write value there and props.value and here we need additional property that is class name prop. So I will just copy the class name from there and the type of our class name will be the string and this will be the conditional so maybe sometimes we need a class name or maybe sometime we don't need a class name. So that's why we are passing our class name with the help of this question mark operator and let's save this but here we have defined the class name on the props but we are not using there. So to use this we have to pass our class name on that place on that parent.form class name. So for that we will use additional function that is called cn function. So I have already created a video on that topic how to use or how to create a cn function. I will give that video link on my description below but don't worry if you don't know about cn function I will also explain a cn function in this video. So now let's create a cn utility function. So for that we will come to the source folder and inside that source folder we will create a utils folder and inside that utils folder we need to create a cn function. So here first of all we will create a cn file with the help of cn.ts and we need to export our cn function. So first of all I will write export function cn and like this and after that we need to return our logic from there. So to create our cn function we need to install our two libraries. So first one is a tailwind merge and second one is a clsx. We will use a tailwind merge to merge our tailwind classes and we will use a clsx package to pass our conditional classes. First of all let's install these two packages. And after installing these two packages first of all we will import a tailwind merge there and inside that tailwind merge we will pass our clsx package there. And if I will hover over that so you can see that what we can pass inside that clsx. So I will just copy it from there and whatever we need inside that clsx we also need the inputs on that cn function also. So I will paste it there and we need to import this class value type. So I will just press Ctrl space so this will show me the suggestions from where I need to import. So let's just press enter or click on that suggestion so this will import that class value type from clsx and let's copy this inputs and pass inside that clsx. Now we have successfully created our cn function. Now let's copy this cn function and come to your search box component and now what you need to do, cut these classes and put a curly bracket there and inside that curly bracket we will use our cn function and add a parenthesis there and pass your default classes. And after that we need to pass our additional classes with the help of this class name. So we will write it like that robs.className. So if anyone will pass our additional class names there so this will add our classes in that place. But in some cases if someone try to pass same class for example we have already applied a height 10 and I am trying to pass additional height for example height 20. So this will only overwrite that height and whatever we pass in last this class name will apply. Now here we have completed our search box component and let's see the output so there is nothing changed in the output. Now we will see which API we are using and how we can fetch the data from that API and everything. So for that we will go to the browser and you have to go to the open weather map.org and there first of all you have to log in and if you haven't created your account on open weather. So first of all you have to create an account for your open weather and after that log in on that open weather and after that click on that your username so there and after that you have to click on my API's and after that click on that and here I have created two API keys and if you want to create your new API key just give the name there and click on generate. So this will create a new API key for you and after that copy your API key which you want to use and there we will create a new file that is .env.local and inside that we will paste our API key. So for that I will give that name next public weather key and after that I will paste my API key there. So currently what I am doing I am just pasting my API key there and after that I can use it globally anywhere I want. And we are storing our API key in env file so that our API is not exposed publicly. And now let's come to the main page and first of all we will test our API. So this is our API and here we have to replace our API key with our key. So for now I am so for now just let's remove this one and on the place of this I will copy my API key from there and paste it there and on the place of place I am just starting a like Pune. I want to see the weather report for Pune location and let's copy your API and go to your browser and just paste it there like that. So now you can see that currently we are getting all the weather data or information of Pune location. Here you can see that if I will open on a different browser here I have installed an extension so that's why this is looking like this one and here now you can see that we are getting our data for our weather and on that here we are also getting the country and location name and coordinates and population and all of and like sunrise and sunset. So what we need to do first of all we need to create a type for our data. So what I will do here on my API key and in that one I am passing a 56 so this will return us a maximum 56 like lists of data. We are getting a 56 weather reports data with three hours of difference. For example if you will see there so currently on this list so if you will see the time for that data currently there now you can see that this is 12 o'clock but on that second one we are getting the time for that like 15. So on that data we are getting a three hours of difference. So what I will do here for now I am just getting a two data. So now you can see that currently we are getting a very less data. So what I will do I will copy all this data from there and go to the chat GTP and what I will do I need to create a type for our data. So I will just paste this data there and tell that chat GTP to create a type for that data like that and when I will press enter. So now you can see that this created a type for our data. So what we need to do we just have to simply copy this type from there and come to our code and we just have to paste it simply there. So we have successfully created our types for our data and now we will see how we can fetch our data. So to fetch our data we are going to use a react query. So to use a react query first of all we will go to the browser and search for react query and here we will get the official tannistech query, react query website. So we will go to that website and we will click on that "Read the docs" and first of all we have to install that react query. So I will copy the installation, so I will copy the installation command from there and come to my code and firstly let's install the react query like that and now again come to that browser and click on that overview. Here they have given the proper example how we can use a react query. So first of all we have to wrap up our main container with this query client provider. So in our case layout.esx is the main route of every file or our main or every project. So what we will do, first of all we will import query client and query client provider on that place. So I will copy it from there and paste it there and what we need to do, we need to copy this one and wrap up our body with this query client provider and we have to also use this query client. So I will copy this one also from there and paste it there like that. So now our error is gone and I will save my code and see the output. So now you can see that we are getting an error because we are using a create context and create context only works in client component and here this file is a server component. So what we need to do, we need to convert this page in a client component. So for that I will use a use client like that and save my file and now we are getting another error like you are attempting to export a metadata from component marked and basically this is saying that we have written a metadata and we can only use a metadata on the use server components. So for now we don't need a metadata, so I will comment it there and this one also. So now you can see that we are not getting any error and now our next step is to see there. So on that example they are using API like that. So I will copy this code from there and come to my code and we have to go to the paste file and here I will paste that code and let's also import a use query from react query and after that replace your API. So I will copy this API from there and replace it with this one like that and we have to use the async function because we are fetching the data from the API or basically a weather API. So maybe this will take a few seconds or delay so that's why we will use async function there. So to use async function here we will write async like that and inside that async we will fetch our data with the help of xeos. So let's see how we can use xeos with react query. So first of all we will install xeos. So I will install xeos with the help of npmi xeos like that and if you are using xeos then we don't need to use a fetch and we also don't need to convert this into a jason with the help of xeos this will handle it automatically. So let's see how we can do that. So inside that first of all we will store this in a variable. So I will make this data or here we are using async so that's why we need to write await keyword and after that xeos.get inside that get we have to pass our URL or API link that we have to fetch. So I will paste it there and we have to pass it with the help of this string like that and after that we have to return a data from there like this and now we have to give the type for our weather. So the type for our weather is weather data and this will be like that and now if we will check our data so I will copy this data from there and let's console log the data. So here I will write console.log and this is the data and let's see our data there. So here we are getting error here because again here we are again using a create context in our page and we haven't defined our page as a use client. So we have to use a use client there. So here I will write a use client like that and now our error is gone and if we will see our output so let's see the data. So here now you can see that we got our data properly there that we need. Now what we need to do, we need to replace our API with that env API key. So I will remove this API from there and here we need to use a backtix and like that and on that backtix first we need to pass our API key like process.env and after that go to your env file and copy the variable name from there and come to your code. Come to your code again and pass your variable there like that and if I will save it again and see the output and let's refresh. So now you can see that we got our data again and why we need to type for our data. Suppose if I want two additional data so I just have to press dot and now you can see that I am getting automatic suggestion like I want to see the city. So I will just simply write city.country. and city.country and let's save and see the output. So now you can see that I am getting a in so it means India and let's see something else. So let's see data.city.name. So now you can see that we got our city name that is Pune and now we don't need this code. So let's remove this one. Now let's also create our full page loading component when our data firstly load. So how it will look on the loading state. So for that we will create a div and inside that div we will pass these class names that is flex, items, center, minimum height will be screen, justify center and inside that we will pass our loading text. So this will be like that and inside that we have to pass our class names, class name that is animate bounds and if I will save my code and see the output. So now you can see that this will look like this. Now let's create these UI. So here I will create a main tag and inside that main tag will give the class names and the class name will be padding x3 and max width will be 7xl and mx will be auto and this will be flex and flex column and gap will be 9 and width will be full and I am giving a padding of 10 and padding top will be 4 and inside that div, inside that div we have two sections if you will see the final output. So first section is like today data, so from this container to this container we have a today data and after that we have a 7 days forecast data. So for that we will create a section tag and we have a two section tag. So first section tag will be today data, 7 day forecast data. So first of all let's create a today data. So here inside that we will take another div and this div denotes to this container. So this will contain this date and this data. So if you will see there, so inside that we have also a two div or two container. So here I will take like first one is a S2 and after that so let's first of all style this S2 div. So inside that S2 div we have a flex and gap of one text will be 2xl and items center. So why I am taking this flex because if you will see there, so firstly we are getting a day and after that we are getting a data. So these two will be in a separate div or container so that's why I am taking like this. So for that take a paragraph tag there and now first of all we have to show a day. So if you will see the data there that we are getting from our API. So let's go to there and just write data there. So now you can see there we are getting our lists and inside that list we are getting our date. But with the help of date we need a, but with the help of date we need a day and let me tell you another thing in that array we are not getting any forecast data from the backend. We are just only getting the data by hourly wise. Hourly wise means we are getting all these lists differentiate with three hours. For example we are getting whether of like 12 o'clock and after that 3pm and after that 6 o'clock. Likewise we are getting all these data so we have to make some logic and differentiate with 7 days forecast data. So here first of all if you will see on the UI on that place we need to show a day and date of first list of data. So for that we will separate our first list data. So for that I will create a variable like first data and inside that first data we have data.list and we need a first list like that and let's check that date. So from that date we are not getting a day in the form of like Monday, Tuesday, Wednesday. So what we need to do we need to convert this date into a day. So for that we will use another library that's name is date FNS. So let's go to the browser and search for date FNS. So there you will get that NPM website and go to there. So now you can see the use case of that date FNS but don't worry I will also show you the use case of this library. So first of all copy this installation code and come to your code and install this library and after installing our library we have to show a day on that place. So what I need to do I need to use a format from date FNS. So I will import it first like that and after that we have to use parciso and we have to also import this parciso from date FNS, date FNS like that and inside that parciso we have to pass our data. So our data is first data dot date like that and maybe we don't get some time our data. So for that case we will pass this empty string because we must have to pass something there otherwise this will show us an error and after that put a comma and after that we have to pass a second parameter of format like which type of format we want. So to show our day we have to pass a EEE four times like that. So here we are still getting an error. So I have tried so many things why I am getting error. So I find out like on that latest version this is not working. So we have to use a previous version. So for that I will again go to that library and I will click on that versions and I will use that 2.30 version. So when you will click on that one so here on the right hand side you will get that installation command for that 2.30 version. So I will click on that one and open a terminal here and install this version. So we have successfully installed this version. Now our error is gone. So you can see that our error is gone and our code is working fine and if I will save this one and see the output. So now you can see that here we are getting a Tuesday and let's see there now we need a date. So for the date we will again go to the code and here we need another paragraph and inside that paragraph we will pass our code like that. We will use again same as it is like format and inside that we will use parse ISO and we are parsing that date and after that we need a format like DD dot mm dot after that yyy. So when I will save this one so now you can see that we got our date like this format and let's also give the class name there and I will give this text LG and this text will be 2XL and this will be LG and when I will save this so now this will look like this. Now let's create this component or this container. So if you will see there so here one thing is common. So here for this one I have created a common component and now I am using a same component in this one this one this one and this one also. So what we will do we will create a separate component with the name of container and after that we will use this in that place. So let's go to the code again and on our components folder we will create a new file with container dot psx. Again let's type tsrfc so this will create a normal format function for our component and here let's style our div. So by default we will pass widthful and bg will be white and border, rounded, excel and we will also pass flex and padding y will be 4 and shadow will be sm and now what we need to do we need to pass a children there and we also need a like if user want to pass extra classes so they will pass easily. So before that first of all we will use div props like if the user maybe pass like any on click or any something so what we will do we will pass all these props there. So let's see how we can do that. So for that here we will just simply write props and what will be the type of that props this will be the react dot html props div element. So why div element because here we are using a div so that's why we need to pass a div element there and after that here we will use a triple dot or we can also say that rest operator and on that place we will pass our props like that. So with the help of this props we will get all these possible props on that place and now we also don't need this container and extra div we can just simply auto close. So this will also like accept or give us a child props and now we need to pass extra classes if the user want to pass a extra class name. So I will cut this class name and use a curly bracket there and here we need a cn function again and on that one we need to pass our default classes and inside that default classes we will use props dot class name like this and here we have successfully created our container component and we don't need this type props. So let's remove this and copy this container from there and now we need a container in that place. So I will import it there like that. So for that I will use a control space and press enter. So this will import the container. So on that container what we need? We need this temperature and like fields like and this minimum and maximum temperature. So here first of all let's give the class name there because we want to pass extra classes. So here I will just try it simply class name and now you can see that we are getting all the possible props for our div with the help of this rest operator that we are using and inside that class name we have already passed a flex so we don't need to give a flex and after that we need a gap and we need a padding x of 6 and items will be centered. So why I am doing this one because if you will see there here we have three elements. First one is a temperature and this is fields like temperature and after that we have a minimum and maximum. So this will be in the form of column and if we will go to there again. So on our left hand side we have our temperature and on our right hand side we have our weather icon and time and temperature. So first of all we will create this one and after that we will create this one. So for our temperature let's give a div and inside that div we need this class name that is flex, flex column padding x4 and after that we need a temperature. So if I will console log there and see the data. So let's go to our data. So here on our main but here is one problem that we are not getting our temperature in Celsius. We are getting our temperature in Kelvin. So what we will do, we will create a function that will convert our Kelvin data to Celsius. So let's go to the code again and on our utils we will create a new file and give that file name to convert Kelvin to Celsius.ts and we need to export this function and we need to use this code. So here we are accepting a Kelvin temperature and after that we are from that Kelvin temperature we are -sing 273.15 and after that we are using a math.flow to remove all the decimal parts and keep the integers. Maybe you don't know how to make this function like convert Kelvin to Celsius. So what I have done there, I have just simply go to the chat GDP and tell that chat GDP like I'm getting the temperature data and I need that data into the form of Celsius. So chat GDP understood and he just simply create a function for me. So I'm just using their function and this works perfectly fine. So let's come to the page again and here what we will do, here we will pass this function there and we also need to import this function and inside that function we need to pass our first data.main.temperature like that and here we are also getting an error because this function is not conditional and maybe from our data sometimes or maybe this is loading maybe this is on the loading state. So we must have to pass something there. So for that we will use a double question mark. So it means like suppose on the left hand side our data is not coming. So this will pass this data. So for now I'm just passing this one but you can also do one thing. You can pass a default temperature there. So in that case what I will do, I will just copy that temperature from there and pass it there like that and now we need this temperature text that is something circle like that and when I will save and see the output. So we are getting an error. So let's see why we are getting error. So I guess because I haven't saved this code. Now I have saved all of this file with the help of control K. You can see that I have pressed control K there on my this bottom bar. I have pressed save. So with the help of this all of my pages are saved. Now see there here we are getting a 23 degree and also maybe you will not get this degrees text. So you just have to simply go to the Google and find for degree. So you will get it from there or anywhere from there anywhere from the Google. Just copy it from there and use it on the on your code and now what we need to do, you need to add this fields like and this and this will be inside the span tag and the class for this span tag is will be the text will be 5xl and this will be inside that span tag and now let's create another paragraph tag and inside that paragraph tag we need to pass this class name that will be text extra small and space X will be one. So space X means this will give a space of four pixel and after that I'm using a white space no wrap. So with the help of this white space no wrap this will not break the line and inside that we will use text that is called fields like and after that we have to pass our fields like temperature like this one and let's see the output. So we will get our output something like this one and after that paragraph we have to take another paragraph tag and inside that paragraph tag we have to pass our minimum and maximum temperature. So first of all let's give the class name for this paragraph tag. So this will be the text extra small and space X will be two and inside that we will use a span tag. Now we have to pass our minimum temperature and maximum temperature like this one. So I'm again using that function and on that I'm just passing a first data dot mean dot temp min. So we will easily get this data from our API. Suppose if I will press a back button so now you can see that I am easily getting also a proper session there and after that we have to put this decrease sign and this arrow text. So you will easily get that arrow text from Google and now let's save and see the output. So now you can see that we are properly getting our minimum and maximum temperature and now if you will see there. So we are not getting any space between this date and this container. So let's give the space. So for that here we will add the space on that place on the section and on that tab. That will contain our H2 that will contain our H2 and this container. So let's also give the space there. So here we will give the space of space Y of two and let's see the output. So here we got our space. Now let's create this. So for that come to the code and here and after that we have our time and whether icon. So what we will do for that. So for that again create a new div and inside that div we will add a class name. So let's add these class names. This is flex and we need a gap of 10 and on the SM screens we have a gap of 16. So by default on the mobile screens we have the gap of 10. So 10 means 40 pixels and when this will come to the SM screens. So we will have the gap of 64 pixels and what we are doing if there is overflow or more data. So after that we are writing overflow xauto. So with the help of this we will get our scroll bar and after that we are giving a widthful and justify between and padding right and you know what is the mean of justify between with the help of justify between and after that here comes our main part we need to map our data. So here we are getting our data from our API from there. So I will write data there. So this will be the data and after that we have to map our list. So after that we will write data.list.map and parenthesis inside that arrow function. Inside that arrow function we have to create our main part. We have to show our main like weather icon and temperature. So for that let's create another div there and first of all let's pass a key otherwise this will give us an error and here first of all we are getting a d means data and second parameter is index and inside that key we will pass i. And after that let's give a class name for that div. So for the class name we will use a flex and flex column. So we are using a flex column because we have to show our data in the form of columns. So currently we are working on that part. So first of all we will show the time after that weather image and after that obviously temperature and after that we are giving a gap, item center or text small or font semi world and now first of all we have to show our time. So for that again we will use a paragraph tag and inside that paragraph tag we will pass our time. So for the time first of all we will use a format from our date fns library. So for that I will write a format and inside that format first of all we have to pass. So again we have to use a parse iso and now we have to pass our time. So time will be t.dt text. So with the help of this we will get the exact date from our data and after that we have to pass a format of our data. So here I will write h.mm and a. So with the help of a we will also get a am or pm and now let's save and see the output. So yeah currently you can see that we are getting the time of 3 pm, 6 pm or like 12 am like that. So if you will see there so currently this is getting in two lines but what we need, we need in a single line. So for that we will pass a class name that is called white space no wrap and let's save this and see the output. So yeah we got our data in a single line and now let's add a weather icon. So before that first of all let's add a temperature and after that I will show you how we can add a weather icon. So for our temperature let's again take a paragraph tag and pass our temperature like that like we have done before. D.mean and temp means temperature and if we are not getting any temperature so by default we will pass 0 and after that this is the degree text and let's save this. So we will got our time and temperature. Now we have to show our weather icon. So for the weather icon here we have to create another separate component and so let's see how we can create our weather icon component. So on that components folder here I will create a new file with the name of weather icon dot TSX and let's write TLSFC to create a sample format and inside that we have to use a image tag. So I will import image from next image and here we have to remove curly bracket and after that we have to pass our source there. So what will be the source of our image. So for this I have another API of open weather so let's go to your browser and see this one. So now you can see that with the help of this API we will get our weather icons. Just we need to replace this like 01d so if I will pass 02d so we will get different icons with the help of this. So we will use this link. So in the place of source we will pass our API source like that and after that let's style our image. So here let's pass height and width for image. So width will be 100 and height will be 100 and let's also pass alt. So on the alt we will pass weather icon and we have to also pass a class name. So for the class name I will use absolute there and height will be full and width will be full and here on that day let's use a cn function suppose in that case if we need to pass any extra class names. So again we will use cn utility function there and inside that we will pass our default classes. So our default classes is relative and inside that relative we have to pass a h2, h20. So h20 means height will be 20 and width will be 20. So here our height and width will be full and what is the mean of this height and width. So with the help of this height and width this will load that much of our image on that quality. Since this will load 100 pixel width of height and 100 pixel of width this will load and after that we are customizing our height from there. So mainly this height will apply and with the help of this we are getting that much of quality image and now we have to pass our icon name props there. But here we also need all of our props there. So in some case if we need to pass any extra property there. So on that case what we will do here we will write props and after that what we have done for our container component. So I will go to the container component and I will copy this props from there and paste it there like that and now we need additional prop that is called icon name so that I am passing there. So I will pass it there like that and this will be the type of string. So I will write it like that and we need a single and operator. Now this is fine and on the place of icon we have to use a props.icon like that and here we need all of our props. So here I will write props like that. So with the help of this I am passing all of our props on that div. Now we have successfully completed our weather icon component. So let's save this one and copy this component and come to our page and we need our weather icon component on that place. So I will paste it there and just simply input my weather icon component there and we need to pass an icon name. So if you will come to that data, I will press 12 and let's see the data and inside that data go to the weather and inside that weather you can see that we are getting our icon. We are getting a value of 04n. So this is the icon name that we need to pass in our icon component. So here I will write it like d.weather and on that weather we need to access a first property and after that we need to pass a icon like that and let's save this and see the output. So here we are getting an error because here we are using a open weather image API. So we need to configure this in a next.js. So to configure this, first of all let's click on this one and after that copy all of this code and come to your code and go to the next config file. So I am just pressing a control P and finding a finding with the help of this next config and replace all of your code with this code. Now what you need to do, come to your output again and see there that's what error I am getting. So this is saying that I haven't configured that host name. So just let's copy this host name from there and replace it with example host name and we don't need this path name and port and let's save all of our files and reload this page. Now you can see that our error is gone and we got our images with the help of our API and here one thing also like if you will see there so currently I am getting all of our images same because from our API we are getting these images but on that weather image API on the place of D if I will write N. So now you can see that I am getting a night image. So what we need to do, we need to create a function to like to separate our data like currently we are passing a night image or day image. So here I will create another function like get day or night icon and on that icon we will pass our current date and time and our icon name. So what this will return us. So if it is before 6 am time so this will return a night icon and after 6 am this will return a day icon. So let's go to the code again and on our utils we will create another function. So here I will come to the utils folder and create another function that is called day or night icon.tsx. And inside that we will use this function. So this function will accept our icon name and date and time in the form of string. So here what we are doing we are just checking there like if our time is less than 6 less than or equal to 6 am and if our time is greater than equal to 6. So basically what we are doing we are checking our like it's time between our 6 am or 6 am to 6 pm. So this means our day time. So here we are checking like it's the time if this is the day time so we are returning a day otherwise we are returning a end there. So this function I have also created with the help of jigdpt. So I will just copy this function and come to that code again. So for now just copy this one and comment this above and here first of all let's use this get day or night icon import this function and inside that let's pass a day dot weather and first of all we are passing our icon. So dot icon like that and second parameter will be our date. So for that put a comma there d dot txt like that and let's save this and see our output. So on that night and day we are getting a same icon because for n night and day we have a same icon. So for example if I will check for day icon so now you can see there we are getting a same icon so that's why here we are also on our output we are getting the same icon and let's see the final output again. So here basically we have done our main parts the studio's date and temperature. Now let's create a UI for our 7 days forecast data. So now we will create this UI. So let's again come to your code and come to the page dot ESX file and there we have created another section for our 7 days forecast data. So inside that first of all we have a paragraph tag and inside that paragraph tag we have to write 7 day forecast. So this will be like this and let's also style this paragraph. So this will be the class name of text to excel and we have to also give the class name for our section tag. So on that section tag we will give the class name of flex and width will be full and flex column gap will be full. Now comes our main part if you will see the main app. So inside that there is a same component that is repeating 7 times. So what we will do first of all we will create this component. So let's come to the code again and give this component name called forecast weather detail and now let's come to the components folder and inside that we will create that file that is called forecast weather detail dot TSX and now we will write TSRFC to create our sample component and now inside that we will create our forecast. Now we will create our forecast detail component. So if you will see the final output so this component is wrap up with our container component. So first of all we will use a container there. So I will write container and we have successfully imported our container component and inside that container component. But before we make this weather forecast I forgot one thing we have to also create this section. So first of all let's create this section and on that section we have to show a description there and extra details on that place. So let's come to the code again and we need to go to the page and after that we have to create another div and inside that we have our two containers. So first of all let's give the class name for that div that will be the flags and gap will be 4 and inside that we have our two containers. So first one will be our left and second one is our right. So I am just commenting it there and after that let's import our container there and inside that let's pass a class name. So we will use this class name that is width will be fit according to our content. This will resize our width and after that we are just passing a justify center, flags column and padding x will be 4 and items center and inside that we have to show a weather description. So first of all we will take a paragraph and after that we have to show a weather icon. So what we have done there for our weather icon, so I will just copy this one and simply paste it on that place. But here on the place of data we have to write a first data and on that place also we have to replace D with the help with first data and this is giving us an error like this may be undefined. So what we will do we will use this double question mark and here we will pass an empty string and we will do the same for this one also. So this means in some case if we don't get a data so this will pass an empty string there and on the place of paragraph we have to show a weather description. So what we will do we will show a description of our first data. So here I will again use a first data dot weather and on that weather we have to select first element and we have to show a description of our first element like that and if we will see the output so this will look like this one and now we have to style our paragraph. So here I will give this here I will give this capitalized and text center like this one so this will look like something this. Now let's create this right div so for the right div we will again use another container so again I will just write a container like that and inside that container we have to change our background color. So for that let's use our class name and we have to use a yellow color so I will pass a bg yellow 300 like that and this will have the opacity of 80 and after that padding x will be 6 and gap will be 4, justify between and overflow x auto and when I will save this so currently we will just get this output. Now what we need to do we need to create a separate component to show our weather details and if you will see there these components and these components are the same so what I will do I will create a same component for this one and after that we will use this component on that place also. So now we will create a weather details component so let's go to the components folder again and here we will create a weather details.tsx file and inside that here we will write tsrfc. Now let's create our weather details component so on that weather details component we won't use any div because we are styling it from parent container. So let's again come to the weather details and for our weather details component we have to create another component that is called single weather detail. So here we will create a single weather details component. So here I will write function single weather detail and let's also create a type for our single weather detail props and here we will write a function like that and we will pass our props and props will have this type like that and here we need a return and on that return we will currently we are creating this div that div will contain this description or after that image and this value data. So that's why I have taken here three props that is information icon value. So first of all let's create a parent div there on that parent div we will give the styling of flex call, testify between gap2 items center and text extra small and font semi old and text black and I'm passing a text black with 80% opacity and inside that we need another paragraph that will contain information so I will use it like that class name and I'm using a white space no wrap so with the help of this white space no wrap this text will not break into a separate line this will show our data in a single line and here we have to do like props.information and now I have to show icon on that place. So here I will also pass the icon from our props so I'm just writing it like that and here we will use a props.icon for the icons we will use a react icons so that's why I'm passing there text 3xl so this will apply all of our icon that we will pass on that component and now we have to show a value so for the value we will use a props.value like that. Now we have successfully completed our single weather detail component. Now what we need to do we have to just simply use that single weather component on that place and we have to pass all these props so on the first prop we have icon and on the second one information and on the third one we have a value so if you will see there this data will be always same like visibility, humidity, wind speed, air pressure or sunrise I mean that information and icon will be always same for like you can see there I'm getting the same information there and for this one this one same same same like humidity humidity wind speed wind speed so I will pass these data manually and we have to pass these values in our props. So how we can do that so if you will see there first of all we need a eye image and like wise here we are using a drop image and after that wind image and likewise here we are using a muted image so for our eye we will use this icon lui so for the eye we will use this lueye icon and we and we will import this icon from react icons so I already know what is the icon name but you can simply go to the react icons and search for your icon suppose if you want to search for eye icon so just simply go there and search for eye like that then you will get your icon then you just have to click on that icon and click on that component then you will automatically get copied your code but in that case I already know the icons name so I will just import import my icon so to import my icon I will just simply import it from react icons like that and here I have to import it from lu like this one and now we have to create our props for this one like see the final output so we have to create our props for visibility, humidity, wind speed like that so what we will do we will create our props like this and this so this component will have these props like visibility, humidity, wind speed, air pressure, sunrise and sunset let's copy this props type from there and paste it there and now let's write it props there and here we have to write props.visibility and likewise and likewise we have to also do it for like humidity so I will just copy this one and change the name from visibility to humidity and I have to also change the icon so I already know the icon name so the icon is fi droplet and I have to also import that icon so I will import my icon like this one and likewise I have to import all of our icons and all these possible props so I will just copy and paste from my previous code and here what we will do we will pass some default values if like suppose if we are not passing any values from the API so for that what we will do here we will create another variable and on that variable we will restructure all of our props from our props and we will pass our default values and after that we will pass our values on that component like that and let's copy this weather details component from there and now we have to use this weather detail component on that place and let's also import our weather detail component here so here we have to pass all of our props so first is air pressure so for the air pressure if we will go to our data so let's press F well there and see the data so on the main you will find that pressure so this is the air pressure so we have to just show it exactly like that so first of all we have to show a visibility so let's come to the visibility so when you will click on that city so on that list you will get the visibility there so it doesn't matter what you will pass on that component first this will apply all this in that manner that here we are passing now on that firstly let's pass a visibility so for the visibility what we need to do so for all these data we have to select first data and from that first data we have to show all these additional data so here if you will see in our data so we are getting our data in a meters and if you will see the final output so we have to convert this data into a kilometers so for that again we will create another utility function that is meters to kilometers so let's go to the utility files and here we will like meters dot 2 kilometer dot ts and inside that we will create this function that is called meters to kilometers and this will accept a visibility in meters and after that this will convert this into a kilometers and I have also created this function from chat gdp so if you are stuck in any place so you can just simply ask to the chat gdp like I want to create this function or component or anything so let's just copy this one and we have to use this on that place so let's pass this function there and import our meters and now we have to use our first data inside that first data we have to pass a visibility and in some case if our visibility is not coming so we will pass our default visibility that is 10,000 that we are getting from our data by default and let's also pass a air pressure so for the air pressure first of all let's use a back ticks there and inside that back ticks we will use a color symbol and inside that we will pass our first data dot main dot pressure so we will get our pressure and after that we have to write a hpa and when I will save and see the output so here we are getting error so I guess I have imported components two times so let's check there so there is something wrong in weather details component so let's check it there so here I have created this component on that place and I am just importing it so let's remove it from there and now you can see that our error is gone and we are now getting another different error so I guess I haven't saved this meters two kilometer function so let's save all of our files so now you can see that our error is gone and we are getting our data so here you can see that first of all we are getting our visibility and this 10, 18, hpa pressure and we are also getting our others data so we are getting our others data because if you will see on that here we have passed our default values for our props so that's why we are getting our default values there now let's go to the code again and pass other datas so other data will be humidity so for the humidity again we will do the same here we will use a backticks curly bracket and dollar symbol inside that inside that humidity so again we will use a first data and main dot humidity and we have to show a humidity in the form of percentage so that's why I'm writing a percentage there so we got our humidity 43% and after that we have to use we have to set a sunrise so for the sunrise so if you will see there on the data we are getting a sunrise and sunset of that city so here we are getting some values for the sunset and sunrise so we will convert these values in our time so for that again we will use a date fns function that we have downloaded previously so let's see how we can do that so here we will write a format and inside that format we'll use a format we will use a from Unix time and we are importing a Unix time from date fns function and inside that we will pass our date we will pass our data dot city dot so first of all we have to pass a sunrise and after that we have to pass a format so format will be h dot mm and here we are getting error because we have to pass some values so what I will do I will copy that value from there and because we must have to pass some values so that's why we have to pass it like that and we have to pass this in the form of string so there it means we are passing our sunrise data there and in some case if we don't get any sunrise data or we are cutting undefined values so we are passing this instead of this and let's add another parameter so we will do the same for sunset so we just have to add a sunset there and after that let's add a wind speed and for the wind speed so if you will see there in the final output so we are getting our wind speed in a kilometer per hour but if you will check that data and here let's check the first data dot wind here we are getting our speed in meters per second and we have to convert this speed into a kilometer per hour so for that again we will create another utility function so let's come to the code again and go to the utils file there and here we will write a convert wind speed dot t s and we will and we will create this function so with the help of this function this will accept speed speed in meters per second and what this will give us this will give us a speed in speed in kilometer per hour and let's save this and copy this function and use this function on that place and let's also import this function there and inside that first of all we have to use this and inside that function we have to pass a first data dot wind dot speed and if this is undefined so we have to pass some sample data so i will use this one and let's save this and see the output so now you can see that currently we are not getting any error in this page and everything is fine and we got our ui like this now let's create a ui for our forecast seven days so here what we will do for this one we will create a separate component and after that we will map this component according to our data so first of all let's create a forecast weather detail component so here we have already created our file and now let's create this component fully so on that component firstly we have to use a container tag there and inside that we have another section and inside that we have two sections so first section will contain this weather detail icon and these data and another section will contain these data so let's create a section tag there and inside that let's pass a class name and let's also give the class name so this will be the class name and we have already applied a flex there so we just have to pass a gap four and in our first section firstly we have another div and inside that div we have a weather icon component so let's import our weather icon component there and on that we have to pass our feather icon props for this component so what props we need first of all if you will see there here we need a weather icon and date and day and after that we need a temperature and feels like temperature and obviously minimum temperature maximum temperature so we need all these data and we also need all these props that is visibility humidity wind pressure so what we will do we will get these props from our previous component so let's see how we can do that so firstly we have created a props for our these data that i have told you before like icon date, icon date, day, temperature all these and now we need all these props also so for that we will use a extend keyword and which type we need we need these weather details we are already exporting these props from that place so i will just copy it from there and come to my weather forecast detail component and i will just paste it there and let's press control space and import so this will import and extend these props so i will use this on that place and let's give this name a props like that and what i will do i will pass some i will pass some default values for these props so what we have done for this component that is weather details we will do the same for this forecast weather details so this will be something like this and now first of all let's pass our now let's pass our props there so here we need a icon name and on that icon name we will just simply pass a weather icon and after that and after that we have a paragraph inside that paragraph we have a date and after that date another paragraph and inside that paragraph we have a day but our day will be something small so i will give this text as m like this so if you will see in the final output so currently we have just created this part now let's create this ui so for that again use another div and inside that div we will use a class name and this will be the flags and flags call and padding x will be 4 and first of all we need a temperature so here we will use a span tag to show our temperature and obviously we need to convert our temperature into Kelvin to Celsius so that's why i'm using this Kelvin to Celsius function there and now we need our paragraph tag inside that paragraph tag we need to we need to show our fields like temperature so this will be something like this this will be text extra small and space between these fields likes and temperature will be four pixels so that's why i'm passing like that and i'm passing also white space no wrap so this will not break into two lines and after that let's show the description so for the description we will just simply write description so this is our description for our weather data and now we have completed our this left section now let's now it's time to create a right section so for our right section again we will create a section tag there and inside that we will use these class names that is overflow x auto and flags justify between gap 4 padding x4 width will be full padding right 10 and inside that we will use our weather details component so this is our weather detail component so let's copy this one and import this component on that place and now we need to pass all these props all these props of this one so here is a one trick like we can also pass it by one by one like here we can do like props dot air pressure something like that but here is another trick what we can do we can just simply write curly bracket there and triple dot and simply we can write props and we can simply write props so this will automatically get all of props on this one with the help of this and that's it for this component that is forecast weather detail component and let's save this and copy this component and come to the main page and we need this component on that place and here we have to pass all these props that we need there but before that we need to do one thing that is if you will see on our final data so on that object here we are getting a 40 arrays so what we need to do we need to make some logic and we need one data for every single day and on that 40 data we are getting four or five data for the same day so what we will do we will create some logic and with the help of that logic we will only filter out a single data for every day and store it in a separate array and after that we will map that array so let's see how we can do that so for that we will use this logic and before that here we are getting an error because I'm using a set so if you are getting any error while using a set keyword so you have to go to the ts.config file and here you have to write instead of es5 that is you have to write es2015 and let's save this file and now you can see that now we are not getting any error regarding our set and let's understand this logic so currently what's going on there this is filtering our data date wise so with the help of this logic we are getting a unique dates and after that we are mapping that unique dates and from that unique dates we are extracting the data here we are filtering a daytime data like after 6 am and before 6 pm so let's copy this array and we need to map this on that place and let me tell you one thing I have created this logic from chat DDP means I know what to do I have just explained the chat DDP like I need to create some variable in that way that this will get the data in the day for that this will unify the data and give a single data from every day something like that and let's copy this data and now we need to map it there so let's use a curly bracket there and after that use a map inside that map use an arrow function and inside that arrow function let's map this component and first of all let's pass a key so here firstly we have to import these components so that's why we are not getting a suggestion for our key so now you can see that we are getting all suggestions for our props so firstly let's pass a key and inside that key before passing the key let's pass a T and I so D means data and I means index so in the key we will pass I and after that we will pass our all of our props so I'm just passing all of our props like that so if you will see there I have passed a description with the help of D dot weather and on that weather I am selecting a first data and after that I am passing that description and for the weather icon I'm just doing the same and for the date what we have done previously I'm just converting that date in a proper string format but on that time we need our date in that format so that's why I have written a dd dot mm likewise we are passing all of our props that we have previously passed I haven't done anything new there so that's why I've just copied this code from my previous project and paste it there and now let's save this and see the output so now you can see that we got our UI like this but there is something wrong this is not in the proper center so let's go to the code and see what is the issue so here on that name we have to pass our class name that is flex flex call and gap will be one and items center and now you can see that we got our data in a proper form and now there is two things left when the user will search so we have to apply a search functionality and when the user will click on that button so you need to show the weather report for that current location so first of all we will create our search and after that we will create this functionalities when the user will click on that button so this will show the weather data for that current location so let's go to the code and we have to go to the navbar component so I will click on that navbar and now we are inside the navbar component and here what we need to do if you can see there on a final output so when I start typing like Delhi so now you can see that we are getting a suggestion so firstly let's implement this functionality so for that we will create some use state so first of all we need to create a state for this value and on change so here we will give this value name to a city and set city state and we have to also import our use state so we will import our user state from react like that and we have to also create our error state like if we will go to the final output and suppose if I am typing something typing anything and this place is not exist and when I'm trying to press enter so we will get this error like location not found so for that we will create an error state like that and now we will create a use state for our sessions that will store our sessions and another state to show our sessions or not so this first state will store an array of our like sessions and second state will store a like boolean true or false our sessions is open or not and on that search value we have to pass a city and for we have to also pass on summit so we will pass it later and we have to also pass on change and for the on change we will create another function to handle input on change so we will create this function there handle input change and after that this parenthesis currently bracket open and first of all what we will do when user start typing and first of all this function will be the async function because on that on change we will get a session from our API so we have to make this as a async and here first of all when the user will start typing on that input box so we have to set a city so I will use a set city there like that so this is the set city and we have to pass that value that we will get it from that function and the type of that value will be string so let's copy this one and pass my function there and we will use e and we will pass our function like that and here we will pass our value like e.target.value like that and here we will get our value and so now we have to pass our value like that there and now on that place we have to check a condition if our value.length is greater than 3 then we have to fetch our sessions data so we will write it like that like if is equals to our greater than 3 so we will search for our sessions and on that if we will use a try catch block and on that try we will fetch our data so here first of all we will write our data variable like const response and this will be await because here we are using async and await means if this operation will take some time so that's why we are using await so it means if this will take a time so this will be it and after that here we will use xos to fetch our data xgos.get and now on that place here we will pass our api and we are getting this value from there value on the place of value we are passing a place like whatever the user will type so this will search for that location and now we have to pass the api key so what I will do on top of that function I will store that api key in that variable and with the help of this process.env.next public weather key and I have shown you before from where we are getting this process.env.next public weather key so we have to go to that file that is there on my left hand side this is .env.local and here I have defined my api key now inside that try block let's create another variable that is called suggestions and this will be equal to the response.data.list.map and after that here we will use arrow function and for now I'm just using item and this will be the type of any now what we need to do we need to store a name of that place that will match so here I will write item.name so this will map over there and store all of our suggestion in a suggestion variable now we will use a set suggestions there and inside that set suggestions we will pass our suggestions and here we will set our error to null if everything is okay so we will set our error is to empty and after that here we will also open our suggestion box so for that here I will write a set so suggestions that is true and inside that our catch block what we will do we will set our suggestions to an empty array and we will also hide our suggestion box or suggestion container so for that again we will write like set those suggestions and here we will set it false and now comes to the else part so here I will write else and inside that else we have to do the same that what we have done for our catch block so I will copy it from there and paste it there and we are using a use state there so we have to also make this component as a use client so here we will write a use client on top of our file and now we will come on the UI and on the UI we have to show our suggestions so what I will do for the suggestions I will create another component so I will write a function there and this will be the suggestion box and here we will use a UL tag and inside that UL tag we have our suggestions so for the suggestions I will use a liteg tag so first of all let's style our UL tag so for UL tag we will use a margin bottom of 4 bch white absolute border our top 44 pixel left zero so here we are using absolute so we will use our suggestion box there on that place so here we will use a class name and we will pass a relative class name there so this suggestion box will be relative to that container so that's why we are passing that like a top 44 pixel and left zero so this will define the position of our suggestion box and after that we are passing our simply border gray 300 rounded md and minimum height will be 200 pixel and flex and flex call gap one padding by padding by two and now let's also give the styling for our ally so for the ally we will use a cursor pointer and padding will be one and this will be some rounded this will be the rounded of four pixel and on hover this background color will be pg gray 200 and now let's create a props for our suggestion component so these are the props of our suggestion box component first one is associations so with the help of this we will toggle our suggestion box and in that suggestions this will contain the array of our suggestions and with the help of handle suggestion click so when the user will click on that button like if i will search for any country so now we got our suggestions and if i will click on that button so here on that place we are applying a handle suggestion click and after that if we are getting any error so we will also pass that error with the help of that prop so now let's use an empty fragment and wrap up our code with that empty fragment and here we will use some conditions to show our suggestions conditionally so firstly so firstly we have to write a association is true or not and after that we have to check the length is greater than one or not so for that here we will write a suggestions dot length is greater than one or otherwise if our error is true so again we will show our suggestion box because we have to show a error on our suggestion box and we will again wrap up our code like that and here again we will use a and operator and on that and operator if this condition is true so now we have to show this code and if i will format so this will look like this and now what we need to do inside that you will tag if our error is true so here we will use a curly bracket and we will write error and and operator and suggestions dot length is less than one it means our suggestion is zero or we are not getting any suggestions and and operator so what we need to do so we have to show this ally and this ally will contain a error and here i have also passed a text red 500 and padding one and inside that we are passing our error and after that we will pass our suggestion with the help of map so again use a curly bracket and suggestions dot map inside that arrow function and inside that arrow function we have our ally and obviously this will contain a key and first parameter will be d and second will be i so let's take this item and on that key let's pass a i so i means index and inside that ally we have to pass our item we can also say that location name or place name and let's save this code and and when the user will click on that particular suggestions so we have to use a on click there and on that on click we have to pass our handle suggestion click so we will use the arrow function there because we have to also pass our icon so first of all let's take our handle suggestion click and inside that we have to pass our item like that and we are getting our item from there and let's save this and on that suggestion box we have to pass all of our props so here we can pass our props so here you can see that for the error city and suggestion and so suggestions i have already created a user state so we can simply pass it but for the handle suggestions i haven't created any function so let's just create a function for handle suggestion click so this is our handle suggestion click function so this function will accept a value or string so what we will do when the user will click on that handle click button or we can say that particular suggestion so we will set that our city to that value so that's why we are using that set city that value and after that we will hide our suggestion so that's why we are passing this set suggestion is false and there is a one trick that i have that i'm using lots of time like we can simply also pass our data like error equals to error or like handle suggestion equals to like copy this and paste it like that we can also pass our data like this but here's another trick that we can do just simply copy all these data and put a double curly bracket there and use a spread operator there and paste your props there so now you can see that we are not getting any complaints or error there and now let's create a function for our on summit so we will create a function that is handle summit search so i will just write here function handle summit search and inside that function this will accept a parameter like e what will be the type of e so you already know what is the type of e like if i will go there and simply type and simply write my function with the help of using arrow function and when i will hover over that so now you can see that i got the type for that e so i will copy that type from there and paste it on that place and first of all when the user will submit so what we need to do first of all see there when i will click on that so this is our current application so when i'm clicking on that one so now you can see that our whole page is refreshing so we have to avoid to refresh our page so for that here we will use a e.prevent default so with the help of this we can prevent our page from refreshing so i will copy this function from there and use my function on that on summit like that and let's save our code and when i will click on that so i'm clicking and pressing the enter but my page is not refreshing and let's write a further code there so here we will write a condition if our suggestions.length is equals to equals to zero so it means we are not getting any suggestions so what we need to do on that condition and i have clicked on that button so we have to show a error state so here i will write a set error and on that set error we have to pass like location not found it means on the else condition means our suggestion length is greater than zero so here we will remove our error so for that here first of all we will set our error like set error and our error will be empty and after that we will set our city and here we will also set our like set suggestions is false and when i will save my code and when i'm searching anything so now you can see that i'm getting a proper suggestions and when i will click on that one so my search box is working perfectly fine but see there when i'm clicking on that one so this is not working perfectly that we want so here what we need to do whatever the city name we are getting here we need to pass it from our this level to page level so if you will see on the code so if i will come so let's firstly close all the files and let's firstly come to the page and on that page here we need to change our city so currently i'm just passing a pune but here we need our city whatever we are getting on that navbar search so for that we have to do something like we are setting our city from our navbar component this will somehow we have to get our city on our page and after that if our city if our city is changed so this api or data will again call and after that we will get our data so for that we have to use a global state so for that we will use a joti so let's see how we can use a joti global state management so let's go to the browser and search for joti and here you will get the official website of joti so this is the global state management solution so first of all let's install a joti so let's copy this npm code and come to your code and install the joti like that and after that in your app folder let's create a new file that is called atom.ts so here we will create our atoms or we can also say that here we will create our state and after that we will import in this file and in our navbar file so on our atom file there is a main state and we are just import it into a page and navbar so this will work so let's see how we can do that so first of all we have to create a place atom so what we will do we will use a export keyword and here we have to create a variable so i will just simply give that const and variable name that is place atom so currently we need a atom for our place or location so that's why i have given this name as a place atom and let's also import our atom so we need to import our atom from joti and here like we use a use state so we have to pass some default values so currently i'm just passing a default place that is republic of india and now what we need to do let's copy this place atom and come on the navbar component and after that here what we will do we will exactly use it like we use a use state here i will just simply create a use state snippet and after that on the place of second we have to use our place atom and on the place of use state we have to use a use atom from joti and now we can give any name that we want but we have to give a name like we give as a use state name so we can give any name but here we need a place so i will give this place and here we need to give a set place like that and now what we need to do we need to set our place when the user will click on that summit button or like enter button so we need to pass our set place there and here we need to set our place so our place is city so this is the city and when the user will click on that button or this button so currently i'm getting error so let's save our file because i haven't saved my atom file so that's why we are getting error so now our error is gone so i'm talking about this city when the user will click on that button so what this will do this will store that city on that variable now we are using this as a global state so what i will do i will just simply copy this one and come to my page and paste it there like that and we can give this any name that we want this doesn't matter the main thing is that this value should be same that we are giving there so we have to firstly import this one and after that we have to import use atom from jotai and this is coming from that atom from there and now we have to do it like we do for like we do as a for user state so we need this place on that puni so here we will use a curly bracket and dollar symbol and we will pass our place like that and when i will save my code and see the output so let's repress and search for like tele and click on that one and search so now you can see that this is not working so this is not working because when any data will change so we have to refetch that data so for that on that use query we are getting another parameter or prop that is called refetch and we have to call that refetch when anything will change so for that we will use a use effect so let's write a snippet for our use effect like this and let's also import our use effect so let's copy this one and write here import use effect from react like that and after that we have to pass this refetch function there and here on that place we have to pass a parameter so the parameter is place when our place state will change so we have to refetch our data and here we have to also pass a second parameter like whenever refetch will change so we have to also refetch that data and let's save this one and let's search for belly and click on that so our data is changed like if i will search for so now you can see that currently here we are getting a degree temperature and let's search for my location that is made it so let's click on that and click on that one so now you can see that our data is changed but currently we are not getting any loading state and our name is not also changing on that place so first of all let's change the name and add a loading state so to change the name on our neighbor we will pass our name from there so let's go to the neighbor component and here let's create a one prop that is called location and let's import our location there and now what we need to do here i have written somewhere india so in the place of india we will write it location and again we will go to the page and on that page we have a prop of location and on that location we will use a data.city.name and let's save this and now you can see that we are getting our city name there let's search for any other city like if i will search for pune before that see the current temperature for merit and let's click on that button so now you can see that our data is changed and we are getting currently 18 degree temperature and here name is also changed but the main problem is that we are not getting any loading state so for that again we will create another state and this state will be also the global state so for that again come to the atom file and here we are creating a loading city atom and by default our loading will be false so let's copy this loading state loading city atom and come to the name bar and like we have done for this place atom we will do the same for our loading so here in the place of place atom we have to pass a loading atom and let's import this one and on the place we don't need a first parameter so we will just write it like that and for the loading state we also don't need a loading there we just need to set a loading from that place so i will just write it like that and for this on the place of set place i will give this as a set loading like this and here we are getting error because these two are same so let's give this a place and now this is different so that is fine and now we have to handle our loading state so whenever the user will click on that handle submit button handle submit button so we have to control our set loading so first of all when the user will click on our button so we have to set our loading will be true and when we are inside that condition like our length is equals to zero our suggestion length equals to zero so we will just simply make it false like that and on that else condition we will also make our loading will be false it means our like data is first and we have to make it false and what we need to do we need to perform these three operations after like 0.5 seconds so that we can see a loading state because our data is getting like too fast so that's why we are not getting any loading state so for that we will use a set timeout and inside that set timeout we will pass our these three parameters and here we have to pass our time so i will pass it like 500 so 500 means 0.5 seconds and let's save this and we have to also use this variable in our page so i've copied from there and let's use it on that place so let's also import our loading city atom on our page and if you will see on our final output when i'm clicking on that so we are getting a skeleton loading components so we have to also create this one so let's come to the code again and here what i have done i have just simply copy all of my code from there from main and go to the chat gtp and i have told the chat gtp to create a skeleton loading component for me and here now you can see that what output i am getting so this is the function that chat gtp gave me i have just told him that i need to use a animate pulse because i already knew about the animate pulse so with the help of that animate pulse we are getting our div in the form of like a pulse and now we will use this skeleton component in as a conditional leaf so what we will do here we will use empty fragments and on that empty fragment we will pass this one and if our loading city is true like that so we have to write it like loading city there and we don't need a set loading on that place so this will be like this and now if our loading is true so we have to show this weather skeleton loading component so i will copy it from there and paste it like that and if our loading will true so this will show our loading component otherwise this will show our main data so i have to put a cali packet there and here i have to put our columns now our error is gone and let's see the final output and if i will search for any data like Delhi and click on that so this is our main app that we are currently working on and now you can see that we are getting a proper loading skeleton component and now this is looking good and on that place we are also getting a proper name for our location now only one thing is left or not one thing that is there's two things is left firstly let's create a function for our like when a user will click on that button so we will get our current location so let's go to the code and go to the navbar and here we have already created icon for our current location so first of all let's add a title like your current location so what is mean by the title so when anyone will hover over that so you can see that we are getting a title like your current location and now we have to create a function like when anyone click on that function when anyone click on that button so we have to show our current location so in that case we will give that function name that is handle current location and let's create current location function on that place and on that handle current location function first of all we'll check the condition like if navigator dot geolocation is true then we have to use a navigator dot geolocation dot get current position and here inside that we will use a async function so here i will write async or after that arrow function and inside that parameter we will use a position so this will give us a position so let's give any name so i want to give a position name and inside that let's extract our longitude and longitude so for that here we will write const curly bracket and from where we have to extract so we have to extract from position this will be equal to position dot odds and what we need to extract we need to extract latitude and longitude and after that we have to use a try and catch block so inside that try we have to set our like when i'm clicking on that button we need to set our loading is true so for that we will write like set loading city is true now we have to fetch our data with the help of longitude and longitude so for that we have to write our api in that form like weather or question mark and after that we have to use a let parameter and this will be equal to that longitude and after that use and and parcel hello and lawn it means we are passing a longitude and after that pass your api key like that and here after that again we will use a set timeout and we will make our loading false and on that set place that before we are setting our place with the help of that handle submit before that we are setting our place with the help of that handle suggestions on click so now we need to set our place and we are getting our place name from our this data and on that cache block if we are getting any issue so we will make our set loading state to the false and let's save this one and see the output so when i will click on that button so this will ask me the permissions to allow your locations for the first time so i will allow this one and now this is searching for my location and this is my current location and now we i'm getting the current location data now again let's click on that deli so search for deli and now if i will again click on that location current location so now you can see that i got my current location there now we have completed our search box and this current location but one thing is left like if i will go to the mobile screen so now you can see that our navbar is not responsive so let's make our navbar responsive so for that let's come to the code again and here on that we will hide it on mobile and show on md screen so for that we will use a class name that is hidden so by default this will be hidden on mobile screen and this day will show on md screen and after that here we will use this empty fragments like that and after that nav we will use this again same div there so i will just copy it from there and paste it there but here we have to change some conditions and we have to also create a parent container for this div so for that i will create another section and wrap up this code with this section and this section will contain the maximum width of 7xl and adding x will be 3 and on the mobile screens this will show but on the md screen this will be hidden and we don't need this code like hidden or md on that place and now everything is fine there so let's save this and now you can see that on mobile our ui will look like this one and let's see on a proper mobile so currently we are checking our ui in like iphone xr and now if we will see on our different screens so this will look like this so our application is fully completed and this is fully responsive so that's it now our weather app is fully completed so don't forget to like share and if you are new to my channel so don't forget to subscribe my channel because i upload videos regarding next year's tailwind css and typescript until then i will see you in next one
