Lets Make a Pokédex using Vanilla JavaScript

if you've played pokemon or seen any of the shows you know that a pokedex is one of the most important tools a pokemon trainer can have i will show you how you can make a fully functional pokedex with vanilla javascript i had a lot of fun making this project and i'm really excited to share it with you let's get started alright so over here in the code if you look in the description of this video you can get the source files for this i provide the html and the css and then we're going to write all of the javascript so make sure you download that so that you have this this css pokedex that we're going to add the javascript functionality to if you are interested in me making a video on how i made this pokedex definitely leave a comment below and if there's enough people interested in me making this video then i'll make a video on how i made this pokedex out of css okay so we just have all of the divs and we have this input field here and then a couple uh text boxes that will display information about the pokemon all right so if we look at the the pokedex here before we get started i just want to show you what you're going to make so if you type in the number and then either hit this button right here or hit the enter key on your keyboard it will pull up the picture of the pokemon it'll show some information about them and then display what their type 1 and type 2 are so abra is only a psychic pokemon but if we go to say okay that's water fire okay so this one is a grass and a poison type pokemon so it'll display all that information for you and this is using the pokey api to get all of that information about the pokemon and then we're just using the javascript to inject that into these elements in here so let's go ahead and get started with that first we're going to declare all of the variables that we need for this project and these are referencing the html elements in here so first up we're going to do const const search button equals document dot query selector and this is labeled as black button all right and then we'll do a const input field document dot query selector and then i believe this one is called number got number input let me increase the font okay and then the next one is const image screen equals document dot query selector pokemon picture constant name equals document dot get element by id name const height dot get element by id height counts weight document.getelementbyid weight const type 1 equals document dot get element by id type hyphen one ounce type two equals document dot get element by id type hyphen two okay so that is all of the constants that we need for this project if we look at the html here let's pull it down all right so the search button is looking for black button which is right here and it's referring to this black button the number input is this green number input box pokemon picture is this square div the name is this question mark right here the height is here the weight is here and then this is type one and this is type two so now we can declare our first function let's do get pokemon equals the number of the pokemon and we're going to do an arrow function here and we're going to use fetch with an api call and we're using the pokey api which you can look up by going to pokeyapi.co i pulled this up for abra here you just do pokey.co api v2 pokemon and then the pokemon number that we want so we'll take what is put in this field and pass it in right here and then fetch the data that is being returned from it and this returns a whole bunch of information about each different game and the rarity of the pokemon and the height and the weight and the abilities to do the fetch api we're going to do back ticks so that we can pass in the number so we'll do https colon four slash forward slash pokey api dot co slash api v2 pokemon and then dollar sign curly braces num okay and this will take whatever numbers passed in there and pass it in for this value right here so fetch always returns a promise so in order to handle this we have to do dot then which will give us the response which then we have to convert into a json object but that returns a promise itself so then we have to do another dot then to handle the data that is returned from that json object and here is when we can inject the data that we got back from the api call into the pokedex so we'll do image screen see i have a typo image screen dot source src equals another backticks https i'm actually going to copy this in here because it's it's fairly long actually i'll i'll go to the api here and find what we're actually looking for all right and that forms minimize all of these that we don't need not moves we're looking for the sprites so i want this this sprite to show up here so i'm just going to copy this just like that but instead of 63 i want that to be data dot id and then before we continue let's go down to the very bottom and add an event listener to the to this circle button here so let's do search button dot add event listener we'll listen for the click event and then we'll we'll run this function which will invoke get pokemon of num nope we'll do input field.value which will take whatever value we we type in here and then that'll run this api call with that value let's try that one two three so that's working properly let's go ahead and pass in the rest of the information that we want and then we should be done pretty quickly here so let's do name dot inner html okay and it's not happy with me using name up here so i'm going to do name screen okay it seems to like that a little bit better and then do data dot name height inner html equals we're going to do curly braces for this one so we can pass in javascript and also pass in text data.height times 10 and then cm all right weight dot inner html equals we'll do the backticks again so we can do the javascript and the text data.wait divided by 10 and this will be kilograms and then the last are the two types so let's do type 1 enter html equals data.types0.type.name and actually if we go back to the api call let's actually find where what this is actually getting so the whole thing is data and then we're looking for types so let's minimize all of these sprites stats types okay so then we're looking for the first type since it's zero-based indexing which will give us this object and then we're getting the type and then the name inside of that so then it'll return psychic okay we want to do the same thing with type two dot inner html but this time we want this to be one so it'll be the second value in there if there is one and then save let's do 25 pikachu oh okay so the entry key doesn't work yet but we can make that work here really easily we can do input field dot add event listener and we'll listen for the key down and then we'll run this function every time there's a key down so anytime a key is pressed it'll run this event so we're going to pass in an if statement and then if the event dot key is equal to enter and you can you can make this any key that you want so i recommend enter key because that's the most natural thing for anybody using this to hit once they're done typing so if the key equals enter let's have it click the search button so search button dot click let's do 25 enter change it to 63 enter and that's working and if we hit the button it still works properly so one thing we want to add to this just to make sure that all of these values get cleared out and refilled in every time is a reset function and this isn't absolutely necessary but it will help for the performance and to make sure that this is always accurate so let's do const reset fields equals all right and then we'll do name screen dot inner html equals nothing and we're basically going to set all of these equal to nothing like that like that okay and then what we can do is before it fetches the data it'll run the reset fields function and it'll clear out any data that's in there and it'll pull all of the new data in so one two three four five six and this has any pokemon that ever existed not just a specific generation so if we do 150 it's mewtwo he's 200 centimeters tall and 122 kilograms and i think that's about it so once again thank you for joining me today i hope you found this useful if you enjoyed this project please leave a comment below and if you made it yourself please link to your project i'd love to see it if you have any suggestions for future videos for me to make please leave a comment below as well don't forget to like and subscribe and i will see you in the next video [Applause] [Music] [Applause] [Music] [Applause] you

Channel: zachOS Tech

Views: 162

Rating: 5 out of 5

Keywords: javascript tutorial, vanilla javascript, learn javascript, javascript, pokemon, pokedex, pokeapi javascript, pokemon api javascript, javascript tutorials, javascript pokedex, javascript project, css pokedex, pokedex css, pokemon css, javascript pokemon, javascript tutorial for beginners, css pokedex tutorial, pokedex html css, pokedex with css, pokedex html, pokedex javascript, pokemon javascript, pokemon html css, pokedex javascript tutorial, javascript pokedex tutorial

Id: rfsv0i4qXFs

Length: 9min 51sec (591 seconds)

Published: Thu Feb 18 2021