pochitax/filter.html

## filter.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <style>
        .card img {
            object-fit: contain;
            max-height: 250px;
        }
        img {
            width: 100%;
            height: 200px;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <header class="p-4 text-center">
        <h1>Ejemplo de Async/Await con personajes con .filter()</h1>
    </header>
    <main class="container">
        <h2>Dragon Ball Z</h2>
        <p>Generamos un filtro de personajes que sólo muestra una raza.</p>
        <div class="row" id="personajes">

        </div>
    </main>
    <script>
        const personajes = 'https://dragonball-api.com/api/characters';

        async function obtenerPersonajes() {
            try {
                const respuesta = await fetch(personajes);

                if (!respuesta.ok) {
                    throw new Error("Error en la solicitud");
                }

                const data = await respuesta.json();
                console.log(data.items); // listado completo

                // Filtrar por raza "Saiyan"
                const filtrados = data.items.filter(p => p.race === "Human");

                // recorrer solo los filtrados
                for (let i = 0; i < filtrados.length; i++) {
                    console.log(filtrados[i].name, filtrados[i].race);

                    let columna = document.createElement('div');
                    columna.classList.add('col-md-3');

                    columna.innerHTML = `
                        <div class="border p-4">
                            <img src="${filtrados[i].image}" class="w-100 mb-4">
                            <h3>${filtrados[i].name}</h3>
                            <p class="mb-0">Raza: <span class="text-primary">${filtrados[i].race}</span></p>
                        </div>
                    `;

                    document.getElementById('personajes').appendChild(columna);
                }

            } catch (error) {
                console.error("Hubo un problema:", error);
            }
        }

        // Ejecutar la función
        obtenerPersonajes();

    </script>
</body>
</html>

## foreach.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <style>
        .card img {
            object-fit: contain;
            max-height: 250px;
        }
        img {
            width: 100%;
            height: 200px;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <header class="p-4 text-center">
        <h1>Ejemplo de Async/Await con personajes con .forEach()</h1>
    </header>
    <main class="container">
        <h2>Dragon Ball Z</h2>
        <p>Generamos un filtro de personajes que sólo muestra una raza.</p>
        <div class="row" id="personajes">

        </div>
    </main>
    <script>
        const personajes = 'https://dragonball-api.com/api/characters';

        async function obtenerPersonajes() {
            try {
                const respuesta = await fetch(personajes);

                if (!respuesta.ok) {
                    throw new Error("Error en la solicitud");
                }

                const data = await respuesta.json();

                // recorrer con forEach y aplicar condición dentro
                data.items.forEach(p => {
                     // solo muestra Saiyans

                    if ((p.race === "Saiyan") || (p.race === "Human")) {
                        console.log(p.name, p.race);

                        let columna = document.createElement('div');
                        columna.classList.add('col-md-3');

                        columna.innerHTML = `
                            <div class="border p-4">
                                <img src="${p.image}" class="w-100 mb-4">
                                <h3>${p.name}</h3>
                                <p class="mb-0">Raza: <span class="text-primary">${p.race}</span></p>
                            </div>
                        `;

                        document.getElementById('personajes').appendChild(columna);
                    }
                });

            } catch (error) {
                console.error("Hubo un problema:", error);
            }
        }

        obtenerPersonajes();


    </script>
</body>
</html>

## select.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <style>
        .card img {
            object-fit: contain;
            max-height: 250px;
        }
        img {
            width: 100%;
            height: 200px;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <header class="p-4 text-center">
        <h1>Ejemplo de select de personajes con .forEach()</h1>
    </header>
    <main class="container">
        <h2>Dragon Ball Z</h2>
        <p>Generamos un filtro de personajes que sólo muestra una raza.</p>
        <!-- Select de razas -->
        <div class="mb-4">
            <label for="filtroRaza" class="form-label">Filtrar por raza:</label>
            <select id="filtroRaza" class="form-select w-50">
                <option value="all">Todas</option>
                <option value="Saiyan">Saiyan</option>
                <option value="Namekian">Namekian</option>
                <option value="Human">Human</option>
                <option value="Android">Android</option>
                <option value="Majin">Majin</option>
                <option value="Frieza Race">Frieza Race</option>
                <!-- puedes agregar más opciones según lo que devuelva la API -->
            </select>
        </div>
        <div class="row" id="personajes">

        </div>
    </main>
    <script>
        const personajesURL = 'https://dragonball-api.com/api/characters';

        let personajesData = [];

        async function obtenerPersonajes() {
            try {
                const respuesta = await fetch(personajesURL);

                if (!respuesta.ok) {
                    throw new Error("Error en la solicitud");
                }

                const data = await respuesta.json();
                personajesData = data.items; // guardamos para reutilizar

                mostrarPersonajes("all"); // mostrar todos al inicio

            } catch (error) {
                console.error("Hubo un problema:", error);
            }
        }

        function mostrarPersonajes(raza) {
            const contenedor = document.getElementById('personajes');
            contenedor.innerHTML = ""; // limpiar antes de pintar

            personajesData.forEach(p => {
                if (raza === "all" || p.race === raza) {
                    let columna = document.createElement('div');
                    columna.classList.add('col-md-3');

                    columna.innerHTML = `
                        <div class="border p-4 mb-4">
                            <img src="${p.image}" class="w-100 mb-2">
                            <h5>${p.name}</h5>
                            <p><strong>Raza:</strong> ${p.race}</p>
                        </div>
                    `;

                    contenedor.appendChild(columna);
                }
            });
        }

        // Evento para el select
        document.getElementById('filtroRaza').addEventListener('change', (e) => {
            mostrarPersonajes(e.target.value);
        });

        // Ejecutar la función inicial
        obtenerPersonajes();


    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
	<style>
	.card img {
	object-fit: contain;
	max-height: 250px;
	}
	img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	}
	</style>
	</head>
	<body>
	<header class="p-4 text-center">
	<h1>Ejemplo de Async/Await con personajes con .filter()</h1>
	</header>
	<main class="container">
	<h2>Dragon Ball Z</h2>
	<p>Generamos un filtro de personajes que sólo muestra una raza.</p>
	<div class="row" id="personajes">

	</div>
	</main>
	<script>
	const personajes = 'https://dragonball-api.com/api/characters';

	async function obtenerPersonajes() {
	try {
	const respuesta = await fetch(personajes);

	if (!respuesta.ok) {
	throw new Error("Error en la solicitud");
	}

	const data = await respuesta.json();
	console.log(data.items); // listado completo

	// Filtrar por raza "Saiyan"
	const filtrados = data.items.filter(p => p.race === "Human");

	// recorrer solo los filtrados
	for (let i = 0; i < filtrados.length; i++) {
	console.log(filtrados[i].name, filtrados[i].race);

	let columna = document.createElement('div');
	columna.classList.add('col-md-3');

	columna.innerHTML = `
	<div class="border p-4">
	<img src="${filtrados[i].image}" class="w-100 mb-4">
	<h3>${filtrados[i].name}</h3>
	<p class="mb-0">Raza: <span class="text-primary">${filtrados[i].race}</span></p>
	</div>
	`;

	document.getElementById('personajes').appendChild(columna);
	}

	} catch (error) {
	console.error("Hubo un problema:", error);
	}
	}

	// Ejecutar la función
	obtenerPersonajes();

	</script>
	</body>
	</html>
No results found