Build a Pokédex REPLICA with Vanilla JavaScript and the PokéAPI (Pokémon API)
HTML-код
- Опубликовано: 10 сен 2024
- Let's build a fully functioning, beautiful Pokémon Pokédex using only HTML, CSS, and JavaScript! This beginner-friendly tutorial will guide you through the whole process of using the PokeAPI to fetch data for our application.
🗄 Resources:
PokéAPI: pokeapi.co/
index.html starting code: gist.github.co...
style.css starting code: gist.github.co...
Finished Repo: github.com/ang...
🔑 Key Concepts:
- DOM Manipulation
- fetch() function
- asynchronous JavaScript
- API
- Event Handlers
#JS #Pokemon #PokeAPI
I am amazed by your teaching ability. I just finished a javascript bootcamp course and you are building on top of the knowledge that the authors have. If you have private lessons or online courses, I would definitely be interested!
Fantastic video! I really loved the way you broke down fetch and .then at the beginning, it clarified things in a way I hadn't understood before. Thank you so much for the video
Omfg Thx bro this has also helped me with understanding API!
This video is amazing from beginning to end. Thank you.
Wasn't exactly what i was looking for (trying to do something similar with ajax/jquery) but i was verry impressed with your explanations so I'v ended looking at the full video. Thanks for sharing your experience with us and hope that more ppl will join your channel.
This is great! Really helped me get the hang of some vanilla JS and using APIs, thanks!
Great video, everything used was well explained!
Super informative tutorial! After following along with the JS I'm scratching my head at how you blueprinted the entire graphic with nested divs. Is your process usually similar for apps like this? Would love a video walking through the design side of things.
I am learning a lot from your videos, please upload some more projects if possible, thank you for sharing your knowledge and time.
Awesome video, helped me get back into basic coding after a long break. One tweak i made was setting the Types. Whenever there was 2 types, the secondary one was always in the 0 array position which was annoying. Example - Charizard is primary Fire, secondary Flying. This was my solution - i'm sure there is a more elegant way.
if(dataTypes[1]) {
const dataFirstType = dataTypes[1];
const dataSecondType = dataTypes[0];
pokeTypeTwo.classList.remove('hide');
pokeTypeOne.textContent = capitalize(dataFirstType['type']['name']);
pokeTypeTwo.textContent = capitalize(dataSecondType['type']['name']);
mainScreen.classList.add(dataFirstType['type']['name'])
}
else {
const dataFirstType = dataTypes[0];
pokeTypeOne.textContent = dataFirstType['type']['name'];
pokeTypeTwo.classList.add('hide');
pokeTypeTwo.textContent = "";
mainScreen.classList.add(dataFirstType['type']['name'])
}
amazing! Yes I also found it very annoying that it was in the second position: seeing Bulbasaur as poison annoyed me haha. Glad you found a fix
This was a very nice video, I really understate almost all even being a noob en JS. thank you!
37:37
Instead of writing all the types, I wrote my resetScreen function this way:
const resetScreen = () => {
mainScreen.classList.remove('hide');
const classListLength = mainScreen.classList.length;
for (let i = 0; i < classListLength; i++) {
mainScreen.classList.remove(mainScreen.classList[0]);
}
mainScreen.classList.add("main-screen");
};
Thank you I appreciate the hard work. I learned a lot. Everything is well explained.
🙏Thankyou for this amazing tutorial, very clear explanations!
thankyou dude, thanks for the explanations too.
Hi! I absolutly love this pokedex! You are incredibly talented! is there any way you can do a tutorial on how you created the html and css?
Great video with fun content :) Thank u
Hi sorry to bother you i am completely new to this coding word i am just trying to incorporate an input button inside right screen on the top and while I type i want to fetch related Pokemon data like a search bar works in many websites
Could you please help me out to do that or give a little hint maybe?
I would really appreciate it
It just says "weight" for weight and height for height, any recommended fixes? everything else is mostly the same though. The only difference aside from the fore mentioned is that the type shows grass instead of poison
string template literal afterwards
Would be great to style CSS for mobile view as well! :)
Do you finish building html and css first before getting to programming in general?
김경현 Frank for these smaller projects, I typically build the HTML+CSS first before tackling JS. But while I’m building up the JS, I may encounter issues or reasons to modify the HTML/CSS
@@AngleCoding Thank you. I am enjoying this project and learned so much already. Still need to finish the right screen though.
김경현 Frank good luck!
Greatly explained! Enjoyed your video. Just curious - any reason behind using const instead of let?
I, as a general rule of thumb, use ‘const’ whenever possible, and only use ‘let’ when I have to. On a small-scale project like this one, it really doesn’t matter, but when working on a big-scale project, especially with several developers, it is safer to use const for values that shouldn’t be changed. And if your projects has a linter in place, such as ESLint, the standards rules it places is to only use ‘let’ when you need to.
So moral of the story: use const always, and only when you need to, use ‘let’ 😊
hi Justin, im trying to display pokemon moves using a for loop but i keep getting an error. I would like to show only a few moves as some of the pokemon have a lot. preferably i would like to use a forloop to go through the indexes. any idea?? here is my code.
let onlyMoves = pokemonData['moves'];
let newOnlyMoves = onlyMoves.slice(0,4);
for( let i= 0; i