Code a JavaScript weather app with us

Key Takeaways

hello everyone how's it going times are upon us um lots of people in the chat asking telling us where they're tuning on In from which is very pertinent today because we're making a weather app so we can check the weather where you are yeah that's what's going on people coming on in from all over the world Egypt Brazil absolutely indeed yeah um so what we're going to be doing today is a weather app the snowbot yes um we are going to be calling this very famous API open weather um basically rendering the weather on the screen that's about it so um to start off I do have some starter code which you'll find in the description box right um I don't think that normally with previous how it works how the apps that we build are supposed to work but I suppose how where our apps work is kind of pointless well I suppose you can say a bit about it which is we'll get the location from this input here and then um render the weather now yeah the API first report comes with a lot of data yes which you can find in the dots API API um yes Docs how to make an API call example of an API call and this is an example of the data so it's not just um minutely wind rain whatever it tells you all sorts pressure viewpoint uvi wow wind degrees oh the an angle who knew that was a thing yeah like that does it come from north south yeah Westerly winds that kind of stuff so I suppose that would be like wouldn't that be wind direction Maybe it will actually go a minute by minute breakdown where the Way You Are awesome too much weather and if you get a minute by minute breakout like to be outside I mean maybe for air traffic controller people it's useful like tomorrow and the day after fair enough um the weather in Exeter is rain rain yes same also in Wales as usual can we use this to control the weather that can be a stretch goal yes no promises in the next hour so anyway that's open Weather AI if you want to use it um you go and set up an account and you get an API key which you should not share with other people because you do you might end up paying um a fair bit of money this gives you I think it's a thousand calls per day or something um which I think is probably going to be enough for one stream per day for free pricing yeah yeah a thousand API calls per day um for free and then after that you have to pay this for every single one now supposing this stream goes viral and a billion people watch it um and everyone's like oh well I'm gonna use Leah's key then we might end up paying a lot of money which is why um I have hopefully successfully hidden the key in this file called KJS yes right which um that is not how you manage Secrets just just to just the previous this okay uh like in screen but I don't think we don't have environment files or anything it's like if you have public keys that are supposed to be private you really shouldn't put it in the into this Chromebook yes yeah I will be deleting it at the end of this stream yeah at the end of the Stream you know hopefully nobody's watching he's gonna write a very quick script uh but you can very quickly ride with some certain chat bot gbt thing to get ahead of us anyway anyway and you're not gonna call it too much it's um imported here yes nice okay cool so anyone who's using the starter file can see it now currently yes that's fine uh well yeah as long as we don't share the starter file for now I've already shared it oh well I guess yeah they will see but we hope people who see this are actually you know Fair people you know but in an hour the key will be gone so yeah if you're watching this in the future don't bother create your own so just so people know for the future if you want to delete an API key yes how do you do it or maybe we should do that at the end of the stream uh well you basically go into your uh well go to your profile in the well app here and presumably somewhere there they should be like the part where you change your API key or you suspend your account or something like that anyway it's kind of how these streams usually go let's add a comment yeah well yeah collate would have been better um so anyway this is real where the data whether not toy API well um I wish there was a module on how to hide Keys that's an interesting idea yeah so that's kind of a little bit but it's a little bit tricky because in scrimber it's front-end face application and unfortunately in the front end once anything secret is there it's not really secret it's there forever it's like if it's on the front end it's not Secret so there are special tokens or management keys that are supposed to be public and it's okay for them to be a public because they're kind of you know abuse proof uh but a lot of these back end supposedly back-end keys they are like you know like a key to to a castle or something that everything is there so for that you do need to be highly on the back end but because we don't have a back-end support and screen but it's a little bit tricky to actually show where it needs to be um but I suppose yeah we can we can do a module or something like that like we used to have on git or you know like uh career development that kind of stuff so again it's a little bit of a niche thing right now for us that's it we will have back end and then we'll be able to do it yes looking forward to that yes um so the JS I have in here it is just importing this if you ever find you're importing a JS module and you discover that not only does it not work but it also blocks the rest of the script from running it might be because you've mistyped the name of the file how do I know this because I spent about 20 minutes trying to fix that earlier okay yeah but I asked um stack Overflow and nobody seemed to know the answer so I'm like am I the only person that's ever done this there's generic enough error too probably you've got a generic era like can't run script or something like that well there's nothing more there was no error it was just nothing happening uh well yeah maybe maybe it could be the best time ever I should answer yeah it could be many many many many different ways but yeah always always check your paths uh well to be fair in vs code or something it probably wouldn't be that much of an issue because you would get like an underlying saying oh this path doesn't exist um but you know always check your paths always true um yeah and then we've got a little event listener on this button here which I should say I did not code The Styling for this myself it came from this um 88 or something 92. beautiful CSS buttons massive Time Saver I think I used that one did you get more and more every day more and more buttons maybe was it always 92. I don't know what's special about 92 I'm not sure anything so many questions that's a nice one oh that is a good one so anyway that's what I use for the starting the button and yes then our weather function grabbing the location from location input which is this API key is calling from um this module here and the API URL is this which presumably you'll find in the docks API yep API 3.0 okay um yes here you go so this is giving an example instead of location it's doing it by latitude and longitude which I doubt you would use unless you're a sailor maybe but you can change it to include well I guess all manner of things yep yeah if you like if you have it on the phone obviously I mean if somebody asked me Michael where'd you live I don't think oh I live life you choose and I give a coordinate a longitude coordinate uh but yeah I would imagine that if you're like if you're using a mobile app and you want to show on load of all of the app you want to say you know like what's your location show it in my location then you probably would go to a browser API a request location I think it's actually called location API you would get long choosing language from that API from the browser and you just throw it into the API here and get the weather app exactly where your phone is nice yeah so that's the use of Latin long as it was yes um cool a couple of people saying this site is amazing I think um talking about the button side yes it also does box shadows and all sorts of other fiddly things which you probably don't want to hand code in nice CSS cool anyway let's have a look at HTML file is there anything particularly special there or just oh yeah um just a section which is the app and then H1 input where we're going to put location button and this div here is where we're going to put the weather information whatever we decide that will be okay going back to dummy Jason we can have anything from here all right wow okay uh you just copy paste that from the API box right I did yeah yeah just in case the API went down when we were live we would at least have something to use another thing to mention is when you set up an account it takes a few minutes to activate your key so there I was and it was saying Oh cannot fetch weather or whatever and I was like why and then they emailed me saying oh it'll be a while before your key is active and I'm like in fact it would have been useful when I signed up anyway so to do's to Do's call Api yeah set out weather data by this I mean decide what we're going to have displayed in the Dom and create basically HTML for it add weather data to Dom that should be a quick one-liner and add a catch so a message which I had a catch display if my key gets deleted which it will oh that's actually a good idea yes say take it away ah fair enough right let's do air pollution says Paris that's a good idea let's see air pollution interesting uh air pollution and also how many uh what do I do with key JS file well basically with qgis you should go into that file I think it's fair enough that we can show it because we're gonna remove okay yeah uh oh just in case they accidentally pressed it this was my foolproof plan wow that's actually pretty good yeah apparently I would have been but then I went and shared the link anyway so it wasn't that foolproof uh apparently like you can in reality you're gonna have like in your actual you know in your actual file you're gonna well in the app you might have something like a doien file where you're gonna have uh sort of like wherever app API key right and then that would be this string like so this is if you were hiding it a real application in your vs code or something you would create the dot end file and you were put in there and then you can look up on how to fetch file from.m but again it doesn't really matter if you have a front-end application so like dot end file is not a magical file that's going to hide it away if you have a frontal application you can just go to browser tab to devtools list all the files in your app that you have just bundled to your user and then you will have the API key so you need if you have a front-end that you need to do something completely different uh this is if you are writing a backend app that will reply in an API but you know once you have that key then you obviously can import it into your app okay from yeah so from there if we are calling the EPA we basically need to say uh simply most people will just use fetch although you can use axios or any other Library you want it doesn't really matter really uh you can do this for memory I will be very impressed really I mean it's not like just wait fetch API URL and then I think that's kind of all right let's see if that works I would imagine it's probably not gonna work unexpected reserved keyword really what is it it's not going to tell you what it is just that there is one oops so that should be async so uh how can we wire it up the get where the button yeah I think right otherwise listener click get weather and then we grab the location from the thing so it doesn't mean that it actually yeah does it actually run but when we clean the button it doesn't run so that is actually pretty good because resized by I'm always amazed at what I get from this grimba Auto filling in thing we do get a response yeah we do so now good time uh that's probably not gonna work use it because that's a promise okay so what I normally do is I basically a weight rat s and that would be my response I will explain there's an attack uh this is a function it's a function so uh very straightforwardly basically you want to when you well when you're fetching API uh from a URL right you always need to have weighted because that will uh resolve your promise uh but the problem with fetch that whatever you get you always want to convert to Json but the result of this Json function is also a promise right so basically I'm saying that this whole thing take it in one expression run the promise Json function awaited and I just kind of wrap this into one line because it's kind of one thing right um sounds good I know that Jason you know you might want to get your XML or whatever but most of the time I feel like Jason probably should have been a default behavior of fetch because I didn't use it like that yes um but it's not so there we are yeah play itself yeah so anyway uh nothing's a geocode and that is because I have not provided any values so if I for example Cardiff okay and we get some weather from Cardiff okay but that's actually a very good um pretty good idea to actually just go for a try and you go for catch and there you might actually so console log a response here but turn the catch maybe you can put have you actually entered a location yeah and then you basically a catch an error and you can just say console.log you can write yeah or you can write error maybe just write e whatever and then from there with e though doesn't that normally mean event it does but like in the catch context that will always be an error because you always catch an error right it's not going to be an event that you catch um I just to prove that it's actually an hour I'm just gonna say console log error and then oh interesting so actually you do get oh right so here uh so that's not gonna end up with a catch because that has actually worked code you got a response from the API phase of 400. so um you can then go if um you can say [Music] if sponsored Cod so it says okay there's a string that equals 400. will handle all these separately console log try actually adding a location 400. for now let's just see yes to the typical user that will be helpful Michael yeah yeah sorry exactly well I think that a lot of these errors and we'll just double check in the actual dogs let's just zoom in a bit uh I think like 400 that looks to me like what they're basically saying is it's a 400 by the input so it's an HTTP code that says bad request By Request means user provided bad error you can a bit to the end user that probably won't help no that one helpful error message 400 years yeah but request so with that you'll probably need to check the message for what exactly happened so you could just do um 400 could you do message nothing to geocode yeah so uh yeah exactly so if Response Code was 400 you probably want to display that back to the user to explain them what happened uh usually these apis would have a message you can kind of bubble that message out but maybe you don't really because you know nothing to geocode might still be a little bit cryptic like what does that actually very much so you know what does that actually mean uh so suppose you can do you know you can handle errors in a separate function but let's just make it a little bit ugly at first but somewhat functional later so we have decided that a response code is 400 and then basically we're gonna say response message and that would be our particular message here code and now we know that this is this particular error that happens in which case we'll probably display something with a display I mean really this would be better function um better handled in the HTML so maybe you can't press the get weather button if the input is empty yes but you know if while we're illustrating well you know they might find a way to input nothing and then run the function yeah so never have too many safeguards in place const uh well you know what it's usually like the outage goes no one tries to your users it's in you know obviously try to use this as people but never trust their inputs that's basically what it is uh but that functions underlined yeah because I haven't uh all right yeah who was this yeah so I want to just quickly grab uh with a display that's already grabbed I think oh is it where the display I don't see it with a button okay maybe not maybe not um right this way and the display and then I'm just gonna say it play Dot it's something that's a div though I actually think that would still work won't be great semantically but we can fix that later okay we might not work um let's find out display content you need to fight our vacation to get a forecast for like location needed would be maybe not though I mean doubts Now location needed location needed obviously you can uh you know if it's an error rate you can probably add an error class to make it red that kind of stuff yes um question question what's the difference if we use the raw new error instead so uh well basically I I have seen a lot of uh like Soros in general uh basically when you throw an error you're basically saying something else will handle it right something else will catch it every time you throw an error you need to catch it uh even in your code you know if you throw it in this function something further up the stack needs to handle that error because if you don't you will get like errors in the console or something else or something doesn't break so through an error is kind of like you know you have something burning and you just like pass it on to somebody else like you you do need to do something about it rather than just pass it on um but catch you can use if you don't have anything else to handle it you mean uh yeah and you can basically most you should strive to handle most of the errors unless they're like catastrophic or shouldn't happen and in that case you have basically like logging monitoring software that monitors your application and then it tells you oh here is this error that happened to the user and then for example like Sentry for example for front end it handles uh like watching for most common errors then you're trying to debug it and then you fix those bugs that your application doesn't run and crash and stuff sounds good uh but basically yeah for example if you want to catch like we run this API right we don't want the app to crash but so we do catch something and like rethrowing in the catch you only do if there is somewhere else something else is caching and handling it but like for example in your index.js you should probably log an error or well again with like in the production application you're not going to log to your console like it's not going to be a console log you're probably gonna have like I don't know I've seen that in production sometimes well yeah but that's like you know somebody was debugging something and then they forgot to do it forgot to leave the debug and it's like you know like yeah if you go to F12 and then you see like here here here in your application console somebody didn't remember with their debugs it happens more often than anything uh but normally uh this would be something like logger dots error right and then you would specify an error for example API error and then it would be you know e Dot status you dot message stuff like that too and this is only going to be um available to the developers so basically this will this logger object is connected to your login software like datadog and then in your data dog when you log in there you will see this uh showing up in your application of the stages the user will never actually see this but you as a developer will be able to see okay so there was this yeah there was this API call uh you obviously will provide a little bit more details about where this error actually occurs and then you will go in try to debug and then remove it so it doesn't happen again but also for example if you're monitoring something like 400 errors um you can actually just say uh you know logger.1 and you will write something like user badge input and then you'd specify what that about input is and then for example later when your app is already in production you will be able to monitor these messages understand how users are using it you will probably be seeing that for example a lot of the time users just log into your application and click get weather without providing any anything so maybe you can re-engineer a little bigger application that instead of getting a weather there will be no button so you have to click on this to put the location in so you will have to adjust the usability to avoid some most common you know like ux issues for example you need to take a long hard look at your ux so if you have a lot of 400 errors usually it means that maybe some things can be a little bit easier you can try to help you users achieve what they are trying to achieve if they're really bad at you know using input uh okay so for example once we get there um actually I'm not entirely sure where well sorry we're not really connected so I'll just say wrote that back to console log API error and I'll just log an error and to show what might happen if you go through new all right I think that's the syntax I don't remember let's give it a guy I use go okay co-pilot so so much that I actually forgotten how to write the arrow on on its own hand crafting that's what this is yeah I know uh okay yeah okay there you go so yeah and you will get a log of some sort so and then you're catching it but if we're not catching it let me just uh clear that out so get weather uh we did get a bad request here but that's kind of the scrimber scramble kind of rethrows errors that are in your um in your report to show this so in your actual app this will not happen because you're catching it it's kind of but you will see as it needs to happen um yeah that deck scalper why I wait two times on line 12. this is because um one is awaiting the call from the API and the second one is awaiting the Json function yeah thing yeah it's uh yeah I mean you can't Mo I noticed most people do is they write it write it like that and then they go cons Json equals you know a weight response.json all right right it is a Nifty way of doing that one which yeah exactly but you know semantically if you if you look at it you know it's the same right this is a response this is a response so that that's the same thing so basically I just try to wrap it into one line instead of trying to come up with it and then just call a response and that's it um jaina and Michaela um say hello I bring this up because they are some of our code reviews yeah on the screen brother okay so what happens on the boot camp is you can get I think it's four um reviews of your code per month plus follow-up reviews if you sign up so yeah go and check that out if that's something you'd be interested in anyway back to this so we've called the API yes yay not bad set out our weather data so choose what we're gonna have sorry I need to remove where I throw an error yes yeah yeah and um build some HTML which we will then append to the Dom I guess yeah so uh we have finished handling the well 400 but realistically you will be able to you will need to write the right code like 400 403 like for example unauthenticated that kind of stuff so you'll need to you always need to think about your errors and how your software can break and stuff like that um so from there once we know that everything works we'll basically just write um you have handily copied Dominator right so we now know okay so the coordinate we don't really need that um as such I suppose well not for what we're trying to do uh we have this weather ID main rain description I think description looks good moderate rain yeah yeah moderate ring and then bring the extra reply we got for Cardiff we got with a light ring okay oh uh all right yeah because that's the dummy data temperature Sunrise ah this is like the um the Unix timestamp I guess yeah uh time zone really interesting yeah fair enough okay cool time zone zero so I guess that's GMT plus zero yeah well not plus but yeah Bridge winter time yeah yeah that was good ESD um okay oh look there's an eye an eye cut 10d I wonder what that is what is that I don't know I don't know it looks like you might get a weather icon which would be very nice weather icon how to get icons oh sounds complicated oh look at that I can listen how to render them so does it mean that you go oh they're just pngs yeah so I think it basically goes weather up fine image and then you input strength of later yeah I hope so that would be nice wouldn't it okay let's go to them oh wow this is exciting okay well in that case closed and let's uh one of those curly brackets oh uh basically what's it called um object distraction no so I go oh it's actually a ray all right so weather is an array so you can have I mean you can have multiple weather events right in your in your area so I'll get the first object of that and from inside I will get description and icon we decided right yep and then we have also decided that probably who is it temperature everybody gets feels like even though it never feels like it um air pollution yeah so from Maine we'll grab what did we decide to grab camp feels like um humidity okay then it's visibility wind rain clouds I feel like just I don't see air pollution oh really yeah I don't I don't see it okay let's work with what we've got no I'm afraid we cannot do air pollution I mean arguably that's not technically weather so you can forgive them for not including it fair enough then again neither is time zone can we actually get with pollution I didn't see it in in the dogs I don't think we can sea level pressure visibility clouds well anyway if uh I know that somebody requested whether uh air pollution if you know where it is please give us a shout right what was that we needed to basically either we want to now draw paragraphs into here to say something like this is the weather this is the other one yes and then after that we're going to append them to um they're done cool okay so let me can I just and then okay so we have okay so we have description icon so let's just create const so first selecting which um information from the API we're gonna use right let's just um create and then rendering it fair enough so whether just created as a string and then we can probably make it a little bit nicer from after that where you have so this would be the filling of the div but because I'm a bit too lazy I'll just do it here because we want paragraph which would say something like 10 degrees yeah sounds good um laughs so description icon temperature feels like uh so in that case so that would be description light rain fully alt right I can and then paragraph will be feels like icon can be in the paragraph because it's an image basically okay so that'll be actually let's code it it's a good point can you have an image inside a paragraph image inside paragraph HTML there's an image flow to the right of paragraph nope images oh no you can't actually have that so what do you do put it above um for now or you can use a all right now you can wrap them both in a div and have them separately Fair well let's have let's see how we can style it so and you can just grab that as we just found out that apparently all these icons are there why yeah I know look at that nice feels like 10 degrees and we had other Temple we like to do this in the HTML rather than the JS first so you can see what it's actually going to render yeah yeah and then like you can style it as you go as well so you have some dummy data to work with um right yeah good job uh so but obviously because I'm then appending it I can actually now remove all of it go to my English yes weather paste it in yeah and now yes string interpolation uh yep exactly and now well first we have to select which we're gonna use yeah so I've already pulled them out from here all right yeah okay I didn't see that so description oh this is going to be so fancy I'm excited start having some um cities where you're from in the chat so we can confirm if the weather is accurate so like foreign it's light rain and then I think is it like that yeah I can okay let's go pardon Maine is not defined ah yes both of me oh okay okay it looks successful yeah well let's find out this and we said display dot not text content with it dangerously set HTML and reacts but what is it in my choice they will you know HTML hey there HTML okay is it actually dangerously said HTML uh yeah I think so um because you shouldn't be doing it what oh I suppose you can do like all the create element and all the rest of it instead of that yeah dangerously set in their HTML yeah because it's like you well basically you shouldn't do it unless you know what you did because it can create some vulnerabilities that people can explore in the app yeah to be exactly it's like yeah I think it's called cross-site scripting injection or something so that Cardiff wow that's the same icon right so it's like rain okay so we have some other things to try um alsoever says Christopher Albert okay whatever it's a few clouds 1.16 degrees it should feel like mine that is five let us know Christopher if that sounds accurate um right Athens jerasema well actually it actually feel nice unless it's a summary in America or something it should feel like 12. actually if you say Athens USA does that oh wow it's actually the same weather is it the same way maybe it was giving us that one in the first place no I think it's slightly different yeah scattered clouds and they'll read properties of undefined with like both Athens have strangely same weather yeah maybe everything else is the same as well um around there has helpfully given us a heads up already so it's your 20 um clouds and it is almost 20 degrees amazing so look at that it also feels like 20 degrees that's interesting actually oh look okay that work I don't think so I think it might no okay yeah so we need to handle that error where it says La is another city like even though very clearly is a city well anyway loss at least it's missed um says it's sunny clearly says it's missed so bear pal oh broken clouds 23. let us know if that's accurate now this is an interesting one code with Chatham India so obviously India is a big place what happens Santa Claus zero degrees I find that difficult to believe I don't think there must be there must be a city called India so it would be good if we could render City some more information about the location no um actual City Hall India no interesting so where does it where does it get this uh well that's what I mean if we could find out what it actually understands by India or anything in the cult that tells us yeah luckily I mean I know we get the coordinates but for humans that's not we were getting uh we were getting the console logs so here's the coordinates clouds country Italy and it actually says name in the chin so it's like it tried I feel like that's not in Italy actually look also from our logs I mean dolomites anyway what we've learned from this is I think we need to also render the name and the country so that if you get the wrong place like with the Athens thing you will know about it um yeah those are like it has found Los Angeles but it looks like some objects were not in there cannot read properties are undefined region zero so maybe like didn't find whether it did find the weather description mist it's got the icon oh no hang on oh no sorry that's when I actually typed Los Angeles never mind sorry it didn't divide it never mind yep City not found but apparently it can try to catch typos like for example for Landon okay you can't I can't do that no London I'll just come to that okay I I don't know how it works maybe we should render the name and the country um okay so where's it I think it's in Maine end of paragraph you know saying it's then we could put weather for name comma country oh no it's in it's in CIS oh yeah it isn't says so I can't start okay and then I'll grab is it country and name country okay let's get that on the fight why it did or maybe it's a different object let me just make this more so oh yeah it is a different object so yeah the name is in the main it looks nice no yeah with us name come from sis it's on the same level right it's on the same level with Main and name so is it just on its own then so I think it's like from once we can grab better yeah and I think name is actually here name weather name and then I'll just remove to make that hip says are you using acreageal hard-coded data just got here this is apis the fine weather fire weather has already been defined oh right whether the text oops where the text okay okay right so let's fix it kind of GB okay okay promising la no as we already found if we try to type the whole country okay for some reason it goes to this Italian town uh let's see I really don't think that's an Italian [Music] or something yeah like it's in South Tyrone UK no uh France say hi chili I feel like that's a state Cincinnati is out of state CI I don't know concrete really CI ISO to code to get it and let's go for what did we get CI Cordova so apparently France is a town and Cote d'Ivoire and there's currently broken clouds 30 degrees feels like 35 36 almost there so actually 36 degrees when it's cloudy spring really Spain there's a town in Spain see I don't think it is I feel like that has just understood the country because it surely it would expand yet Spain in English um city called Spain well there's one in South Dakota about it says yes so that's definitely so yeah I think that is definitely understanding that we mean Spain yeah Italy easily U.S okay well there we go try it you know try not to ask countries from this APA um one interesting thing you know go for something like Bristol you know or Mr Tidwell there you go Edinburgh let's try McMurdo Station Antarctica inspection thank you yeah that actually minus 25 well that looks accurate yeah anyway um we need to get rid of the key now so let's do that oh okay uh so I think it should be like support no my API keys oh man okay do you remember your password no no it's not okay so I will do it off screen okay well here you go off I go okay uh in the meantime discuss what other optimizations you could put hmm well I would imagine that country codes are actually pretty annoying because most people don't actually know what they are like yeah you can try to guess with two letters like Ci we didn't know did we yeah so what you can do is there is a really cool Library uh what is it called IC Code two country name um 100 name just right and oh there you go so this should be like somebody basically uh there are libraries but there are also you know something it just gives you an object with a function that you can call so you could just import that into your um well just copy it really into your app yeah exactly so you can yeah you can just do like that I mean again this is not maintained right so you have to keep an eye on like uh un Council if there are new countries countries change yeah um you can just add it like that and then it says get country name right into the main file you know into the main file yeah exactly keep everything in one file you know just and then okay right so gay country name country name so Cardiff get weather United Kingdom there you go see done and then you can go what was that place uh that we didn't know CI do you remember the time that we looked up well that happened when um yeah okay so let's see can you just where's that I need to log out right okay I know it's me okay United States no it wasn't actually France laughing at the front Okay let's spot right yeah look it's working there you go cut the bar and then Spain is Canon Spain Spain Spain right now I mean who am I to question okay fair enough yes so you oh actually you can give a name to it that's pretty cool status active and then you can presumably this means deactivate yeah do you want to deactivate this key yes I do and now I will say you can't actually delete it uh probably not but you can probably uh new okay all right yeah and now you can delete it okay so there is a new key that is and then I'll delete that right so you have to have a key but there you go the new key is now deactivated okay uh but Leanne will probably delete I could create a new one and deactivate it but so let's see does that work um with deactivated key Spain get where that four or four City not found oh actually didn't I do that before yeah it's still working um maybe it just needs a refresh it's still working I think considering that you told at the beginning of the stream they took you a little bit of time for that key to start working I reckon they'll probably take a little bit of time for that key to stop working make sense let's check out the leathering keys okay um it's a few clouds so hopefully that will stop working so otherwise I could end up with a big Bill well yeah I hope not yes okay and uh well that should be that should be that parents that's right give Credence to that GitHub user company oh yeah absolutely good shout thank you very much uh so I hope it's uh there we go me to your Chef the meteor Chef JavaScript I say the country code name conversion we should um copy that into the chat yeah and oh actually you know if we're a given shout out then you know it is actually forked from somebody else oh so it is can you so okay there you go you can go and check it right yeah yes fair enough yeah good job yes you said it took a few minutes to set up might take a bit to shut down yeah oh okay one weather app later so fog of somebody else um oh wow look at that last Act of last month and there are for anyone using knockout.js try this look at that this is actually quite maintained look at that it's a massive GitHub chest pretty big yeah somebody actually look at that somebody also tried to like to yeah internationalize it so there you go things out there you don't need to make them yourself yeah or somebody did the other way around well that's handy if you want to look up from country name to country code yeah yeah well I think uh uh you know there is an actual yeah I think that's the library that I meant country code yeah that's the one country to Alpha Yeah country to ISO library that is really decent and you can also because you see with our app uh if you have like us you know it handles the iso codes and stuff but if you want to handle slightly different names like USA or you full stop s full stop a and then it might break but you might go for something like this and also it handles you know awkward names of a us and a is there anything you can think of to put that exactly like America yeah uh and he also works with the UK as well so you can put like United Kingdom UK GB Great Britain and it outputs the same I suppose oh that is like an eternal problem you never know where to select from where am I in this drop down is it going to be G is it going to be e if you're in England is it going to be you and then sometimes they just randomly put it at the top or bottom yeah yeah anyway there we are today yes um code with Chatham now says bro you don't need to give a shout out go to the real one copy the repo link and paste it above the code what the real one and copy the repo link and please see about the copy code uh why does that do oh I see all right all right it's like uh right copyright yeah fair enough copyright slash credit fair enough oh I like your comment or their code yes let us know when you start crowdfunding land or 100 start a country with you we'll call it pumpkin land after our cat okay Allen Islands and who was that part of Finland um code the Chatham Goods yeah what's up so um thank you for joining us on this fun weather journey we'll be back in a couple of weeks with something else don't know what yet any ideas leave them in the comments any closing thoughts uh I saw Friday today is it no sorry Thursday oh my God um survive until the weekend happy hump day oh yeah because it's you know well unless you're having a day off today in which case yeah or maybe your weekend doesn't start on Saturday but yeah but anyway enjoy the rest of your week and as Christopher says have a great day catch you later everyone [Music] unfortunately yeah our sample has broken so we have to make do yes see