Si alguna vez haz tenido la necesidad de crear una lista, en la que con bastante frecuencia debes agregar contenido, este tutorial es para ti. Generar una lista HTML con JavaScript te ayudara a cumplir con este aspecto de tu lista y de esta manera mejorar la parea en la que incluyes nuevo contenido en tus paginas web.
Para este tutorial, vamos a crear una lista sencilla que permitirá describir los aspectos necesarios para que aprendas a hacer por ti mismo. Sin mas comenzamos.
Agregar código para la lista HTML
Lo primero es agregar la sección que va a contener la lista HTML. Para esto vamos a crear una sección usando la etiqueta section. Dentro agregaremos un titulo y un contenedor div, al cual le agregaremos un id para luego poder acceder a el desde JavaScript. A continuación, agregaremos dentro otro contenedor div con el id=”windox” para usarlo luego en javascript para anexarle la lista.
<section>
<h1 style="text-align: center;">titulo</h1>
<div id="wingrid">
<hr>
<div id="windox"></div>
<hr>
</div>
</section>Incluir estilo para la lista HTML
Para el estilo, vamos primero a incluir el estilo para contener la lista en una columna de tres espacios en PC y una simple en mobile.
<style>
#windgrid{padding-bottom: 15px;}
#windox{display: block;}
@media screen and (min-width:768px) {
#windox{display: grid; grid-template-columns: 50% 50%;}
}
@media screen and (min-width:1200px) {
#windox{display: grid; grid-template-columns: 33.333% 33.333% 33.333%;}
}
....
</style>Luego vamos a incluir el estilo de las tarjetas para presentar los productos de manera sencilla.
<style>
....
.mainbox{position: relative; text-align: center;border: 1px solid lightgrey;margin: 10px 5px;min-height: 300px;border-radius: 15px;}
.phead{position: absolute;top: 0;left: 0;width: 100%;background-color: blueviolet;color: white;border-radius: 15px 15px 0 0;}
.pbody >img, .pbody >video{border-radius: 15px;}
.pfooter{position: absolute;bottom: 0;width: 100%;background-color: blueviolet;color: white;border-radius: 0 0 15px 15px; min-height: 4rem;}
</style>Comenzar a popular la lista HTML con JavaScript
Con el estilo ya creado, vamos a adentrarnos al código que permite hacer y llenar la lista con contenido.
Declarar las variables para la lista
Para comenzar, vamos a declarar las variables que llamaran a los ids que creamos antes en HTML. Ademas, crearemos una variable de arreglo, la cual sera nuestra base de datos para popular la lista. Este arreglo lo podemos incluir en un fichero separado o ponerlo justo antes de código para popular la lista. Mi consejo es que separen el arreglo y luego lo incluyan dentro de la pagina, pues si el contenido se vuelve demasiado grande, seria engorroso navegar por el. Ademas, sera mas fácil de mantener sin necesidad de modificar o tocar por error el código restante.
Para este ejemplo lo hare todo junto para simplificarlo mejor.
<script type="text/javascript">
const wingrid = document.getElementById("wingrid");
const winproduct = [
{nombreP:"Pintura Labial", imageP:"images/product00.jpg", winnerP:"Jose Perez"},
{nombreP:"Producto 01", imageP:"", winnerP:"Juan Perez"},
{nombreP:"Productos de baño", imageP:"images/product02.mp4", winnerP:"Jose Perez"}
];
const windox = document.getElementById("windox");
</script>Como ven arriba, tenemos un arreglo que vamos a usar para generar el contenido de la lista HTML. El arreglo va a tener tanto texto como url para imagenes y links, cada uno asignado a una variable dentro del arreglo.
Usar metodo “forEach” para popular la lista HTML
Con el arreglo ya hecho, vamos a usar el metodo forEach para popular la lista.
...
winproduct.forEach(el =>{
.....
});
</script>Dentro, vamos a declarar las variables para las tarjetas. Para describirlas seria de esta manera: mainbox sera el contenedor div base de la tarjeta que crearemos en javascript, imgBase va a ser la imagen por defecto si no tenemos una imagen que cargar, y imgPro y videoPro sera las variable encargadas de contener los ficheros de imagen y videos.
...
const mainbox = document.createElement("div");
const imgBase = '<img src="images/watercolor.jpg" alt="EL Ganador del ' + el.nombreP + ' es ' + el.winnerP + '" width="100%" />';
const imgPro = '<img src="' + el.imageP + '" alt="EL Ganador del ' + el.nombreP + ' es ' + el.winnerP + '" width="100%" />';
const videoPro = '<video src="'+ el.imageP +'" width="100%" autoplay muted loop width="100%"></video>';
....Luego agregaremos la clase de estilo mainbox asi como el HTML que representara la tarjeta asi como las funciones que agregaran las imagenes mas los textos.
....
mainbox.classList.add('mainbox');
mainbox.innerHTML = '<div class="phead"><h1>Premio ganado '+ el.nombreP +'</h1></div><div class="pbody">'+ mediaP()+'</div><div class="pfooter"><h2>El ganador es '+ el.winnerP +'</h2></div>';
windox.appendChild(mainbox);
.... Creando las funciones restantes
Crearemos ahora la función mediaP(), la cual revisara con una condicion if si existe o no una imagen o media que presentar, para luego retornar el valor requerido. En el caso de no haber imagen se retornara la variable imgBase para presentar una imagen por defecto. En caso de que exista una imagen se retornara otra funcion mediaPVal que vamos a presentar debajo la cual verificara el tipo de media que existe para presentar.
...
function mediaP(){
if(el.imageP === ''){
return imgBase;
}else{
return mediaPVal(el.imageP);
}
}
....
Aqui presentamos la funcion mediaPVal(). la condicion a usar esta funcion es que si el contenido media dentro del arreglo termina enuna extencion de imagen, esta retornara la variable imgPro con el HTML para la imagen. En caso contrario si el contenido termina en una extension de video, entonces se retornara la variable videoPro con el HTML para presentar video.
....
function mediaPVal(url){
if(url.endsWith(".jpg") || url.endsWith(".jpeg") || url.endsWith("gif")){
return imgPro;
}else if(url.endsWith(".mp4")){
return videoPro;
}
}
....El código completo
Y aqui esta el codigo javascript completo.
<script type="text/javascript">
const wingrid = document.getElementById("wingrid");
const winproduct = [
{nombreP:"Pintura Labial", imageP:"images/product00.jpg", winnerP:"Jose Perez"},
{nombreP:"Producto 01", imageP:"", winnerP:"Juan Perez"},
{nombreP:"Pintura Labial", imageP:"images/product02.mp4", winnerP:"Jose Perez"}
];
const windox = document.getElementById("windox");
winproduct.forEach(el =>{
const mainbox = document.createElement("div");
const imgBase = '<img src="images/watercolor.jpg" alt="EL Ganador del ' + el.nombreP + ' es ' + el.winnerP + '" width="100%" />';
const imgPro = '<img src="' + el.imageP + '" alt="EL Ganador del ' + el.nombreP + ' es ' + el.winnerP + '" width="100%" />';
const videoPro = '<video src="'+ el.imageP +'" width="100%" autoplay muted loop width="100%"></video>';
mainbox.classList.add('mainbox');
mainbox.innerHTML = '<div class="phead"><h1>Premio ganado '+ el.nombreP +'</h1></div><div class="pbody">'+ mediaP()+'</div><div class="pfooter"><h2>El ganador es '+ el.winnerP +'</h2></div>';
windox.appendChild(mainbox);
function mediaP(){
if(el.imageP === ''){
return imgBase;
}else{
return mediaPVal(el.imageP);
}
}
function mediaPVal(url){
if(url.endsWith(".jpg") || url.endsWith(".jpeg") || url.endsWith("gif")){
return imgPro;
}else if(url.endsWith(".mp4")){
return videoPro;
}
}
});
</script>Resultado
Aqui esta el resultados de generar una lista HTML con JavaScript
