DavidBernalGonzalez/index.html

## 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>Document</title>
</head>
<body>
    <!-- Etiqueta en la que inyectaremos los elementos-->
    <div id="root"></div>
    <!-- Llamamos a app.js para inyectar el contenido desde el DOM -->
    <script src="./main.js"></script>
</body>
</html>

## main.js
// Array de objetos
const TECNOLOGIAS = [
    { name: "HTML", uso: "Front End" },
    { name: "CSS", uso: "Front End" },
    { name: "JavaScript", uso: "Back & Front" },
    { name: "Java", uso: "Back End" },
    { name: "PHP", uso: "Back End" },
];

// Seleccionando el elemento padre
const ROOT_ELEMENT = document.getElementById("root");

// Preparando el texto a injectar por DOM
const TECH = (params) =>
	`<li>${params.name} - ${params.uso}</li>`;

//Añadiendo la apertura de la lista <UL>
ROOT_ELEMENT.innerHTML += "<ul class='list'>";
// Seleccionado al elemento UL que acabamos de crear
const LIST_ITEM = document.querySelector(".list");
// Añadiendo los elementos <LI></LI>
TECNOLOGIAS.forEach((item) => (LIST_ITEM.innerHTML += TECH(item)));
//Cerrando la lista </UL>
ROOT_ELEMENT.innerHTML += "</ul>";
	<!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>Document</title>
	</head>
	<body>
	<!-- Etiqueta en la que inyectaremos los elementos-->
	<div id="root"></div>
	<!-- Llamamos a app.js para inyectar el contenido desde el DOM -->
	<script src="./main.js"></script>
	</body>
	</html>
	// Array de objetos
	const TECNOLOGIAS = [
	{ name: "HTML", uso: "Front End" },
	{ name: "CSS", uso: "Front End" },
	{ name: "JavaScript", uso: "Back & Front" },
	{ name: "Java", uso: "Back End" },
	{ name: "PHP", uso: "Back End" },
	];

	// Seleccionando el elemento padre
	const ROOT_ELEMENT = document.getElementById("root");

	// Preparando el texto a injectar por DOM
	const TECH = (params) =>
	`<li>${params.name} - ${params.uso}</li>`;

	//Añadiendo la apertura de la lista <UL>
	ROOT_ELEMENT.innerHTML += "<ul class='list'>";
	// Seleccionado al elemento UL que acabamos de crear
	const LIST_ITEM = document.querySelector(".list");
	// Añadiendo los elementos <LI></LI>
	TECNOLOGIAS.forEach((item) => (LIST_ITEM.innerHTML += TECH(item)));
	//Cerrando la lista </UL>
	ROOT_ELEMENT.innerHTML += "</ul>";