tengo un codigo en javascript que accede a firebase para obtener informacion y luego inserta codigo html con dicha informacion. Todo esto lo hace pero no como se espera. Por ejemplo, se usa imagenes pero en vez de ponerlas con un tamaño especifico, lo pone al maximo tamaño, ocupando toda la pantalla. Otra cosa seria las letas que en vez de estar escritas en color blanco se ponen en un color gris. Y claro todo desorganizado.
Me preguntaba si era algo que no he tenido en cuenta, o simplemente algo que estoy haciendo mal, asi que pongo aca el codigo:
.
.
.
<div class="container-fluid">
<div class="card-group" id="ejemplo">
<script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
.
.
.
.
};
firebase.initializeApp(config);
var database = firebase.database();
var numerojaja=-1;
var aaaa= firebase.database().ref("/peliculas/"); // hacemos una referencia al nodo de peliculas
aaaa.once("value",function(snapshot){ // accedemos a la base de datos
var vector=[]; // creamos un vector
snapshot.forEach(function(child){ // por cada hijo de "peliculas"
vector.push(child.key); // pusheamos dicho hijo, ya que esta en orden ascendente
});
// window.alert("hola");
var ejemplo = document.getElementById("ejemplo"); // una vez terminado la obtencion de los indices de los hijos de "peliculas"
for(var i = vector.length-1; i>=0;i--){ // hacemos un bucle para acceder al vector en orden inverso
aaaa.child(vector[i]).once('value').then(function(snapshot){ // accedemos al hijo que tiene el identificador de la ultima posicion del vector
ejemplo.insertAdjacentHTML("beforeend",'<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card">');
ejemplo.insertAdjacentHTML("beforeend",'<img class="card-img-top" src="'+snapshot.val().cartelera+'" alt="Card image cap" >');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card-body">');
ejemplo.insertAdjacentHTML("beforeend",'<p class="card-title"> '+snapshot.val().nombre+'</p>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="descripcion">'+snapshot.val().descripcion+'</i>');
ejemplo.insertAdjacentHTML("beforeend",'<br>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="cocos">'+snapshot.val().reputacion+' cocos sobre 5</i>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
});
}
});
</script>
Tengo tambien como deberia de estar las etiquetas en html, pero con los datos de forma local (de esta forma si funciona todo bien).
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card">
<img class="card-img-top" src="imagenes/ep1.jpg" alt="Card image cap" >
<div class="card-body">
<p class="card-title"> Star Wars Episodio 1, la amenaza fantasma</p>
<i class="descripcion">Dual of fates.</i>
<br>
<i class="cocos">3 cocos sobre 5</i>
</div>
</div>
</div>
En el archivo css tengo :
body {
background-color: #0F171E;
min-height: 100%;
min-width: 800px;
/* Escalamiento proporcional */
width: 100%;
height: auto;
}
.navbar{
background-color:rgba(000, 000, 000, 0.4);
color:white;
}
.cocos{
font-size:10px;
}
.descripcion{
font-size:20px;
}
.card-title{
font-size:25px;
}
.card{
background-color:rgba(255, 255, 255, 0.0);
width: 18rem;
color:white;
font-family:trebuchet-ms;
}