JavaScript Zipcode App Using Fetch & Bulma CSS

[Music] hey guys today we're going to be building a simple application using vanilla JavaScript that will take in a zip code and then give us that location info all right so for example if I put in here o to 1 to 0 you'll see that it'll give us back the city to state the longitude and the latitude and we're using the Balma CSS framework which is a nice change from the usual bootstrap or materialise that I usually use and we can close this out if we want and you'll see that the zip code will clear out and we also made it so that if we put something that's not a valid zip code you'll see that we'll get this little X over here and we'll get an invalid message all right now this is pure JavaScript we're not using any frameworks or libraries and the reason that I've been doing a lot of these types of applications is because I think we're over using frameworks and libraries for things that that they're not needed for very small applications like this for larger applications they're great you know react angular full stack applications that they're really great but there's there's a lot of things that they're not needed for JavaScript alone has has really gotten a lot better to work with I mean we can select things from the Dom and work with the Dom very easily now with the fetch API which is what we'll be using we don't have to use jQuery or you know external HTTP libraries we also don't have to make complicated xhr old-school Ajax requests so I think it's good to start to get into you know building applications with pure JavaScript so enough of the the babble let's go ahead and get started with this application I want to give a huge shout out to today's sponsor male tag male tag is a Chrome extension that allows you to track your emails in real time for free it also lets you track other cool things like link clicks email reopens and even the device that was used to open your emails be sure to check out male tag by clicking the link in the description below alright guys so to get started I just have a folder called local patient finder that is completely empty and we're just going to create an index.html file in here and that should be all we need for this small application now to get the location info we're using an API called zippopotamas if apothem us and it just basically it's a very simple API you don't need a key or anything all you do is make a request to API dot zip upon m dot us slash and then whatever country you're using this is gonna be strictly US zip codes that we're doing but feel free to build your own application using different countries and then just the zip code okay and then it'll give us our response which will include the info that you saw the the longitude latitude all that stuff the city you can also make request to slash country slash state slash city and get the zip code if you want to do that and you guys know that if you if you kind of if you want to take the application that I build and tweak it and you don't create something on your own and you can look at it kind of it's like a homework assignment if you guys want to do this I'll always approve those links you know most links will go straight to spam in the comment section but I'll always approve those if you guys want to display your work alright so just to let you know so that's what we'll be using this API here so what I'm gonna do over here in index.html is just put in some basic HTML tags using Emmet alright so let me just close that up and we'll go ahead and have a title here we'll call it location finder all right now as I said we're not using any kind of JavaScript framework or anything we are going to use a CSS framework called Balma CSS so we want to get the CDN so I'm gonna say bulma CSS CDN and let's grab it from CDN J Escom and I'm gonna grab this right here so we'll say copy link tag and we'll throw that in the head area alright I'm also going to use font awesome which is an icon library so let's search for font awesome CDN and we'll go ahead and grab that let's say actually we'll just grab this right here this link tag and we'll put it right under the Balma CDN link alright so we'll save that now I'm using live server as you guys know if you if you watch my tutorials I use a plug-in for vyas code called live server that will just open up my HTML file on my local host so if you want to install that you can go ahead and search for it here and install it and then you can right-click and say open with live server all right so that's gonna open up our page over here alright let's close this back up alright guys so let's go into the body here and we're gonna wrap everything in a section so we're gonna put a section tag and we're gonna add a bunch of classes now I'm using Emmet so I'm just gonna use the dot syntax here and say dot here oh that's gonna be the first class which is a Balma CSS class kind of like a Jumbotron or a showcase area it's also gonna have an a hero - body class and then we also want a class called is - dark which will make it dark and make the text light and then we also want a container which will contain everything into the middle and then I'll hit tab using Emmet and it'll make those all into classes alright so if I save this you should get this this black bar alright so in here we're gonna have an h1 we're gonna give this h1 a class of title and in here we're gonna say us location info I'll save that and then underneath that we're gonna put an h2 and give that a class of subtitle which is also a Balma CSS class and we're just going to say enter a zip code to get the location info alright and then underneath that we're gonna have our form so let's create a form tag we're going to give this an ID of let's call this zip form okay we don't need an action we're not actually submitting this to a page alright so what I'm gonna do now is go to the Balma CSS not CD and I just want the documentation and let's see we want forms alright so this is you know what alright so show code so each field should be wrapped in a class of field and then let's see we want it we actually want some icons so we're gonna need this this class with control has icons all that stuff we want it to look like this right here and you can see that they're actually using font awesome as well there's no there's no icon library associated with Balma so you want to use font awesome so I'm just gonna copy this second field right here and we're gonna go ahead and put that right in the form all right and we might have to change some things up well we will have to change some things up we're not using a user name actually I'm not even going to use a label so we're gonna get rid of that okay so no label this div right here has a class of control has icons left and then has icons right that's fine let's see input is success for the for the input class let's do input and zip and let's say is large we want to make it bigger all right and then type text placeholder for the placeholder will just say enter zip code for the value we're not gonna have a value just get rid of that all right and then for this span right here it has a class of icon is small and is left and then we're gonna change the icon from user to map - pin alright and then for this spin right here we're gonna that we're gonna keep that as a check so this is fine let's see now it's gonna be a check if it's a valid zip code right so we're also gonna have an X if it's not valid so we're gonna copy this and let's put that this in here all right and then let's see this is gonna be I con is small is right we're also going to add a class of icon - remove all right and then this is going to be instead of FA check it's gonna be at the FA remove so if we save that we take a look we have two icons on top of each other which obviously isn't what we want and this right here we don't want that either so let's just get rid of that paragraph all right so what we want to do is initially hide the remove icon we don't want that to display actually we want to remove both of them to begin with and then after we make our request if it's successful and the zip code is a real zip code will show the checkmark if it's not we'll show the X so let's go up to the head here and we'll go ahead and put in some style tags and we're gonna initially hide both of those all right so let's say dot icon remove and then actually I don't think I added the the other class or is it so yeah this is icon remove so for this span right here we want to add icon check like that and we want both of those to be hidden so let's say icon remove comma icon check and then we want to display none and save forgot the dot right there and save and now we don't have either of them displaying all right so that's what we want now our HTML is just about done all we need now is is a place for the output okay so we're gonna go under the section okay so we'll go under the section let's put in Hawaiian break and then we'll put a class of container and inside here we'll have a div with the ID of output alright so that's basically our placeholder that's where we're gonna have our JavaScript dump all the location info so let's save that and now our HTML is done all right so now we're gonna create our script tags down at the bottom here okay so in here what we want to do first is we want to add an event listener to the form okay when we submit it we want to call an event so let's say listen for submit and we'll say document dot let's use query selector okay which is just like using jQuery really I will say zip form and then we want to add an event listener okay we want to listen for a submit event and then we're going to call a function called get location info all right so now down here let's go ahead and create that function application info alright and that's gonna take in an event parameter and let's just console dot log and we'll just console.log one two three now since it's a submit event it's going to or since it's a form that submits it's gonna try to submit to a page but we don't want that so we want to prevent that default behavior and we can do that by taking that a parameter and saying prevent default all right so let's save let's open up our console with f12 go to console and just whatever put whatever in there and enter and we get one two three all right so that event that submit event is being fired off and it's calling this function alright so what do we want to do next we want to get this value so let's go ahead and get rid of that console log and we're gonna say let's put a comment here we'll say get zip value from input and we're gonna create a variable called zip and we'll set that to document dots get actually will do query selector so query selector and we can get it it's a class of zip and we want the value okay actually did I add the class to the input no yeah I didn't has a class of alright so we want to get that value and just to test it out real quick we'll say console.log zip alright so let's go ahead and add in a zip code here we'll say o - 1 - 0 and you'll see that's just gonna log it now what we want to do is make a request to this URL right here and we want to put the zip code in here ok so let's grab this and we're going to use the fetch API that's what a comment here will say make request and it'll say fetch and here I'm gonna put a set of back ticks because we're going to use a template string and let's paste this in for some reason they didn't put HTTP so let's make sure we do that and then this value here is gonna be our zip variable so to put a variable inside of a template string we just need to put a money sign and then some curly braces then we can put a variable in alright and that's just es6 syntax all right now the way that fetch works is we're gonna put in dot then right here okay make sure you don't put a semicolon here this is attached to this because it returns a promise we're gonna take that response and it's good we're gonna map it to Jason so we want to say response dot jason like that and then we want to put another dot then in and that's where we can get our data alright so in here we're gonna put data and we're going to use an arrow function and let's just for now console dot log that data all right so let's go ahead and save this and then let's go back to our app and enter and you'll see that it gives us our data back okay so it gives us the postcode back it gives us the country the country abbreviation and then a places array so the the actual city and stuff like that that's going to be inside of an array okay and it's gonna be usually an array with just one value okay so it's the zero index and that's where we can get all of our stuff so when we go to output this down here in our JavaScript we're gonna have to loop through it okay so we're gonna have to use a for each loop or something to go through that array and output it all right now we have to check to see if this is a working zip code and the way that this works this API is if this isn't a valid zip code so if we just put something in here and we hit enter it gives us a status of 404 okay because this link here this is not found because that's not a zip code so what we need to do is go into this first then and we need to test to see what the response code is is it 200 which is a good response or is it something else like a 404 and then that's how we can tell if it's a working zip code so instead of just directly mapping this to response dot JSON we're gonna set this to a set of curly braces and we're gonna do some stuff in here alright so just to show you the response I mean I'm sorry the status you can say response dot status all right and if we go ahead and we put something crazy in here you'll see that the status is 404 if I put a working zip code oops I put a working zip code we get 200 as the status so what we're gonna do is a little check right here and we're gonna say if the response dot status is not equal to 200 all right so if it's not equal to 200 that means it's not a good zip code all right so what will do is will output an alert here that says it's no good so we'll say document dot let's do query selector okay remember we have that output ID that's what we're going to grab and we're going to say dot inner HTML equals and we're going to use template string so I'm going to put it set of back ticks here whoops all right so in our back ticks we're gonna put the alert now in Balma this is actually a called a message so if we go to components message we want the red one here which has a class of I think it's is danger or is it yeah right here so class of message is danger then it has a we don't want the header we just want the body so we're just going to put an alert or a message in here and we're just going to use an article claw tag all right so we'll say article and we'll give this a class let's give this a class of message we'll put the message body in here as well and then let's put is danger all right and then in here we'll put our actual message we'll just say invalid zip code please try again okay and then what we'll do is we'll just throw an error if this happens so we're gonna go under here and say throw error let's hope cerar and then in here we'll put in the status text in addition to the status it'll actually give you the status text so that's what we want to throw so response dot status text okay and then we'll do else okay so else then we just want to basically just map the Jason just like we did before before we did this check and we can do that with just returning response dot Jason like that all right so let's save that let's go back and if we put in something crazy here and enter we get our error now we're getting this uncaught down here because we threw the error but we didn't catch it so down after the second dot then we're gonna do dot catch and in here this takes in an error and then we're just going to console dot log the error all right so now do that again and it'll actually just log the error here okay you know what this text should actually be read though so actually you know what I think let's not put the message body in there we're gonna put a separate div here oops so div class message body and we'll wrap that text all right so that should look right let's try that there we go all right so we took care of you know checking to see if it's as a rail zip code or not to get in then we get the alert but I also want that the check or the X over here so what we're gonna do is we're gonna create another function under the get location info and we're gonna call this show icon all right so this is gonna choose to show you know either the check or the or the the X and this is going to take an icon okay a variable called icon and we want we want to clear make sure that there's no icon displayed there first before we do anything so we're gonna say document dot query selector let's get the class of icon remove okay and then we're gonna say dot style dot display equals none okay we're gonna do the same thing for the what's the other one icon check I believe so we'll say icon check all right so this is just making sure that there's nothing here before we do anything so once those are cleared then we want to show the correct icon okay now I'm just gonna copy one of these and we're gonna say document query selector and then whatever's passed in here this will either be check or remove so we just want to change this right here to a template string so we want to use back ticks because we're going to include a variable and we're gonna say dot icon - and then whatever is passed in so remember to use a variable we use this syntax and we're going to put in our icon variable now instead of setting it to none we're going to set it to inline - flex all right that's what Balma uses to actually display their icons here so it's gonna go from none you know display:none to inline flex okay and then we need to decide where we're actually going to show the icons and when so when we make our request and we figure out that it's not good it's not equal to 200 then we're gonna show the icon alright and we want to show the the remove icon so we'll pass in remove all right that way it's gonna display icon - and then remove so down here in the else right before or is it right here right before we do the response dot Jason will call show icon and we'll pass in check all right so let's go ahead and save that let's try it out we'll put in something good and enter okay we get our check let's try something that's not good enter and we get our X all right so the last thing we need to do is just display the correct info if it's a real zip code all right so we want to go down to where we have our data right now it's just console logging so if we put a good zip code it's just logging the data what we're gonna want to do is loop through the places array that it gives us and then output those okay our output that so let's go ahead and get rid of the console.log and we'll just say show location info and we're gonna create a variable called output and we'll set it to nothing at first and then we're gonna loop through those places okay we can get this this array with data dot places okay so let's say data dot places and then we're going to do a dot for each and in here we're gonna put in place and then set that an arrow function alright and then we're just going to append to that output variable so we'll say I'll put plus equals which is going to append it and then I'm going to use a template string so make sure you use backticks here alright so in here we're going to use again we're gonna use an article can I use Emmet I'm not sure if I can use Emmet in here let me try it message okay I can good alright so we'll put a message let's make this is primary which is going to make it I believe the green greenish color and then we're gonna put a header so we'll say I div with the class of message - header and then here we'll put a paragraph oops just put a paragraph and we'll say location info and we're also going to have a little delete button so that we can get rid of it if we want so we'll say button and this is gonna have a class of delete ok and then I believe I don't think we have to put anything in here I think just putting the class of delete gives it the little X so underneath the header the message header will have the body so let's put a div with the class of message - body and inside here I'm just gonna put everything inside of a UL alright so we'll have let's put an li and we'll put in some strong tags and we'll say city colon space and then we can access everything with this place variable alright so remember to use a variable we're gonna use the syntax es6 and we're gonna say place and then we can access with inside brackets we're gonna say place space name which is kind of weird that they use a space if you look here you'll see place space name ames bear so we need to use the bracket syntax and then wrap it in quotes all right so that's the city or the place name I don't know why they didn't just call it city but let's go ahead and copy this Li and we'll paste in three more so after the city will have the state so we'll change this right here to state then we're going to have the longitude and let's see this is gonna be place longitude and then we'll do the latitude all right and that should do it as far as the the mark up here now we need to do is just insert it into the output div that we have up here okay we have this div with the ID of output so what we want to do is go outside of let's see outside of this for each which ends right here and let's just say insert I will say insert into output div so document dot query selector I D output dot enter hTML is gonna equal the output variable that we just created all right so that should do it let's save let's go ahead and put something in here oh one nine one three and there we go now if we want this delete button right here to work we're gonna have to add that functionality so we're gonna have to add another event listener so let's go up to the top here and we'll say listen or delete all right so we're gonna have to use event delegation here because the delete is inside of the for loop or is it right here so it's inside here so what we're gonna do is we're gonna listen on the body on the document body and then we're gonna fire the event and then we're gonna check to see if the delete button was clicked all right so let's go ahead and add an event listener I'm just gonna copy this and we're gonna listen on the body okay and we're gonna listen for click and we're going to call a function called delete location all right so let's go ahead and add that function down here say delete location box I guess and passing an event parameter there and then let's just do a console dot log one two three so right now if I click anywhere in here we're gonna get the one two three so what we need to do is we need to make sure that what we click has a class of delete so we can do a little if statement here and we can take that event parameter that event object poisonous there we go so we can take that event object and we can look at the target and then the class name okay so if that is equal to delete then we know that that's that's we want to keep going because the delete button was clicked so in here what we'll do let's just test it out first will say console.log one two three so now if we reload you see it's not working if I go and I search for a location and then I click on if I click anything down here not working I click the button we get one two three okay so what we want to happen here is we just want to take the message okay I remember this has a class of message and then we want to just remove it from the Dom all right so let's say document dot query selector message our dot message it's a class of message and then we're gonna do dot remove okay which will just completely remove it from the Dom and then I'd also like to clear out this value so we'll say document dot query selector and remember that has a class of zip that input and then we want to say dot value and we want to set it to nothing all right so if we save that let's try it out so oh one nine three and we click X and it clears out now we still have this check icon here so if you want to take care of that and I guess we could just let's copy this right here and we'll change this to icon - check and we'll remove that as well let's try that there we go all right awesome so I think that's it guys so let me put a comment right here say show check or remove icon good so hopefully you guys enjoyed this project it went a little longer than I thought but then again we had these you know the Balma CSS mock-up and all that removing the icons and so on so that's gonna be it guys hopefully you like this if you did please leave a like please subscribe share it and whatever you can is great thanks for watching and I will see you next time so I just want to give another shout out to male tag who sponsored this video male tag is a free Chrome browser extension that allows you to track your emails in real time I've been using it myself for about a week now and I can't recommend it enough on top of email tracking mail tag has a bunch of other features like desktop push notifications that alert you when your emails have been opened link click tracking that shows that people have actually clicked on the links in your email and a ton of other cool features again all these features are completely free be sure to check out male tag and click that link in the description

Channel: Traversy Media

Views: 28,384

Keywords: javascript, bulma, bulma css, javascript api, fetch, javascript fetch, fetch api, es6

Id: K3GfUH7AZKs

Length: 35min 0sec (2100 seconds)

Published: Fri Oct 13 2017