Build a Weather App in VueJS | Vue Beginner Tutorial

what is that fellow developers my name is solo Potts and in this video we'll be praying a weather application inside a few J s we've done to wear apps in the past two days three days because we did a familiar JavaScript one and a react one prior to this video so in this video we're gonna be playing the same application but in few J s so without further ado let me show you what it can do that rhymed that was cool so if you're in a hot place you've got my G R which is 27 degrees so you can obviously see it's quite a warm feeling background but if you were to go to somewhere such as London UK you cuz it's only seven degrees and it kind of goes to more of a cold bluey background blue a white background which makes you feel a bit cold inside you know just I'm not lying my brain okay guys so to install if you have never used for you before to install for you you can run two commands even eg on installed or MPN so node package manager you FIFA run NPM - I - G I at few forward slash CLI or my preferred way is using yarn where you can go yarn global add and then we can give it at few force I see like you click enter and this will it installed a few seer life for you once you have done that you can then run few create and then give it a name so in this one we're gonna say for you ever we're going to hit enter and this is gonna run a installer that's going to give us a boilerplate but first we have to pick a preset so we can even manually select the features or click the default and I'm gonna click the default there's gonna run an install while that's running me install we will open up we already have Google Chrome open up of course we do let's break a tab off here let's widen this and we're gonna go get an API so we're using the API wafer or we could just say we're for the open web format /a Snite open we're from our forward slash API now when this loads you can see this is the documentation for it but you can sign up so if you go to sign up you can enter in all your details and get a free API key once you've done that you need to sign in once you have signed in you need to go over to your API keys and select an API I'm gonna remove this one and this one and create a new one for Fuji so down in the bottom right you can see create key so I'm gonna say for you app and click generate and now it's gonna generate a new key we're gonna copy that and keep that in our clipboard ready so I can now just minimize this and we can continue on so I'll see you once this has finished yeah and it's perfectly just finished on time so cool so we're gonna CD into this and then we're gonna run code dot and and yarn SERP so it's gonna run our surfer hit enter and we'll wait for that to run well actually we can actually start saying up a few things so let's open this let's close that let's delete assets we don't act well actually we will need assets or let's delete components delete that component and inside assets delete logo.png open up app dot few let's remove the inner pieces of the app let's remove this and delete these just basically clearing up our boilerplate here so let me explain what's going on so in a few jst boilerplate we get a few default files we get the public folder which you don't really need to touch you also get these source and this is where you spend all your time you've got the main digest file which you don't need to touch unless you know what you're doing and finally you've got the templates and the templates are known as few files and in there you get a template which your markup your script or sure draft script and your style which is your CSS and then you obviously have your assets folder so this is what phew looks like and let's get started with this so we need to actually set that key so in here we're gonna create so called data and we'll go create a function and this function returns an object and then this object we're going to say API underscore key and we're going to set it to a string which is equal to our API key so that is things let's have a look at our surfer that should be done so if we refresh this page you'll see we get a blank page but if we were to write st. in here like hello and hit save and oh it update for us so we got hello written in there which is perfect so let's start creating our markup so in here we want a main and then inside the main we're gonna have a search box inside the search box we'll have an input with the type of text and we're going to use the search bar if you're wondering how I'm just typing this all out and it's just every time I hit tab it enters or creates the element that is because I'm using Emmet it's built into PS code and you can hit tab every time you can do things such as dot test hash tag yes I'm rhyming today I'm doing really well so we've got that with a class of search bar and now it's all we need fanatic we do need a placeholder though we're just going to say search da-da-da-dah and there we go so we can see that element over here let's then set up some styling so in our Styles we just want to firstly create a margin which Kucera a padding which is equal to zero a box of box sizing which is going to be equal to board a box we're gonna have a body with a font family equal two months wrap know it's wrong dust should be two hours wanting and it's sad serif what I'm going to set the app which is our main component here the wrapper component and in here we're gonna say background - image is equal to URL dot slash assets slash cold - background jpg now we need to paste these files into there so if I is safe it's not gonna find that so let's actually go and add that in I'm just gonna quickly grab it in my files there we go you can see now there's something going on there which we'll discuss in a second so these files are now in our assets you can see there's cold background and there's warm background so JPEG now in our app we want to continue on by saying background size background sighs sequel to cover and background position its equal to bottom so you sicko dark on the right nope it's gone darks the bottom of the image is duck what's good give it a transition off 0.4 seconds which should allow it to transition when we swap things so in our main we're gonna give it a min height off a hundred fertile height which then going to bring it to be the same height as our screen where they need to give it a padding of 25 pixels hit save and as you can see that's been pulled to the center we also want to give this a background image which we're going to use a linear gradient and we will say to bottom so that's the direction we're then going to give it a first color which starts at the top so zero zero zero 0.25 ringing if it enough a color which could be again RGB a it's going to also be serious serious there but this one's gonna be a fan opacity of 0.75 hits safe and there you go you've got this nice gradient over the top and this will allow us to be able to see our page a little better so quickly let's type in here search box with a width of 800 pixel hundred percent sorry and a margin bottom of about ferry pixels when I'm gonna say search box dot search bar and we're just selecting me in a component of search box and in here go display this I say block element we're gonna give it a width of 100% we can give it some padding of about 50 15 pixels a color off free on three on three one a font size let's actually soo-min here and scroll up so it's easier to read and close that side a font size off around 20 pixels really give a boarder so Daniel goofy appearance none border none' outline again none these are all just reset and a background off none what I'm gonna give it a background color off RGB a 255 255 255 I've 0.15 it's safe oh did I do that right sorry 0.45 maybe why am i background color no once we've got back on none but that should not affect it but the opacity it's not I see my bad so we've got ad in a comma after the last two five five there we go so that is there we're gonna give it a border radius and this is gonna be a nice cool weird effect so go Sarah pixels 16 pixels therapist or 16 pixels which is gonna give it this nice little corner curved corner curve and then after the corner cough Konica we're gonna give it a transition of 0.4 seconds I'm gonna get a search box dart search bar with a focus so when we actually click into it we're gonna give it a background color off RGBA again the same one but this time we're gonna give it any seven five what's actually going to give this element up here a box shadow of ceará pixel sir pixels 16 pixels RGB a 2/5 hit save that gives it a slight shadow and then when we focus on it we want to increase this shadow just by a little bit so we'll go Sarah pics with sue pixels sorry 16 pixels here should be 8 pixels and then we're gonna give it again the same value as before what I'm gonna give it a board of radius again so we're gonna change board radius when we focus on it and before it was zero pixels 16 this one gonna do 16 pixel serie pics or 16 pixels 0 pixels hits safe now when we focus on it you can see this is nice little transition switch just to give it a nice visual effect we now need to add some more markup so inside this we need to create a wafer dot wrap or wafer - wrap and then inside these elements really fatty location box and inside that we're gonna get a location diff which would be saying such as Northampton UK we don't gonna give it a date stiff and this date diff is going to give us the let's say today so would be saying such as Monday the 20th off January 2020 they'll just be an example we're then gonna have the wafer box and inside the weather box it's going to be a temperature and inside D and we're gonna have the west a year so such as rain so we're gonna say it's about nine degrees so I'm gonna press alt shift and eight on my keyboard to get me to this group do degree sign I'm gonna hit save and I should see all this information is now right here okay we've got the information let's style it up so let's go down into our style underneath our search box and we're going to start off with the location box we'll go say location box dot location we're going to give it a color off-white a font size up around 32 pixels a font weight of 500 crew want to be about medium a text align of centers we want it all to be centered and finally the text shadow can be around 1 pixel free pixel RGB a25 like we have before there we go save and they go better move that to center and that looks pretty good I think what I'm going to do the dates we're gonna say dot location box dot dates when a gift that also pretty much the same file uses let's copy this paste paste it in there but let's remove this made that twenty pixels it's made that 300 let's give it a fun let's give a font style and font so I'll be italic I feel that works text and I don't know if we need a we don't need a box shadow for that one it'll be fine let's sort of the wafer box and that's gonna have the text-align:center also when I'm gonna get the web box dot temperature and now this one's got quite a quite a lot to think about so we want to display as inline-block because we don't we want to add padding to it so we need to block pup but we also want to tech Center and we don't need to be forward so we're going to inline block it well then going to give it a padding of ten pics or 25 or 25 pixels if we hit safe you'll see it's now over on the right side we've gave it its padding we now want to give it some colors we'll give it the white we give a font size to 402 pixels a fun weight of 900 and to make it nice and dark we give a text shadow of 3 pixels 6 pixels within rgba off that's we're gonna give a background color equal to RGB a 2/5 2/5 probably 2/5 to solicit save and there we go that's looking pretty good you want to give it a border radius of 16 pixels and a margin of 30 pixels on both top and bottom but none on the left and right now that's what we've got and I think that looks pretty good it's got a nice little float we can also do this add a we could have a box shadow and we'll give it a again about 3 pixels 6 pixels rgba to 525 we hit save oh sorry this needs to be Siri Oh zero for those and if we now refresh up so we need to hit save before we refresh and as you can see we get this nice little box shadow which makes it look like it's popping off the screen slightly I like that so finally we need to actually do the wafer box dot wafer which is the world away for status I probably should call it that we get fear FFF we'll give it a font size that's not font size font size are for around 48 pixels in a bit to be quite big but nice biggest Amane bit will get for a front way of bold which is 700 a font style off italic again because nothing that looks nice on this and will give a text shadow off about free pics or six pixels rgba and the same value we've been using here safe and there we go but I think overall that looks pretty good obviously I did have a someone send me a really awesome version of my where up which they implemented some snow and rain falling down depending if it was raining we're not going to do that if we do maybe we'll do in the future so let's now think about all the functionality so if we go back onto top we've got our search box and we basically need to bind some data so whatever we type in here we want to store somewhere it's gonna be our search query so we're gonna create in our data an area called well actually we actually want the URL base here so the URL base is the API base so for example when we make a request this is what needs to go at the front of our request so if we now just paste that in and then that is our base of our URL but to bind the the search box we want to give it its own called like query is probably best and it will be set to a string we also want the weather somewhere to store the date or we get back once we make the request so we're going to create a weather data object and now we've got that we're going to need some methods right we need some somewhere to actually store the information but before we do that let me show you what we're going to do here so we're gonna type in here fee model and what fee model does is as you can read on rice's it creates a two-way binding on a form input element or a component so if we say in here query that binds it to the data element we have down here called query so now if we wish to export query underneath here and just say query and hit save nothing can tear but if we start typing you can see wherever we type appears at the bottom there so let's remove that from the screen and now we've bind query to what we need it to be we also need to set up to a function because we need to know when we actually press a key so at key press this can also be done enough way called fee on which could be key press but we want to do it as an @ symbol because it's the shorthand for it and then in here we're going to do so called fetch wafer and now it's going to basically when we press a key any key it's going to call fetch whether but we don't actually want it to call this function every single time or method every single time we would present us I'll press ENTER we'll press any key so we want to say we only want it to happen if we press the Enter key so we're going to say if same in here called if the key so we're going to pass through the offense and if the key is equal to enter the return key we're then going to run this piece of code so we're gonna say fetch fetch is a JavaScript API that allows us to make requests and we're going to use template strings to basically say this start API underscore base so that's the base off the API and I'm going to use whether and we say it's equal to Q so we're for here is the API to get the current whether you can check this out on their documentation I showed you earlier and then we're going to say Q is equal to and this stands for query so this what we actually want a query so now we're going to pass through this query which is going to get our query here which we've set which is bound to our search box input and then after here we want to say and units it's equal to metric if you want to impair view you can just remove this so if you want Fahrenheit you could just remove this and it'll pass you back there and now we need to pass through our API key we got so it's called app ID for this and we'll just go say this API underscore key and now we're going to use a callback so we'll go say that then and we're going to get the wafer or should we say the data or the response and then we're just gonna say return rest jason and then we need to say dot then again because we also need to once we've returned the jason we need to do enough request and we're gonna say this star set results and this is going to be a method we set underneath this one so under here we're gonna say set results and we're going to pass through D results and we're gonna say this dot wafer sour wherefore object will actually been sell it to the results because that is the wafer we're getting back so will you hit save we've got this information but we we need to be able to display it and we're going to have an issue if we start trying to just display it straight away because if we went here and we said okay so I know the wafer names at a place we're going to say whether which is equal to our object but once we get returned it's going to be where four dots name which is gonna give us the place at a city but if I hit save you can see that disappears and if we then put in another one here and we say whether dot sized or country hits save and we refresh here you can see we don't get anything and the issue is if I open up the terminal you can see it says we can't read property country of undefined the reason it can't reads that property of country F undefined is because it's not actually defined yet because we haven't got the data so we need so we create this wafer wrap which actually looked useless up until now so what this wafer raptors is all we need to do with it's a fee - if so it's like a conditional statement so we're only going to render this if we're fur dot main is not equal to if it's not equal to undefined and that is when we will display this information so if we hit safe again and we refresh I spelt undefined drunk or under fines there we go now there you go so now it shows everything but it's not showing any of the information here because we haven't golly yes we have to make a search so if we now did a search for somewhere let's say London hit enter there is enough air oh let's have a look what it cannot read property country for note that's fine unexpected token somewhere so I've made a an error someone said type of wafer domain is not equal to undefined okay guys so here I put API base where this should actually be URL base so now if we type in here London and hit enter you can see it actually passes back through London Great Britain which is perfect so just make sure you get your home your things right so now we've set that and we've got the wafer down here and this is now rendering this every time we get the information so let's pass through the rest of the information so for the temperature we just need to remove that nine we don't need to say math dot round because if we don't we'll get a number such as nine point six four or something similar and stat won't an alkine looks messy we want it attribute to be rounded to the nearest whole number so in this case we're just gonna say weather domain temperature and if we hit save you can see it's now seven degrees in London so if we now check what the actual we can now say wafer wafer which actually in a race we're going to get the first one in the array and then say domain and hit safe and you can see it's cloudy in London so now we've got everything but our date so the day we actually have to create a function for to get today's date so here we're gonna create something called D date builder and I'm actually gonna paste in just a little bit of code here because we're gonna need this information so we're going to pass through in here we're gonna pass through the day so we're going to create a new date which is equal to now we're gonna get the mumps and we're gonna get D days and then what we're going to do is basically I'm actually just gonna copy this whole chunk here which I've written many times before near for videos here and paste us in so what we're saying it's let Bay is equal today so this stays equal to the dates get day which is gonna get a number between zero and six which can they be able to return to us for Sunday to Saturday we're then going to get D dates which is just got get day which could get some number such as to 12th and then dressed fit and we're going to pull it into a string hit save and now up here we're going to pass through and we're going to say date builder and we're just going to call that and hit safe and what is the issue passing expect oh I put a thing for that sorry my bad so now let's get somewhere let's say Nigeria and as you could say see it gets it's Nigeria Sunday to 12th of January 20 22 27 degrees and it's cloudy now that's all good but the background in change we've gone over a certain threshold it's quite warm and a background in change when we want it to change so what we're going to do is we're going to go into our see our CSS our Styles tag and under app we're going to say hashtag app dot warm and then we're going to say background - image is equal to URL dot slash asset slash warm - background dot jpg I'm gonna hit save and then we're gonna go up to the top and we're gonna write in a query in here so we're going to sit bind to the class number one find the class to a couple of JavaScript checks we're gonna say type so we're gonna write type off weather dot main is not equal let's start I'm in dot main is not equal to and we're going to say undefined and and wafer main temp so the temperature is more than 16 degrees we're going to return warm else we're going to return an empty string so we don't need a class so we're gonna hit save and as you can see it nicely transitions to a nicer background to do with the weather so if we went through somewhere such as North Hampton in the UK and hit enter you can see that it's cold it's only six degrees right now and it's clear skies which is not normally should normally be raining or something but I think else we've got Sunday 12 January 2020 so that is pretty awesome that is a whole wherefore app and I hope you have learnt so you can do about few Jas how dibujo and we're having few Jess and I would love to see some people's wear fur apps they've built from this and improved on to make Bettis may be added in the mid temperature the max temperature may be animated it so if it said clear would be clear skies if it was raining rain would be falling down snowing snowing cetera et cetera which would be pretty awesome so far for overdue guys thank you for watching this video if you liked it don't forget to leave a thumbs up if you want to see more then don't forget to hit that subscribe button especially if you know around here to get updated as soon as we upload a new video hit that notification bell thanks watching this video and peace out always do it on my own so I gotta get through it and the only thing I know is to love what I'm doing never give up never slow till I finally prove it never listen to the nose I just wanna keep moving keep my head up when I act head up that's a fact

Channel: Tyler Potts

Views: 198,248

Keywords: vue, vue.js, vuejs, javascript, js, code, programming, css, weather, app, website, web app

Id: JLc-hWsPTUY

Length: 27min 19sec (1639 seconds)

Published: Sun Jan 12 2020