Let's build a weather app with VUE.JS, TAILWIND CSS and Weather API

Hello friends and welcome back to another tips and tricks video today we are going to build this weather app using VJs and weather API and it's a relatively easy project but it's a good practice especially after we learned all about VJs in the past two videos so as you can see I have a search field here I can search for the name of a city for example Sydney Australia and if it is daytime in that City it's going to be a light background if it is night time it's going to be a dark background and I also get a 3-day forecast and more info and I can delete a city if I want to so all of these info is coming from weather ai.com and you can open an account here which is free and doesn't require a credit card and get your API key because we're going to use it so also for this project I'm going to use Google fonts font awesome and tail and I also have this folder on my GitHub that is called vew weather app raw components and within them I just have the template for each of these components we're going to use uh to save us time time and this is just HTML and CSS so we will go through these as we build our application so let's get started by creating our application using terminal and I'm going to say npm create view at latest so this will prompt us with the name that we want to choose I can call it weather app and I don't need anything I want to keep everything simple I don't need P router or testing I don't need anything except es link and preter so I'm going to say no to everything and CD into better app and npm install now that is done and since we are installing dependencies I'm going to bring in Tailwind so let's go to Tailwind website installation and we want to go to framework guides and then to vit and then using view so we can install using this command just a side note we can also create our View application using vit but anyway let's add tail V to our project and while this is doing its thing we can copy this npx taling CSS in it to initialize our config file so I'm going to paste it in here there we go so now we can open vs code and see what we got all right so in vs code the first thing I want to do is to clean up everything so I don't need this icon in the source folder I don't need these files except main.css so I'm going to keep the file but delete the content so I can bring in talin directives in a second so I'm going to leave it open in the components folder I'm going to delete everything in the app which is our root component I'm going to delete everything and just add my own template and instead of a div I use Main and just say home so we have something on the screen all right so let's go down the list uh in the index.html I'm going to delete this link and also paste uh font awesome and Google fonts in here so let's go to cdnjs grab this link for font awesome and I will put these links in the description so I'm going to copy this one and in the project I'm going to paste it in the head of the project and go to Google fonts I'm using pins and I selected these four variations so I'm going to copy these links and again paste it here so let's reformat it close the head so it's clean and save it inside the Tailwind config we need to add the files which may contain Tailwind classes so let's go to Tailwind website again and grab this piece of text and add it to the content array this will just make sure when we deploy our application all the unnecessary CSS classes are gone so let's save it and close it we don't need it anymore and go back to TN website and let's grab these directives so I'm going to copy these at sign directives and add it to our main. CSS and underneath I can add the Google font so I can say at layer base so I'm going to Target the base layer and grab the body element and just set the font family to puppins and S Ser so let's save this one Clos main.css and in index.html we have this div with the ID of app which is our wrapper for our View application I'm going to add some Global cloud classes I'm going to say that the minan height should be screen so that is saying 100 view height and BG zinc 100 so a bit of a mild background and the padding of eight all around that's it so we can close index.html now all we have now it's our template let's close this terminal and open an integrated terminal in vs code and let's run npm run Dev so let's go to that Local Host there we go we have our host up there I'm going to put this side by side with vs code okay I also have the console open here so we can see if there is any error the first thing I want to do instead of this home I'm going to get the local date up here I'm going to create comments as we go along so this should be the date and there is going to be a div for wrapper and inside of this div I will have a new date and then I will chain the local data string so it will give me something meaningful like that but uh still this is not what I want I want the full day of the week and the month and so one so I can add some options to this just like that so I added the local and how I would like to see the weekday the year and the month as you can see up there and let's add some classes here so I'm going to say class text Center and margin bottom six that's it so we can close this one because we don't need to touch it anymore the next part is the search field so I'm going to make a comment call it search and create a div for the rapper and I'm going to create a component for our search so let's create a component here call it search input. VI or search field and let's go to GitHub page and I'm going to close everything that I don't need here so Tailwind we don't need it anymore CDN don't need it font awesome don't need it all right so in the GitHub folder we have this search field. viw and I'm going to grab everything here and paste it inside the component we just created all we have it's a form with one input field and a wrapper which will contain the suggestions for for the cities so if the user types something in the field we will get the suggestions and the user can click on it before adding any functionality let's add it into the Dom by importing it inside the root component so on the very top I'm going to create my script tag and this is going to be a setup script script setup sorry and I can say import search input from the components folder and down here I can use it search input and self close it so the first thing we need here in our search comp component is a property to bind to the search input for the V model so I'm going to use reactive for this one CU I like reactive and because I'm going to use an object that would be related to this search so I'm going to call it search term and this is going to be reactive so I'm going to uh import reactive from View and pass an object to it so the first thing I want is a query and I'm going to set it to an empty string at first so this search term now we can use it in our component on the input element I'm going to use V model and just type search termquery so now it is bound to this one to make sure this is working I'm going to Output it right above the form so search termquery and let's give it a refresh and type something in here and it is working so let's delete that output that was just a test so the next thing we want to do we actually want to do something as the user types in here so we want an action so let's create a function here so let's call it handle search and this is going to be an arrow function and what I want to do first I just want to console.log that query so I'm going to say search term. query and when are we going to invoke this function is going to be on every key of stroke so every time user types something on in here so we can listen for the input on this input field and just pass that handle search down here let's see if this works the way we want so as a type you can see in the console we are getting three three different logs so that means three times this was invoked or executed that's not exactly what we want we don't want to execute this function on every key stroke we want to give it a delay and we can use a set timeout to achieve what we want so set timeout function takes a call back function as its first argument and as its second argument it takes the delay in milliseconds so I want to say for example 500 millisecond or half a second now inside of this callback function I'm going to console.log this query after 500 millisecond so let's save it and start again if I type something here you can see it ran three times again but it actually waited for me in a sense waited for me to type now if I type slow again that would give me the same result you can see like I am typing slowly and you can see I'm getting the result and this function is being involved every single time again this is not what we want so one thing we can do we can save this set timeout inside the variable and then clear it every time we go inside this function so let's do this so I'm going to create a timeout here and I'm going to set it to null so this is kind of related to our search term that's why I'm creating it down here so first I'm going to save this timeout inside this variable we can say search term. timeout equals to this set timeout and then above it I can say clear timeout that's search term timeout now every time we type in here the function is going to run right so so it goes inside this function and it clears the timeout and then it goes down to run it again but it waits 500 millisecond so by the time it goes back up there to run it again there is another time out clear so basically uh we are creating some sort of a lazy load or some sort of a debounce so let's type something here there we go and you see that it ran only one time now again because this is 500 millisecond if I type very slowly you can see it's running after each half a second okay that's nice that's what we want but of course we don't want to just log whatever the user types we want to show the Matched results down here and for that we are going to use our weather API autoc complete so let's go to weather API and when you open an account you will be headed to your dashboard and you will have your API key so let's copy that API key and let's go to API Explorer down here in the API Explorer we can paste our API key and down here we can select our API we want to use we want to use search autocomplete our query for now is London so we're just going to leave it as it is and click show response so this will give us the call to that API we need it also gives us the response header and the body so we found two match for that query so we get an array of objects so let's grab this URL and inside of this timeout I'm going to fetch that data so let's create a res variable and set it to fetch and using backtick paste that URL I'm using btic of course because I want to make that query Dynamic now we know fetch returns a promise so this function needs to be an async function so we can pass async just before the parenthesis and the keyword await just before the fetch now instead of London as our query we are going to use the template string and pass the search term quy so basically whatever the user types in here this res is not what we want of course right so we want to create a data variable and again a wait for the res Json so because Json function returns another promise and now we can log that data okay let's give it a run and see if it works so I'm going to search for example for Kent and it ran only one time that's what we want it gave me an array of five so apparently there are five locations in the world that matches this Kint so it starts with Kent now this is exactly what we want and we want to populate this wrapper down here with these information so we need to save it somewhere so I'm going to create another property under search term reactive object and I'm going to call it results and I'm going to set it to null or an empty string doesn't matter so inside our handle search function let's do some checks before actually running this so I'm going to first check if the search term is not an empty string then run all of this so and I will add an else later on so for now I just want to leave it as it is I just want to make sure this is not an empty string and where we are grabbing our data underneath that I'm going to populate these results so we can say search term results equals to data instead of console.log let's console.log this search result down here let's see what we get so ref refresh and again K and we get the same thing and of course it's a proxy array because it is reactive so we get the array of five that's exactly what we want now we want to show this down here so we have access to this results array so down here where we have a button we want to create a button for every single item in here so on the div which is the wrapper I can use the V4 and say for every city or place let's call it a place cuz it might not be a city in search term. results do something and of course this is a V4 and we need to bind the key to something unique so we need to use the key attribute and bind it to something unique to avoid you know funny Behavior so we're going to bind it to place ID because every place or a city has a unique ID and we're going to bind it to that one for the button content we are going to Output the place name as well as the region and the country as you can see here every city or every place has name region and Country so we want to say place. region and then comma space place. country let's see if this works Al so I saved it and we already have the data inside this wrapper a few things here before we actually apply any click event to these buttons uh let's give it the refresh if I type here this runs and we have what we want exactly what we need now if I use backspace and delete here you can see it doesn't go away so in this if statement we are checking if the query is not empty then do this and we want to say if it is empty put this result back to null so I can say search term that results equal to null and refresh so if I search for something it gives me the result but if I want to delete it it will go away we could also make sure this V4 is not even rendering if there is nothing in the results so uh I can wrap this whole thing this div with another div because we can not have V4 and V if on the same wrapper so here I can say V if and check for something I want to say if search term results gives me something you know rather than null then do this otherwise don't we could also say if it is not null like that then do this so This should work if I say k this works and if I delete it it's gone great so we are still outputting here the search result so I'm going to delete this one too now the next step is to click on these buttons and get the ID of each City so if I click on these ones it something should happen and we can create another function up here just right under handle search I'm going to create another function call it get weather because essentially we want to get the weather for that location and this is going to be another arrow function which would accept the ID of that place so for now let's just log that ID that we are getting from each City so this needs to be attached to this butt because we want to click on this one and get the ID so it's easy we can just say at click get the weather and this accepts an ID so I can just say place. ID just like up here because we are looping through each place and we are getting the ID so let's save it reformat it and give it a refresh search for London for example and click on London it gives me the ID this one in Canada gives me the ID and so on the next step is to actually get the feather because we don't want the ID and let's go back to weather API and API Explorer we already have our API key up here and the query is London now instead of search autocomplete we are going to get the forecast the nice thing about forecast is that not only it gives us the current weather it also gives us the forecast of the next few days and in this case I only want three days you can take as many as you want but on a free account you can only get 3 days we don't need air quality or or weather alerts so let's click show response and there we go we get the URL again which is forecast we get the we get an object with three main properties we have the location which is the name of the city and more info about that City we get the current weather which is today and the forecast which is for the next 3 days and we get we can get also the hourly weather which is I think it's unnecessary and you can see here I'm getting empty objects and that is because we have something in our dashboard in weather API website it's called API response field and we can turn off the things we don't want so I turned off all the hourly responses because it's just too much data and I don't need it so anyway we're going to grab this URL here and back to the project and we are going to do something similar to here so I'm going to create a con Str and set it to aate fetch and use the back text again and paste that URL and make sure this function is async now this query cannot be London because we want it to be dynamic and we could pass ID down here this would be wrong though because the VOR API documentation specifies that we cannot do that so let's go to request parameters here and you can see the request parameters accept uh different parameters but one of them is the ID returned from search shpi that's what we are getting we need to pass ID colon and then the number right so ID call in and then the number so let's go to our project and add ID Callin and then the ID so the rest is the same after we get the response we are going to create our data that would be the same as res. Json just like what we did above and now let's console.log that data let's reformat the code save it give it a refresh search for a city and click on it and we get that location data you can see we have have the current forecast and location now what I'm going to do here I'm going to create a file call it temp or for temporary. Json because I want to grab this object just right click copy object and paste it here to make sure I have this some so I can look at it if this goes away because sometimes I'm going to save this one and I will get an error and I cannot see it it's just going to be a pain so I'm going to keep this here because we need to know what we get on on a cor response anyway now we know we are getting the right data we just have to save it again somewhere to an array because we want to give the user the ability to Output more than one place so we need to actually send this data back to the root component because this is where we are going to Output the city's cards we are inside the search input right now and we need to send this data back to the view root component and then do something with it here so inside the root component I'm going to to create a variable let's call it places and I'm going to set it to ref and it's going to be an empty string okay so for now we're just going to leave it there and in the search input we are going to emit an event when we click and get the vther and then send this data so right under the input let's define our emits so Define emits and this will take an array let's call it Place data so now we need to save this so const emit so we can call inside this function after we are getting the data we want to emit the place data and also we want to send up to the parent that data so I can delete this console that lock so I hope this makes sense we are emitting or creating our custom event lessener and among that emit we are sending the data so back in the root component here we need to listen for that event so we can say at uh what do they call it Place data and we want to create our own add Place function so I can create that function here add place place and this is going to be a call back function and this is getting the data so we are accepting as a parameter so because the data is coming from our custom event lessener so let's console.log that data see what we get first so uh we should get the cities info before even pushing it into this array so let's say London and click there we go we get the London's location and we can make sure by checking the location down here and says name London okay of course while we don't want to log it again we just want to push it to that places so I can say places. value because it's a ref. push and we're going to push the data so to make sure this is working I'm going to create another comment here and say weather cards essentially the weather cards will go in here and create the div and inside this div I'm going to create a P tag which will contain the cities from this array so I'm going to use a V4 and say for each place in places just output place location name so we want to get the location's name and I don't need the key here because I'm just testing things out so let's add a few cities London for example and if I click we get London down here let's add another one Sydney for example there we go it works uh by the way every time we click on this one we need to clear this one and also close this dialogue so let's go back to search input and where we have the get betterer data so right after we are emitting something or before it doesn't matter we can say search term. query equals to an empty string and also search term. results is going to be the initial value which is null okay let's do it again refresh so if I add a city and click this will go away and we get the name of the city because we are looping through that array the next step is actually to create our weather cards all right so let's create a component in components folder and let's call it better card. View and let's go to GitHub and and grab everything from weather card view so I'm going to grab all of this copy it and paste it here and I'm going to close search input component for now I don't think we need it anymore so I'm just going to close it and here you can see we have a template that contains some info and I added these placeholders kind of thing so what we need to do here is just replace these with the real data we want to use and I also noticed just now I just noticed that this is dynamic data we are getting from the object which should be at first because this is the raw component it should be empty like this that was one thing I forgot to delete so we know we need to we are getting this object for each city right and we need to go through these properties and get the info we want so imagine this is a place so let's call each object a place that means we need to accept a prop let's say Define props and we are going to accept a place which which is going to be an object down here we need the place which is this object location name that's the location name so instead of this one I'm going to use massage syntax and say place. location.name and I'm going to copy this one because I need the local time so in the object we also have local time so if I copy this one and add it here this will give me the local time in this format so it's the date and the time but all I want is this hour and the minute so we can do something with this one wrap it with a parenthesis and use the new date and then tell that function to just get the hours for me so this is a function and right outside of the curly mustache syntax add a colon and then add another mustage syntax and then copy this whole thing and just change this one to get minutes I know it's a bit you know it's a too much code for something simple but this is the only way we can do it this will give us this time time sorry this time right here all right so that's the local time and date um sorry local time and the location so I can close this one for the current weather we need the image source so if we go back to that object we can close the location we're done with it in the current property we have a condition object which contains the icon and the text for that condition for the current condition so we need to go to the city I'm sorry the place current condition icon for the icon so let's again bind this source to place. current. condition. Icon now this should be the same for the text so down here where it says weather condition I'm going to use the mustache syntax and add condition. text for the weather temperature we don't need to go inside the condition because it is right inside the current temp c I can use that one and delete the condition and just add temp score C now this one gives us a decimal number right now it's not because for this particular City it was a round number but it will give us a decimal number which we can make it round by math. round so we wrap it in parentheses and say math. round and to use the degree sign which is just a circle on top of the number we can use at D semicolon so this would be that circle on top of the number which we will see in a moment and I can close this one so with the weather location we are also fine I also have this border line which is just a border and it's a component and I can create it right here so border line this is really nothing special it is just one line of HTML so if we go to our folder on GitHub we have a borderline View and I'm just going to copy this thing and add it here okay so it this might be unnecessary to be a component and there's only one of them so I just wanted to make sure if I I have borderline somewhere else I can edit that file and it will be affected everywhere and it's also a good practice so I'm going to import that border line from borderline view so now it will not give me a warning I think for now we're good we can actually output this one and we will add these info later so let's go back to our root component and import that weather card import weather card from components and we know we expect a place as an object so down here instead of this V4 I can kind of delete this one the V4 I will add it on the wrapper so we want to have a vther card and close it and this would need a place so we need to Loop over places array and give the place to this card so let's add V4 to the wrapper and say for each place in places Now give me the place so for the key here because it's a V4 and we need the key we need to think of what do we want to bind here here we have an array and they all have an index we could either use that or grab one of these properties whichever works for you best but I'm going I'm just going to use the index so under the root component where I am saying places place in places I can also grab the index of every element so idx and I'm going to use that as the key so let's give it a refresh and see what we have London and I click on this London and we have the city of course I'm zoomed in here by the way and also I forgot uh there is no background on these weather cards so on the weather card component on the div which is the top one I'm just going to add BG blue 500 the reason there is no background is that I am going to add Dynamic background so it would be dark for nighttime and light for daytime but you can see it's working and also we can add more cities so let's add for example Sydney Australia and we have two and I want it to be this a grid of two columns so I'm going to wrap this with another div so cut it for a second div and under wrapper I can say class grid and grid columns two and let's give it a gap of four and again I'm zoomed in here that's why it looks kind of too big so you can see this circle thing is is because of that degree kind of special code we put in here I kind of don't like it because it pushes the number to the left and it's kind of odd and it's not centered I can add margin right minus 2 so this will push it to the right a bit or four but I'm going to leave it as it is for now it's fine it looks centered so let's add the forecast which is going to be 3 days down here and this is relatively easy let's create our component so in the components folder I'm going to create another file called it weather forecast day. viw and let's go to GitHub we have weather forecast day and I'm going to grab everything and add it in here so this one is quite easy all we have is the day of the week so Sunday Monday and so on and we have the icon just like this one but smaller and then the high and the low of that day so we need a day so let's go to this object you can see we have a forecast object and within the forecast we have a forecast day which is an array so each object in this array is a day so we can accept a day as a prop inside our component I'm going to say Define props and I'm going to accept a day as an object so each of these objects will be our day the first thing we need the day of the week so I can say day dot date so we have a date value or property here now this will give me the date again I don't want it I just want the day of the week and I can do the same thing with what we did here up here with the date so I can say new date and pass that dat that date and chain to local data string and add the local and then in the options I can say the weekday I want it to be long I just want the weekday so this will give me either Sunday Monday Tuesday whatever the day is all right for the icons we need to go inside the day and then we have another day so for in this case this is the name of our property and this is the name of the property of the object so it's going to be day. day so for the icon we're going to bind it to day. day. condition do icon so again you can see we going inside today another day and condition icon then we have the Max and the main temperature so we can grab that from day. day again this is inside the same day object we have Max Temp and Min temp this again will give us a decimal number you can see here and we want to round this one so I can say I can wrap it in parentheses and use math. round and I'm going to copy this whole thing and add it here so this would be Min temperature all right and that's it this is what we have for our forecast I don't need to do anything here I can close it and inside our weather card I can import it up here so I'm going to say import weather forecast day and down here we have a placeholder for it so I can say weather forecast day this needs a day we passed the day as a prop and we need to now accept that day so we already accepting the place which is again this whole object so we need to get the place and then forecast and then forecast day so we are going to Loop over this forecast day array so we want to say under wrapper for each day in place. forecast. forecast day then give us that day for the key again I'm going to use the index so I'm going to accept the day and idx or index let's give it a save and there we go we have our data down here that is our forecast and the next big part which is almost towards the end is this more info so when we click on this more button we need to see that info which is this one so first let's create its component so inside our component folder I'm going to create another file call it weather info. viw and let's go to GitHub grab the code we need from we weather info. viw and paste it here so this one is actually accepting the same place as the root component or not the root component but the parent component uh because we have we are done with forecast we are back to the current we have the place and then we go inside the current and get the data so we are going to accept a prop that is going to be the place theine props and it's going to be place and again an object we have a close button up top which we will take care of it later and then we have the V speed down here so let's use MTI syntax we need to go to place current. we have V kph that is just kilomet per hour so I'm going to add my own text right after the number and we're going to do the same thing for humidity so this one is called humidity and this is going to be a percentage sign and the same for precipitation that's a big Bo for me and the value for this one I believe is this one and it's in millimeters so I'm just going to add mm next to it next we have the wind direction so I'm going to copy one of these and add it down here wind dire Direction it just gives us is it like North Northeast and so on so it's a wind there and down here copy this one again and for the fs like we will have a temperature that it says feels like and it's going to be decimal so again I want to round this one by wrapping it inside a math.round the last one is UV and honestly I don't know what is the unit for UV so I'm just going to leave it as UV I don't know it's a percentage is a millimeters I have no idea any who at the bottom of that container we have the last update and all we want is this last update property and we don't want to change anything we exactly want the date and the time so I'm going to grab this mustage syntax again and you can see here there is a extra curly brackets which we don't need so I'm going to go to place current and grab the last update and chain it down here and then we have a trash icon which will be deleting the card and we will add the functionality later save it and let's actually use it in our weather card so again remember we are accepting a place for all of this let's import it in the parent which is the weather card so import weather info from our components down here we don't need to Loop over it because there's only one so we can say weather info and pass the place we already have access to the place as a prop so I can just pass it down here and if I save it there we go we have the info regarding that City now of course we need to hide this at first and then show it when the user clicks on this more button so we are on the parent which is our weather card right so I'm going to create a property here and I'm going to call it show detail so this is going to be a ref and we're going to import it from View and at first it's going to be false so down here on the wrapper of this weather info I'm going to attach a v show instead of V if because this probably will toggle quite often and I'm going to set it to that show detail which is false at first so we will not see it now when we click on this more button this down here on the button itself I can lessen for a click and set that show detail to True let's add a city all right and we click more and we have it here and we still cannot close it because now this one is in the child component all right let's go to the child component it is which is the weather info and we have that Clos button up here so uh we don't have access to this show detail in the child component therefore we need to emit an event so this is quite easy because we just want to send an event lessener we don't want to send any data so we can just say lesson for a click and emit I'm going to do it in line emit close info I'm going to call it close info on the parent weather card I'm going to lessen for that close info on this component so this is our component right this white wrapper so I'm going to listen for that close info and all I want to do again just set the show detail to false which will close this wrapper so let's refresh add a city click on more and click on this one there we go it's gone so it is working the way we want the next thing is that this delete button we need to delete something and remove it from the array now this is a bit tricky because the delete is in this child component this needs to send the info back to the vther card and then the vther card send it to the root element so we have to go to level up we could use a store for this like Pia but again this is just a silly example and it's just uh one event that is going to be going up two times so we're just going to use emits so on the child component we info we have this button the first thing we want to do is to listen for a click and emit something now right now we are not sending any data we're just emitting something because on the component uh the parent we are going to send the name which is again in the parent I'm just going to call it remove place or delete or whatever remove place so we're going to emit an event called remove Place let's go to the weather and we are on the same component weather info and I'm going to lesson for that remove place again we want to emit another event here we want to call this one again remove place maybe let's call it delete place so we know it's a bit different this time I'm going to send the place name so we have access to the place and we already know we can grab it from this so we can say Place location name so I am going to send that name up there I know it's a bit confusing because we are going up we are emitting two times so uh the child is sending call if you will so it's shouting to the parent says hi parent and the parent says what parent again says hi grandparent which is this root element and this one says okay what do you want so now we can create our function here let's call it remove did I call it remove no on the second one I called it delete place so I'm going to call it delete place so we are accepting a name right so let's see what is that name so on the search I'm sorry on the weather card which is the component that we are emitting something we are going to lesson for that delete place and we want to invoke this function whenever we click on that one so delete place okay let's see how this one works so let's add a city and London and let's click more let's click on this one we should get London in the console there we go it works so now we don't want to get the name in the console we just want to delete it so we want to go back to this places array so I want to say places. value is going to be equal to places. value do filter so we are going to filter the array and set it back to its own variable and take away this particular object or city or whatever place we want to call it so we want to say for each place or p in this array check if the items location name it is not the same as the name we are passing into it if the name is not the same return the array and remove that one or in other words remove that particular object with the same name and return the rest so let's see if this works I'm going to give it a refresh here add a two cities London and Sydney maybe and maybe one more Berlin and I'm going to put this down so we have right now three cities and I'm going to delete Sydney here so I'm going to go to more and click on this one delete and it's gone and you can see this is another Behavior funny Behavior this is not going away so we can close this one while we are emitting events so on the info card I'm sorry on the weather card we have this show detail so we need to set this show detail to false when we are emitting this event right here so we can't do this in line anymore I'm going to Define my emits up here so I'm going to say const emit equals to Define Emit and what did we call it down here delete place paste it back up here it has to be a string I'm sorry so down here again I'm going to say const remove place and set it to a call back function now here we are not accepting anything at this point but what we want to do we want to emit this one so I'm going to cut this one out for a second and call that remove Place from up here we want to emit the delete place and then we want to send this place location name now we cannot just say place because at this point place doesn't mean anything it's just prop so we can accept a place name and down here send that place name so where we are calling the function down here remove the place we can pass that place location name so that would give us the name of this location so London City Sydney or whatever and of course here I just want to say show details value equals to false all right so let's see if this is working I'm going to add a couple of cities here London and Berlin for example or whatever that is uh so I'm going to delete London go to more and delete this one and it works so it was a bit you know a headache that we have to do this but it's working so this is when I would say a store would come in handy so we don't have to do all of this emitting and props and listening for things because with the stores these things can get easier but I thought this is also a good practice to not use a store and emit events back and forth we are able to add delete and click and close the info and all of this and right now everything is working fine the way we want on a side note you notice this wrapper this container is very Snappy so we can we don't have any transition so let's do that inside the weather card we have this weather info so we need to wrap this with a special component from View and that is called transition so a transition is a special component from view that we don't need to import it it is available for us to use it anywhere we want to and if we go to view documentation uh quickly and just search for transition down here you can see it's a special component and it works for V if and V show and we have these directives on V interactive V something and so on so these directives that are related to the transition and we have a chart down here that says what happens when we use these directives so we have V enter from basically we are saying the component should enter from opacity zero for example and then to opacity one so it's going to be like 0 to one and then when it's leaving the Dom it's going to be from 1 to zero and this state here called we enter active and this two together is called we leave active and in this example we see under the documentation we have a named transition which I really prefer I don't like to use these default names because maybe I have more transition and it's also much cleaner so if we copy this name and add it to our transition and down here we can create a style tag and make it scoped to make sure it's not going anywhere outside of this component and then copy these classes we are saying when the fade which is this transition enters the Dom it's going to be opacity one so we don't have to specify it it's by default is opacity one and also when it is leaving it's going to be opacity one now when it is entering it's going to be from opacity 0 when it is leaving it's going to leave to opacity zero so these are the keywords two and from so uh this will take 500 millisecond which is too much I want 200 and let's give it a roll so I'm going to search London again and zoom in and click more and there we go we have that nice transition next thing or the last thing I believe I I want to add the functionality for day and night so I'm going to grab some Styles and in the weather card component right at the bottom where we have the fade classes I'm going to add these BG g day and BG night so these are just custom classes and we have a custom background and a linear gr gradient nothing is special so all I'm going to do here I'm going to set the background of these cards dynamically so let's go up here where we have the wrapper so the whole wrapper right now I'm just saying BG blue 500 I'm going to delete that one and I'm going to bind class dynamically so what I want to look here we have some property here it's called current is day and if it is zero it means it's night if it is one it is day so we want to say if the place. current. isore day is one then apply BG day if it is not then it's night of course we're going to say BG night that's it let's save it and of course in London right now it's 3:00 a.m. so it's night time let's add Sydney and I believe it's daytime yep there we go so if it is night time it's going to be dark if it is daytime it's going to be light and now we have the info we can close it we can delete a city there we go and another thing I would say it's not necessary but in my demo I had a confirm dialogue here so right here where we are deleting the card we can check if confirm for example are you sure I'm sure you are familiar with this confirm function from JavaScript so this would return a true or false based on the user input so this will give us a dialogue with this text are you sure so let's give it a roll and London again it's easier to type and if I press delete it will give me are you sure nope so nothing's going to happen but if I say yes I'm sure it's going to go away so that was just a tiny little touch there and I think with that we're done so that's it guys so this is our view weather application thanks to weather API with their nice API Explorer and their nice apis which had Search complete and it was completely free I I really like this weather API and the only thing that I thought it's a bummer is their icons they are very they are kind of low resolution and we could apply our own uh you know custom icons that but that would be a lot of work because we need to check they have many many conditions so we need to check if the condition is this then the icon should be that so it's a bit of a tedious work but anyway uh this is our weather application I hope you enjoyed it and I hope this has been helpful thank you guys for all your likes subscrib views and support it's really encouraging for me to see you are liking my content thanks again for watching see you at the next one bye-bye

Channel: Learn with Jon

Views: 3,608

Keywords: html, css, js, javascript, web development, web design, learn, frontend, full stack developer, vue, vue.js, options api, composition api, crash course, full course, tailwindcss, weather app, weather api

Id: kRetyHCmPUs

Length: 48min 35sec (2915 seconds)

Published: Sat Nov 18 2023