Hola, tratando de crecer con JavaScript

  • Autor Autor ultracobra
  • Fecha de inicio Fecha de inicio
ultracobra

ultracobra

Ni
Verificado por Whatsapp
Estoy haciendo pinitos iniciales con JS y con React para empezar.

Quiero mostrar un miniscript con un apirest y luego se me vino la idea de poner en el mismo pantallazo, tres apirest diferentes, incluso de servicios diferentes pero, no me ha funcionado y quiero saber si es porque las apirest funcionan de uno a uno, o es por otra cosas...


Sin título.webp
 
si pegas tu código o pones una captura de pantalla de la consola de desarrolladores, seria mas fácil ayudarle.
 
Se alarga un poquito...

Pongo gatitos.html + gatitos.css + gatitos.js

Es lo mismo con las variaciones para

patitos.html + patitos.css + patitos.js

y para

perritos.hrml + perritos.css + perritos.js

Lo que me parece es un conflicto por lanzar tres apirest en la misma vista, es eso @m16u31

---index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mascotitas aleatorias</title>
</head>
<body>
<header>
<h1>Mascotitas aleatorias</h1>
<h2>Todos los gatos 😺 patos 🦆 perros 🐶 aleatorios que quieras!</h2>
<p>Los patos son mascota (a veces) y por eso los pusimos aquí.</p>
</header>
<nav>
<ul>
<li><a href="../gatitos.html">Gatitos</a></li>
<li><a href="../perritos.html">Perritos</a></li>
<li><a href="../patitos.html">Patitos</a></li>
</ul>
</nav>
</body>
</html>
---
---gatitos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gatitos Aleatorios</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<h1>Gatitos aleatorios</h1>
</header>
<div class="container">
<img id="img-cat" alt="Gatitos aleatorios">
<button type="button" id="btn-button">Dame otro gatito</button>
</div>
<script src="./main.js"></script>
</body>
</html>
---
---gatitos.js
const URL = 'https://api.thecatapi.com/v1/images/search'


//mostrar una imagen con boton

async function mycat (){
const res = await fetch(URL);
const data = await res.json();
const img =
document.getElementById('img-cat');
img.src = data[0].url;
}
const myButton = document.getElementById('btn-button')
myButton.onclick = mycat;
---
---gatitos.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
display: flex;
justify-content: center;
}
h1{
font-size: 4rem;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
place-items: center;
padding: 20px;
}
img {
width: auto;
height: 500px;
border-radius: 30px;
}
button{
width: 100%;
min-width: 300px;
padding: 10px;
margin-top: 40px;
font-size: 16px;
border-radius: 15px;
background: #66BB6A;
cursor: pointer;
transition:all;
border: 5px solid #187a1d ;
}
button:hover{
border: 5px solid rgb(228, 164, 94);
background-color: rgb(227, 141, 67);

}
@Media screen and (min-width: 1024px) {
button{
width: 20%;
}

}
---
 
No entiendo bien el problema.

¿Podrias explicarlo un poco mejor?
 
Era más bien una pregunta conceptual. Como dije estoy iniciando en react y lancé una apirest de gatitos a un home como se ve al inicio,

Lo que quise fue poner tres vistazos de tres apirest diferentes en la misma misma vista como lo muestra la imagen, pero los codigos son similares contando las modificaciones a las fuentes.

Pero como el tema no da para mucho si no se entiende mejor dejar así que por lo que se ve, la lógica de react no es como cuando hacías paginas en html...
 
Era más bien una pregunta conceptual. Como dije estoy iniciando en react y lancé una apirest de gatitos a un home como se ve al inicio,

Lo que quise fue poner tres vistazos de tres apirest diferentes en la misma misma vista como lo muestra la imagen, pero los codigos son similares contando las modificaciones a las fuentes.

Pero como el tema no da para mucho si no se entiende mejor dejar así que por lo que se ve, la lógica de react no es como cuando hacías paginas en html...
Ponlo en un componente, como input el url de la api rest de animales y asi solo llamas al componente 3 veces una para gatos, otra para perros y otra para patos.
 
Ponlo en un componente, como input el url de la api rest de animales y asi solo llamas al componente 3 veces una para gatos, otra para perros y otra para patos.
Gracias por la sugerencia, aún me cuesta interpretarlo. Si conoces de trozos de código para hacer mejores apiREST aquí estamos...
 
Atrás
Arriba