Fracasar en Blogger intentando ganar dinero: lo que aprendí después de años escribiendo

Bienvenid@ a Programación para Todos, un espacio para aprender a programar desde cero con ejemplos sencillos en PHP, HTML, JavaScript, Python, C++, SQL, y más. Aquí encontrarás historia, conceptos clave y aplicaciones reales. Porque la programación no es solo para expertos: en todo proyecto de software se necesita un equipo que entienda, colabore y construya en conjunto
En esta publicación, vamos a aprender a utilizar la Dragon Ball API para obtener información sobre tus personajes favoritos de la serie. Usaremos un ejemplo en JavaScript y fetch que permite al usuario seleccionar un personaje de Dragon Ball desde un combobox y mostrar los detalles en tiempo real.
La API de Dragon Ball ofrece información sobre personajes y planetas.
La Dragon Ball API es un servicio gratuito que proporciona datos sobre la serie, incluyendo personajes, episodios, ataques y más. Puedes encontrar la documentación completa de la API aquí.
En este ejemplo, usaremos la sección de personajes, donde podrás buscar y mostrar información como el nombre, el poder y la raza de los personajes.
Comenzamos con la estructura HTML básica que tendrá un combobox para seleccionar un personaje y un área para mostrar la información.
<select>
) donde el usuario seleccionará un personaje.<div id="personaje-info">
) donde se mostrará la información del personaje seleccionado.obtenerPersonajeInfo(personaje)
function obtenerPersonajeInfo(personaje) {
try {
const url = `https://dragonball-api.com/api/characters?name=${personaje.toLowerCase()}`;
const respuesta = await fetch(url);
const datos = await respuesta.json();
.toLowerCase()
para evitar errores).fetch(url)
para obtener los datos desde la API.await respuesta.json()
.mostrarInformacionPersonaje(info)
Cuando la API devuelve la información, se muestra en el div
correspondiente
function mostrarInformacionPersonaje(info) {
const infoDiv = document.getElementById('personaje-info');
const imagen = info.image || info.image_url || 'https://via.placeholder.com/300';
infoDiv.innerHTML = `
<h2>${info.name}</h2>
<p><strong>Raza:</strong> ${info.race || 'Desconocida'}</p>
<p><strong>Poder:</strong> ${info.power || 'Desconocido'}</p>
<p><strong>Descripción:</strong> ${info.description || 'No disponible'}</p>
<img src="${imagen}" alt="${info.name}" style="width:300px;height:auto;" />
`;
}
Una vez que hayas copiado y pegado el código puede ser en un bloc de notas y lo guardas con extensión HTML, abre el archivo HTML en tu navegador. Verás un combobox con una lista de personajes. Al seleccionar uno, se mostrará la información detallada sobre él, te comparto como se ve mi página
https://www.programacionparatodos.com/p/pagina-ejemplo-para-llamar-api-de.html
Te dejo el código aquí
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Ball - Selecciona un Personaje</title>
</head>
<body>
<h1>Selecciona tu Personaje de Dragon Ball</h1>
<select id="personaje-select">
<option value="">Selecciona un personaje...</option>
<option value="Goku">Goku</option>
<option value="Vegeta">Vegeta</option>
<option value="Piccolo">Piccolo</option>
<option value="Bulma">Bulma</option>
<option value="Freezer">Freezer</option>
<option value="Gohan">Gohan</option>
<option value="Gotenks">Gotenks</option>
<option value="Trunks">Trunks</option>
</select>
<div id="personaje-info">
<!-- Información del personaje se mostrará aquí -->
</div>
<script>
// Función para llamar a la API y obtener la información del personaje seleccionado
async function obtenerPersonajeInfo(personaje) {
try {
// URL de la API de Dragon Ball con el parámetro de nombre
const url = `https://dragonball-api.com/api/characters?name=${personaje.toLowerCase()}`;
const respuesta = await fetch(url);
const datos = await respuesta.json();
// Comprobamos si hay datos disponibles para el personaje
if (datos && datos[0]) {
const info = datos[0];
mostrarInformacionPersonaje(info);
} else {
mostrarError('Personaje no encontrado o datos no disponibles.');
}
} catch (error) {
console.error('Error al obtener datos de la API:', error);
mostrarError('Hubo un error al cargar la información.');
}
}
// Función para mostrar la información del personaje
function mostrarInformacionPersonaje(info) {
const infoDiv = document.getElementById('personaje-info');
// Verificar si la URL de la imagen existe, si no mostrar una imagen predeterminada
const imagen = info.image || info.image_url || 'https://blogger.googleusercontent.com/.powerpoint.jpg'; // Imagen por defecto en caso de error
infoDiv.innerHTML = `
<h2>${info.name}</h2>
<p><strong>Raza:</strong> ${info.race || 'Desconocida'}</p>
<p><strong>Poder:</strong> ${info.power || 'Desconocido'}</p>
<p><strong>Descripción:</strong> ${info.description || 'No disponible'}</p>
<img src="${imagen}" alt="${info.name}" style="width:300px;height:auto;" />
`;
}
// Función para mostrar un mensaje de error
function mostrarError(mensaje) {
const infoDiv = document.getElementById('personaje-info');
infoDiv.innerHTML = `<p style="color:red;">${mensaje}</p>`;
}
// Escuchar cambios en el combobox
document.getElementById('personaje-select').addEventListener('change', (event) => {
const personajeSeleccionado = event.target.value;
if (personajeSeleccionado) {
obtenerPersonajeInfo(personajeSeleccionado);
} else {
document.getElementById('personaje-info').innerHTML = ''; // Limpiar la sección si no se selecciona nada
}
});
</script>
</body>
</html>
Con este sencillo ejemplo, puedes empezar a trabajar con la Dragon Ball API y crear aplicaciones interactivas basadas en la famosa serie.
Recuerda que la API de Dragon Ball es un recurso divertido para explorar si eres fan de la serie, y esta integración en JavaScript es solo una de las muchas formas de interactuar con ella.
Puedes ajustar el ejemplo a tus necesidades, en lugar de filtrar por Personaje, puedes filtrar por raza
Comentarios
Publicar un comentario
Dejanos tus dudas y comentarios