I have a javascript code that accesses firebase to obtain information and then inserts html code with said information. All this does but not as expected. For example, images are used but instead of putting them with a specific size, it puts them at the maximum size, occupying the entire screen. Another thing would be the letters that instead of being written in white are put in a gray color. And of course everything is disorganized.
I was wondering if it was something I hadn't accounted for, or just something I'm doing wrong, so here's the code:
.
.
.
<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>
I also have as it should be the tags in html, but with the data locally (this way everything works fine).
<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>
In the css file I have:
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;
}
following your example:
If we execute and go to the inspection of the elements to see how the html is being created (F12, then position the mouse on the image and with the right mouse button select "inspect element") we will see that the resulting code is:
If you notice it is not being created as you define in the code, that at least in this line you indicate that the layer opening is created:
But the layer with closure is created as well:
What happens then? The answer is that the insertAdjacentHTML() function "parses the text string entered as an HTML or XML string and inserts the nodes resulting from said parsing into the DOM tree at the specified position". insertAdjacentHTML Doc , in other words the function will determine based on the string passed by parameter which element should be added to the DOM, therefore it sees that you want to add a div and generates said NODE, when generating it it does so in a valid way, that is no errors and that means the tag has a start and an end.
What you have to do in this specific case is to have a variable that contains all the text of the html and then insert it.
For the rest, you have an extra detail with the image since it does not take the size of its container by default, so you have to indicate it, we do that by placing the witdh attribute of the image in the css at 100%, from that way it will occupy 100% of the element in which it is contained.
If card is 10em wide then the image will be 10 wide and so on with the other sizes. Also notice that since we have a main element called card we can take it in the css as the parent of the others and manipulate the others based on it, that is why I put .card img instead of creating a class specifically for the image with card-img-top.
I leave you a game that helps you understand css selectors, it's very good: Css Dinner