A partir de este momento, es fundamental que trabajes en cada hito utilizando una rama individual para facilitar la claridad, coherencia y colaboración. El objetivo de este hito es lograr la visualización de los elementos de tu conjunto de datos con todos los estilos.
Important
Para visualizar los datos, es crucial que repases los conceptos de parámetros y argumentos de una función, ya que los utilizarás extensivamente.
En el archivo src/main.js, observarás que las primeras líneas
están ocupadas por las importaciones de la data y de renderItems.
En este archivo, llama a renderItems para enviar la data como argumento.
import { example } from './dataFunctions.js';
import { renderItems } from './view.js';
import data from './data/dataset.js';
console.log(example, renderItems(data), data);
// Invocación de renderItems
renderItems(data)Ahora en el archivo src/view.js, existe la función renderItems,
la cual tiene la responsabilidad de:
- Recibir el parámetro data, que representa todo el conjunto de datos.
- Crear un elemento
<ul>utilizando el método createElement. - Recorrer la data mediante un bucle o algún método de array como forEach o map
- Por cada elemento de la data, crear un elemento
<li>. - Agregar cada
<li>al<ul>utilizando innerHTML , appendChild u otro método apropiado. - Finalmente, retornar el elemento
<ul>.
Hasta este punto, aún no se visualiza la data, pero puedes utilizar
console.log en todo momento. Por ejemplo, dentro del bucle o método que
elijas, para verificar la iteración.
Para concluir esta fase, debes seleccionar el elemento HTML mediante un selector del DOM. Posteriormente, indica dónde se debe colocar el resultado de la invocación de renderItems, recurriendo nuevamente a innerHTML o appendChild
Note
appendChild(): Este método agrega un elemento hijo al final de un elemento padre. innerHTML: Esta propiedad asigna el contenido de un elemento HTML a otro elemento.
Para crear una cuadrícula adaptable a diferentes dispositivos
con Flexbox, utiliza la propiedad flex y ten en cuenta el uso
de wrap para manejar múltiples filas o columnas.
Recursos utiles:
Verifica qué está sucediendo con los tests; este es un buen momento para ejecutarlos y ajustar las partes del código que sean necesarias. Aunque es posible que varios tests aún no pasen, es fundamental abordar cualquier problema identificado para garantizar la robustez y precisión del código.
npm run test:oas-html
npm run test:oas-css
npm run test:oas-web-api
npm run test:oas-js