Pokédex con la POKÉAPI en HTML, CSS y JS

Подписаться 14 тыс.

Просмотров 17 тыс.

50% 1

Bienvenidos a este nuevo video! 👨🏽‍💻
Estaré armando una Pokédex usando la POKÉAPI, armando toda la estructura HTML, el estilizado en CSS y algunas funciones para hacer un fetch de la API de Pokémon y mostrar información en línea, usando map, forEach y muchos métodos más! 😱
🔗 Links
✅ Repositorio: github.com/carpicoder/pokedex
✅ Resultado final: carpicoder.github.io/pokedex/...
✅ PokéAPI: pokeapi.co
Redes
📷 / carpicoder
🐦 / carpicoder
🚀 / discord
👨🏽‍💻 github.com/carpicoder
💼 / matiascoletta
Donaciones
🤙 carpicoder.com/donaciones
Contacto
✉️ hola@carpicoder.com
🌐 carpicoder.com
⌚ Capítulos
0:00 Introducción
1:18 Viendo con qué arrancamos
4:48 Escribiendo el HTML
10:04 Escribiendo el CSS
32:53 Escribiendo el JS
1:00:00 Conclusión

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@Deus-lo-Vuilt Год назад

Gracias Carpi , me alegras el dia maestro!

@carpicoder Год назад

Sus comentarios también me alegran los días, je. Muchas gracias!

@josxfer 10 месяцев назад

Me gustó mucho el proyecto, muy practico y bien explicado. Eres un gran maestro. PSDT. Por si le sirve el dato a alguien: En la Pokeapi el peso de los pokemon está expresado en hectogramos (hg) y la altura en decímetros (dm) por lo que es necesario hacer una operación simple para pasarlos a centímetros (o metros) y kilogramos. Por ejemplo, Bulbasaur no mide 7 metros ni pesa 69 kg, en realidad mide 70cm y pesa 6.9Kg.

@carpicoder 10 месяцев назад

Grandes datos tiraste jajajaj gracias por el comentario! ❤🙌

@andresapablaza6237 Год назад

literalmente una joya entre tanto tutorial en yt, agradecido del contenido

@juan97cs Год назад

Necesitaba alguien que explique tan bien, y me oriente a aplicar loo aprendido!!! gracias Crack!!!

@jesusdld4652 11 месяцев назад

Que crack. Muy buen video amigo

@user-fc1wc2ww4t 9 месяцев назад

Es súper genial la forma como enseñas y la facilidad que tienes para crear el código 👌🎉

@user-bn6eo7pi8d Год назад

Gracias Carpi por el tiempo que dedicas en hacer estos vídeos para enseñarnos!😊

@geovanny2633 8 месяцев назад

Muchas gracias profe por la enseñanza

@PabloDesarrolloWeb 6 месяцев назад

Muchas gracias! soy alumno de Coder y me re ayudan mucho tus videos para reforzar y ampliar lo aprendido!!!

@martinolivera4246 Год назад

Gracias Carpi por esta clase de videos! muy buenas las explicaciones. Excelente aplicacion de lo aprendido en el ultimo video del curso de JS!

@carpicoder Год назад

Gracias Martín por el comentario! Me alegra mucho que les sirvan los videítos :)

@mr.fabian8471 Год назад

Gracias master!

@juanpablolopezramirez2830 Год назад

Me encanto mucho el video, muy concreto, muy fácil de entender todo, sin complicarse mucho la vida, muchas gracias por el video :)

@carpicoder Год назад

Muchas gracias por el comentario Juan Pablo! 💖

@pablomartinvicente5968 Год назад

Excelente carpi, me encanta la manera que tenes para explicar!

@carpicoder Год назад

Muchas gracias Pablito! Me alegra mucho que les sirvan los videítos y mi forma de explicar

@estudiosuq8164 11 месяцев назад

Me ayudaste a entender mejor las API's, sos grande maestro

@carpicoder 11 месяцев назад

❤❤❤❤

@jhosellgarcia5439 9 месяцев назад

Muchas gracias por el tuto!! El problema de recarga creo que se podría solucionar agregando un spinner para simular la carga y darle tiempo para que no de fallas. Saludos crack!

@44valennn Год назад

Tu canal merece crecer, ojala crezcas 🙌🙏

@carpicoder Год назад

Muchas gracias Ángel! ✨💪

@baldunets 10 месяцев назад

Hola Carpi, muchas gracias por este gran tutorial sos un genio!!, tengo una consulta en mi navegador cuando pongo el link que te da la api para ver el json me aparece un archivo gigante a diferencia del tuyo, hay alguna manera de configurarlo para que lo habrá asi como a vos?

@puntojson Год назад

Recién te encuentro y veo que hicimos el mismo video! Debo decir que aunque tomamos un enfoque disinto, me gusta más el tuyo! xD Seguí así!

@carpicoder Год назад

Ajaja bueno la tuya está en Angular, más avanzada 😅 Nuevo sub en tu canal, gracias por pasarte y comentar! 👌🏼

@UsuarioDR Год назад

Justo cuando vi el repaso de la 15 pensé que sería copado hacer algo así jaja

@carpicoder Год назад

Hay muchas cosas que se pueden hacer con la PokéAPI, más adelante haré otra cosa

@DanielSanchez-cw6ff Год назад

Bruen video bro pero tengo una consulta, existe una forma de migrar un proyecto hecho en html,css y javascript a angular?

@mianimefavorito7924 Год назад

Buenas carpi subes excelente contenido, Me gustaria que crees videos haciendo pequeños juegos en javascript

@carpicoder Год назад

Gracias por el comentario! Hace poquito subí un video armando un piedra-papel-tijera: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QZ6iJG1mQFM.html Pronto estaré armando un ta-te-ti y si se te ocurre alguno copado mandame que siempre vienen bien las sugerencias!

@miguelrios4571 Год назад

hola, muchas gracias por el video esta genialísimo, solo que tengo un problema que no puedo resolver y es que JS no reconoce los backticks ni el código html ya intente varias cosas pero estoy atorado. También quise cambiar la extensión .js o .jsx y nada!!!.

@jefersonrodriguez1802 9 месяцев назад

como es que al mirar el JSON te aparece dinámico el menú de las variables y no en texto plano. 🤔

@adrixnperez Год назад

Hola, he aprendido a hacer esta web con tu tutorial y me ha servido mucho, hay una cosa que me molestaba y era que no cargase todo en orden y lo he solucionado con esto: La funcion para mostrar el pokemon lo he hecho con un promise.all() function returnPokemons() { const requests = []; for (let i = 1; i response.json())); } Promise.all(requests).then((data) => { data.forEach(pokemon => mostrarPokemon(pokemon)); }); }

@carpicoder Год назад

Genial esta resolución, gracias por compartir! 🙌❤

@adrixnperez Год назад

@@carpicoder a ti por tu trabajo!!

@catadies Год назад

@Adrián Pérez González no se entiende, donde cambiaste todo el código no se donde se pone ese Promise.all, ademas no existe request en el codigo original y no trabaja con foreach. Si no tengo todo tu codigo no sabre que hacer :/