Build a Complete Weather App Using Vue.js | A Beginner's Guide

foreign hey what's up everybody welcome back to another tutorial so in this video we will be creating weather application using view.js you will learn about xeos how to fetch apis and much more so before going to the actual code I just want to give you a short demo how this application work so if I type city name Rio and click on search you can see we are fetching the data from the API and we are displaying that here you can see we have a four days forecast and all the data is dynamic which is coming from the API we can also change the location so if I click on change location button you can see everything is reset now I have to put another city name here so I'm gonna type Tokyo and click on search and you can see we have fetching all the data about Tokyo we have 21 centigrade and for four days we have all the data available now I'm gonna change the city name to Berlin and when I click search you can see we get the Borderlands data and we also have four days forecast all right so before wasting more time let's jump into the project all right I have already created empty folder Dev now we have to open that and I'm gonna open CMD instead of CMD I'm using gate Bash and let's change the directory now we are inside Dev directory let's create View application but before creating View application make sure you have installed node and you can see I have already installed in my computer so now let's create a View application for that we have to write View create weather app which will be a project name now I'm gonna select view version 3. and let's just wait for this when it is installed we will be right back all right so our application has been created now let's change the directory to the project folder and let's open this nvs code all right so we have opened our project in vs code you can see we have all the required files here now let me just open the git bash inside vs code using control and tilt button and it will open the Gateway inside vs code now we have to run our project so with the npm serve it will run the local server so let's just wait for this all right our project is running let's click on this link and it will open our project on our browser so we have a default boilerplate which we will be get rid of this so let's get back to vs code and let me minimize this let's go to the source directory and here we have all the required files man.js which is connected with the public file index.html we have the components we have the app.view and the components is connected with the app view which is here all right so let's remove this I'm going to select from here and let's let's add here a title testing now let's get back and you can see everything is gone instead of testing now if we go to package.json you can see we don't have a bootstrap installed so we have to install that I'm gonna open new gitmash and let's type npm install bootstrap and it will install all the dependency for bootstrap let's add the bootstrap View so let's just wait all right so we have a bootstrap View and we have bootstrap let me close the kit Bash and now we have to connect the bootstrap with the man.js so let's go to main and here I'm gonna type the bootstrap path I have already created the path so I'm gonna paste that here and we have bootstrap we have bootstrap view now let's save and check this out and you can see the font family has been changed so it's been our bootstrap is connected and working fine now let's get back to app.view and we have to get rid of The Styling and HTML so I'm gonna just remove everything from here and let's remove the component as well let's remove from here and remove the style as well so we have a empty component here now if you check this in a browser you can see we get the error because in the child element there will be something so let's build up the search section here I'm gonna need div insert that if we need header and I'm gonna add some glasses here which is a bootstrap classes and we need some padding all right inside that I'm gonna use H1 which will be our heading let's give it some claws margin bottom five and now we need a title weather app let's check this out you can see we have the title now let's create the other sections we need div Flex and it will be justified content Center so we need that search input field in the center now inside that we need another div and that will be search bar and width will be 50. margin x-axis 2. now here we need input let's give it some classes here input form all right so let's add a placeholder and that will be enter a city now you can see we have the input field in the center now let's create the button so I'm gonna create a button down here and let's give it a class BTN search button and button primary so let's save this and that will be search and let's give it a icon so I'm gonna use Fab icon FAS and Fa search you can see we have a button we have the input field but we don't see the icon so let's add that let's go to the index and I'm gonna paste the URL here actually that is a CDN which I have copied from the font awesome website you can see we are using font awesome 6.4 let's check again and we have the icon so for the HTML part we are done now we have to add CSS so let's add a body inside body we need background color and that will be one two one two one two which is a black background and you if we check you can see we have a black background now we need header inside header we need background and that will be two one two seven and three zero and we need border radius 20 pixel let's add a color white align Center let's give it a font family yep that will be okay and we need Martian top five frame and you can see we have created our search container so let's add the CSS for the search button because we don't see coloring of the search button so let's add that background image linear gradient to the right let me remove this and the first color will be K on and the second one magenta all right and we have a beautiful search button so for the CSS spot and HTML part we are done now we have to add a functionality so we have to pass the value from the input and that will be City and now after that we need data function so I'm gonna create a data function here inside that function we need to return and inside return we need to pass the city and that will be empty let's create another show weather and let's make this false so we are getting the value from the input and we will be passing that to City empty variable and now let's create the show weather function but first we need a method and inside method object we need to create async and the function name search weather now inside that we need this show weather and it will be equals to false then we need await this Dot next tick after that we have to make sure whether true so we can see the component when we click on search button all right so we got a problem and the problem is or actually I misspelled that so that is fine now and let me just check if I type something here and click search you can see request is not generated so we have to complete our component HTML first then we will pass the request so let's create the component I'm going to delete the default component and let's create another and that will be weather Dot View now inside that I'm gonna copy all the code from the app.view and paste here you need to remove everything from here now we have to assign that whether component in the app Dot View so we have assigned that now we have to import the component component name from components directory and we need component name all right soon now we have to use this component here save it we still got a problem let's check this out save this and let's see where we got the issue let me check on a browser so the component should be always be multi-word let's go to the oh so we didn't find the name of the component so I'm gonna Define my weather and let me remove this now save it and let me remove everything from here and let's add a testing heading so whether F will be here now let's check again and you can see we got the component so our component is connected with app.view and let me remove this so now we have to start building our card for the today's weather so let's create that we need Dev container and we need padding zero inside that we need a flex and then we need a card which will be a main card and its width will be 100 inside that we need a div with the padding of three and here we will add our heading with a class of margin bottom one and it will be our day so let's add a Tuesday so we got a card and we have a heading now let's add the remaining elements here we need a text light and that will be for date so let me edit it we are adding just a placeholder for now so when we fetch a data from the API we will add those variable here and it will make that dynamic now after the time we need another heading and that will be a place so let's give it a placeholder with the icon of FFA location which is a font also icon so let's add a Rio we also need a small take for a country and here I'm gonna put country now let's check and we got all the elements after that we need another div and that will be temp here we will show our temperature and that will be heading one with the weather temp class and we need text light for description after that we need another div and that will be for card two so this one will be our second card inside that we need a table and let's create a table items now let's create the div for the change location button so I'm gonna create a deer Flex insert that we need a form and we need input now we have a change location button we have a sea levels table and so the HTML part is done the next thing we have to add the CSS so I'm gonna fast forward this section to make the video shorter so we have add the CSS for the main card so let me just remove this and let's go to the top here I'm gonna connect the component so let's create the component four days I'm gonna create new component and that will be days weather Dot View now I'm gonna copy the code from the app.view and I will paste that here let's remove this let's make this empty template all right so let me remove this as well so we have an empty template for the desk component now we have to add the component here so I'm gonna import this weather from the components directory and it's a test weather now we have to use that in the component section and we got the error so all right so we have to Define that component up here now we are good to go let's add the HTML for the four cards so I'm gonna need div step and text will be Center we also need a loading section so when we click on search it will fetch the data and in the meantime it will show us the loading now after that we need a UL insert that we need Li here we need to create a four cards so let's make that real quick we need a tape with the padding y-axis 3. now let me copy this four times and save it so we have our cards but it didn't show all right so let's create the CSS for this section we have a container we have a four cards so our CSS is complete but it didn't show in the right way so let's check for this problem I'm not sure that I have made a mistake in the HTML so let's see oh we have to copy that from here and let's paste that inside deflex so it can show the card side by side now save it and you can see it is looking perfect so our HTML part is pretty much done now let's test this out I'm gonna type here Rio and I'm gonna go to the inspect and I have added the view extension so let's see that we got anything from here so let me refresh this and if I type something here you can see we got that here we also have more components but we will pass the data in a bit while so let's go to the app Dot View and here in the weather component I'm gonna pass this city and the value will be City and we also need V if statement so we can display when we click on search button and this function will make this true now let's add that function here so when we click on search button it should call the search weather and here I'm gonna pass the props I'm gonna create a props and insert that I'm gonna type City that will be string now we need a data and let's return all right so let's check this if we go to the inspect now I'm gonna go to the view tools and if I type something you can see we got that here and when I click search you can see it is showing the second card and we also got the city name here so let's go back now I'm gonna create a function async the function name will be created inside that function I'm going to create a constant response and assign that to the await and after that we need axios dot get inside here I'm gonna pass the URL which will be our API URL and now I'm going to show you how to fetch that API from the website so this is the open Weather website and if I click API Docs you can see we have the URL we can copy from here if we go down we have the another and we have all the required documentation here so whenever you need anything about API you can go here and search for that information so let's copy the URL and let's go back to vs code and I'm gonna paste that here now we need to do some adjustment with this I'm gonna remove the latitude and longitude and here I'm gonna type A queue which will be a city name and here we will add the API key so let's paste that and let's change the city I'm gonna type dollar and bracket inside that I'm gonna type this dot City so we are passing the city name City value here we need to pass another parameter and that will be unit the value will be metric save it and we still got the error so let's console log that so we can see if we got the response or not all right excuse is not different oh we didn't Define the X use so let's import that and I think I haven't installed the xcos so I also have to install that let's open the new gate Bash and if you've seen a package.json we don't see any axios dependency so let's install xeos wait a while for this all right so over X use dependency is installed now if we go back let me minimize this if we go back to the weather dot app now we don't see any error and everything is working fine if I type Rio or Tokyo and search you can see we got the data and we have the configuration we have the all the required data here if you go to the data we see the city name and we also see whether it's a cloudy all right so we have to fetch that uh data into the our components so let's do that real quick we have to return some variables let's create that real quick here I'm gonna Define some props like we need icon URL we need date we need time and now we have to assign the API values to that props so I'm gonna check that all right let me assign the temperature now we need description now if we check let me check here if we check in a view tool now we are getting all the values now let's add the remaining values so for the icon URL I'm gonna use the open Weather URL and assigned the icon name here and let me remove the icon URL because it is to time now we have the URL so now I'm gonna create an instance for that and I'm gonna get the hours and let's format that after minutes we need show seconds now if we check that we get the time we need to date so let me just make date we need month's name and we need your names all right so we get the error now we have to define the months so I'm gonna create array and here I'm gonna Define the months all right so we have fetch all the data from the API and assign that to the each variables now we have to fetch these variable into our HTML so let's do that let's go to the top and let's make this in a bracket time as well and for this city name let's change the country now let's change the temperature and let's make the description as well and we also need the icon so for that I'm gonna create the image tag here and in the source attribute we will pause the URL which is icon URL save this and if I try to type A Parlin and submit you can see we are fetching all the dynamic data now we have to fix the temperature we have to remove the decimal point from here so I'm gonna go to the API function I'm going to use a function here math dot round and I'm gonna pass the temperature to that function now save it and you can see we have removed the decimal point from the temperature now I'm gonna remove this Tuesday and type that today because it is a current weather all right so now it is looking fine now we have to fetch the data for the table rows so let's create some variable for that I'm gonna use a c level we need wind and the country so now if I put Rio and click on search and check for the component so we have to fetch these variable values so now let's assign that here I'm gonna pause the weather data wind speed we need C Level and we need a country name all right let's check again if it's yup we have the country we have the wind speed and we have all the data let's check this in a view and yeah we are getting the values let's add here C Level and here I'm gonna show the let's add here humidity here will also fetch this variables because we didn't fetch the humidity and let's add here went let's fetch the humidity real quick let's add here humidity save it and now you can see we are fetching all the data accordingly oh let me just change the city name to Dubai and you can see we are fetching Dubai temperature and everything is here let's change another one New York and yep it is showing perfectly so now we have to work on this card so let's do that let's get back to vs code now let's go to the days weather Dot View file and here we are going to show all the data for the forecast let me remove the name and here I'm gonna type props inside that I'm gonna type city name and assign that to the string now we have to pass the city name from the weather Dot View so let's pass that city name and the value will be city name all right so we are passing uh now we have to Define that here this dot CT so we are assigning the city name to this variable and this city name is coming from app.view and we are passing that two days weather component now let me create data function and inside that we need to return so save it and let's check this out if we get the city name in the test component or not so let's go to view and you can see we are getting CT name if I change to Tokyo and click search and the Sam Tokyo is here all right so we will be using that city name for API URL now let's create mounted function and inside that function we need to create this dot fetch weather data function so now we have to create this function down here in the method section let's create async fetch weather data now let's get a console log so we can check if our component is working fine or not so I'm gonna type here this this dot City name and let's give it a string working all right now let's check this out let me remove this and we got the error so we need to check there to fetch where the function is not a function so we have a problem with this function uh actually the problem is with the props we misspelled that here it's a problem now let's check this again save it and refresh now if I type something you can see everything is working fine let's get back now we have to fetch the API so let's do that I'm gonna need a constant API key and here I will assign my API key we need another city which will be our city name and we need API URL so here we will pass our URL now let me copy the API key and let me copy the URL as well let's go here and paste here now we need to change our URL a little bit so let's change the weather to forecast and change the city to the constant City and I think we are good and let's add the API key so we are fetching all the API key city name and now we need to send this API URL to the axios function so let's create excuse function here and inside that I'm gonna pause the API URL and then we need a response and inside that response I'm gonna console log that so we can see our data is coming or not so let's paste the response here and save it and let's check this out all right so we didn't Define the xeos we have to import that let's save this and check again if I type you and we still got the error so we need to check that let's check here all right everything is fine here let's get back see oh we did the spelling mistake it's a forecast now let's check again if I type something let me just clear this and if I type Rio and you can see now we are getting data perfectly and in a console Loop we also getting data and if we go in the data we have a list so we have to do a logic for this list so let's do that I'm gonna go here up here let's create a constant and that will be forecast data let's assign the response dot data list so now we have a list and a forecast variable let's create a logic for this we need another constant and it will be filter data so we will be filtering our list and we will fetch only for four days so we can show that in our four cards now we need to map that inside that I'm gonna return and I'm gonna use date and here I'm gonna use moment just to format our date so we need to import that let me import that here and I think I didn't install the movement Library so we need to install that as well movement all right let's install it let's create another kit Bash npm install movement let's go to the package.json and we have the movement dependencies now we can use the movement function so let's go back and here I'm gonna get the date I'm gonna get from the item DT text and let's place that using space now let's get the temperature and I'm gonna do the same math function here math dot round and we need to pass the temperature and we need description now inside weather let's get the description after that icon URL and we will assign the same URL so I'm gonna copy from here and let's paste here and let's change the weather data into the item all right so now we are good to go after that we need reduce and inside reduce function we need to reduce the list item so I'm gonna need Arrow function inside that we need if statement so we will check for the same date test.tet is same so if the date is same we will show only one list according to that date now we need to push that item into the filtered variable so now let's return that and let's fetch only four items so we need a slice starting from one to five all right so let's just console that and let's add the catch function here so if we got any error it will show the error on a browser let's console the error function all right let's see this in a browser if we type like Rio and you can see we are fetching only four items and we have all the required data here now we have to show that in our cards so let's do that let's go to this data and here I'm going to create some props we need icon URL as well let's go to the template and I'm gonna remove the dummy cards now we need to create if statement so if loading is true it will show the loading and here we need else all right here we need for Loop so day in forecast and let's give it a key day dotted so we have the loading and now let's add the remaining item here so I'm gonna copy the image from here and let's paste here all right in the day section we need day dot date and let's fetch the temperature and we need degree and capital c let's check so we still got the loading let's see where is the issue so let's see all right so we didn't passing the filter data to the forecast variable so let's do that for cost and assign the filter data and let's add the loading false save it and let's check again and you can see we got the four cards let me fix the icon URL all right now we have to work on the weekly days because uh for now it is showing the date as well so we have to fetch only 10 m so let's do that I'm going to create a function here get DNA and now we have to create this function down here all right let me minimize this so we can see where this function ends all right here so we need to create a function let's pause the date and let's return that dot format let's save this and let's see this in a browser now we have a weak test all right so if I change the let me just change the city name let me type here Berlin and you can see now we are fetching all the data dynamically and if I change to y and it is also changed let's fix this real quick so where it is e-level all right let's put here if statement if sea level is greater than 0 then shows C Level else it should show null so here it is a null now let's change the city let's search and you can see we are fetching the sea level as well so let's work on the change location button all right let's add the event so when we click on this button it should call the change location function let's create that function here let me create method inside method object I'm going to create change location function inside that create reload so when we click on the change location button it will reload the page now we have to change the color of this button so let's do that all right let's copy the class name from here and go back and paste here save it and let's check again now we have a beautiful button so we are done with this application if you like you can customize this furthermore and if you like our video please consider to subscribe our Channel and press the Bell icon so you won't miss any upcoming videos

Channel: CodeWithSK

Views: 5,631

Keywords: Weather App, Vue.js, Complete Guide, Beginner's Guide, Weather App Tutorial, Weather App Development, Vue.js Development, Vue.js Weather App, Real-time Weather Data, Accurate Forecasts, Web Development with Vue.js, Beginner-friendly Weather App, Vue.js Framework, Build Weather App Vue.js, Vue.js Weather Forecasting, javascript weather app, best weather app, weather app javascript, Build a Weather App, Weather App from Scratch

Id: YqsmqL8wHT8

Length: 55min 13sec (3313 seconds)

Published: Thu Jun 01 2023