forked from marquez.juan/clase-10-ejercicios-de-repaso
ejercicio6 terminado, comentarios, y ordenamiento del codigo
This commit is contained in:
@@ -12,49 +12,75 @@ const empleados = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
// PROMEDIO DE SUELDOS
|
// PROMEDIO DE SUELDOS
|
||||||
// asignamos las variables y creamos el elemento 'p'
|
|
||||||
let body = document.querySelector('body');
|
|
||||||
let parrafo = document.createElement ('p')
|
|
||||||
|
|
||||||
// anexamos al html
|
|
||||||
body.appendChild(parrafo);
|
|
||||||
|
|
||||||
let arraySueldoEmpleados = empleados.map((empleado) => empleado.sueldo); // creamos un array que solamente contenga los sueldos
|
let arraySueldoEmpleados = empleados.map((empleado) => empleado.sueldo); // creamos un array que solamente contenga los sueldos
|
||||||
let sumatoriaSueldos = arraySueldoEmpleados.reduce((acumulador, numeroActual) => acumulador + numeroActual, 0); // tomamos la lista creada y aplicamos el metodo reduce para sumar todos sus elementos. similar al metodo sum() de python
|
let sumatoriaSueldos = arraySueldoEmpleados.reduce((acumulador, numeroActual) => acumulador + numeroActual, 0); // tomamos la lista creada y aplicamos el metodo reduce para sumar todos sus elementos. similar al metodo sum() de python
|
||||||
let promedioSueldos = sumatoriaSueldos / empleados.length // dividimos las sumatoria de los sueldos por las cantidad de empleados
|
let promedioSueldos = sumatoriaSueldos / empleados.length // dividimos las sumatoria de los sueldos por las cantidad de empleados
|
||||||
|
//IMPORTANTE: la variable promedioSueldos sera usada mas tarde al final de la tabla
|
||||||
|
|
||||||
parrafo.textContent = 'promedio de sueldos: ' + promedioSueldos // llenamos el parrafo con el contenido
|
// TABLA DINAMICA: este ejercicio lo separ`e en dos partes, DINAMICA y NO DINAMICA.
|
||||||
|
|
||||||
|
// Empezamos por la parte NO DINAMICA: (parte de la tabla que no deberia a camibiar, aunque ingresen mas empleados)
|
||||||
// TABLA DINAMICA: este ejercicio lo separe en dos partes, la parte dinamica de la tabla y la NO dinamica
|
//creamos/asignamos los elementos necesarios
|
||||||
|
let body = document.querySelector('body');
|
||||||
// Empezamos por la parte NO dinamica de la tabla
|
|
||||||
|
|
||||||
//creamos los elementos necesarios
|
|
||||||
tabla = document.createElement('table');
|
tabla = document.createElement('table');
|
||||||
tableHead = document.createElement('thead');
|
tableHead = document.createElement('thead');
|
||||||
tableRowHeader = document.createElement('tr')
|
tableRowHeader = document.createElement('tr');
|
||||||
thc1 = document.createElement('th') // thc: abreviatura de TableHeaderCell
|
thc1 = document.createElement('th'); // thc: abreviatura de TableHeaderCell
|
||||||
thc2 = document.createElement('th')
|
thc2 = document.createElement('th');
|
||||||
thc3 = document.createElement('th')
|
thc3 = document.createElement('th');
|
||||||
tableRowNombre = document.createElement('tr')
|
thc4 = document.createElement('th');
|
||||||
tableRowSector = document.createElement('tr')
|
tableBody = document.createElement('tbody');
|
||||||
tableRowSueldo = document.createElement('tr')
|
// aplicamos el textContent a los elementos
|
||||||
tableBody = document.createElement('tbody')
|
thc1.textContent = 'Nombre';
|
||||||
tableData = document.createElement('td')
|
thc2.textContent = 'Sector';
|
||||||
|
thc3.textContent = 'Sueldo';
|
||||||
// asignamos a la tabla los elementos NO dinamicos (como el encabezado)
|
thc4.textContent = 'Promedio';
|
||||||
|
// asignamos a la tabla los elementos
|
||||||
body.appendChild(tabla);
|
body.appendChild(tabla);
|
||||||
tabla.appendChild(tableHead);
|
tabla.appendChild(tableHead);
|
||||||
tableHead.appendChild(tableRowHeader);
|
tableHead.appendChild(tableRowHeader);
|
||||||
tableRowHeader.appendChild(thc1);
|
tableRowHeader.appendChild(thc1);
|
||||||
tableRowHeader.appendChild(thc2);
|
tableRowHeader.appendChild(thc2);
|
||||||
tableRowHeader.appendChild(thc3);
|
tableRowHeader.appendChild(thc3);
|
||||||
|
tableRowHeader.appendChild(thc4);
|
||||||
tabla.appendChild(tableBody);
|
tabla.appendChild(tableBody);
|
||||||
|
|
||||||
// aplicamos el textContent a los elementos NO dinamicos
|
// Ahora vamos por la parte DINAMICA:
|
||||||
thc1.textContent = 'Nombre';
|
for (let empleado of empleados){ // iteramos la lista
|
||||||
thc2.textContent = 'Sector';
|
//Creamos una row y tres 'td' por empleado, para nombre, sector y sueldo
|
||||||
thc3.textContent = 'Sueldo';
|
RowEmpleado = document.createElement('tr');
|
||||||
|
nombreEmpleado = document.createElement('td');
|
||||||
|
sectorEmpleado = document.createElement('td');
|
||||||
|
sueldoEmpleado = document.createElement('td');
|
||||||
|
//Llenamos las 'td' con su respectivo texto acceciendo al objeto iterado
|
||||||
|
nombreEmpleado.textContent = empleado.nombre;
|
||||||
|
sectorEmpleado.textContent = empleado.sector;
|
||||||
|
sueldoEmpleado.textContent = empleado.sueldo;
|
||||||
|
//Anexamos los elementos 'row' y 'td'
|
||||||
|
tableBody.appendChild(RowEmpleado);
|
||||||
|
RowEmpleado.appendChild(nombreEmpleado);
|
||||||
|
RowEmpleado.appendChild(sectorEmpleado);
|
||||||
|
RowEmpleado.appendChild(sueldoEmpleado);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Creamos la fila para el promedio y la anexamos a tablebody
|
||||||
|
rowPromedio = document.createElement('tr');
|
||||||
|
tableBody.appendChild(rowPromedio);
|
||||||
|
// Creamos los td (pero solo vamos a llenar el ultimo)
|
||||||
|
td1 = document.createElement('td');
|
||||||
|
td2 = document.createElement('td');
|
||||||
|
td3 = document.createElement('td');
|
||||||
|
tdPromedio = document.createElement('td');
|
||||||
|
// Llenamos el 'td'
|
||||||
|
tdPromedio.textContent = promedioSueldos;
|
||||||
|
// anecamos los 'td'
|
||||||
|
rowPromedio.appendChild(td1);
|
||||||
|
rowPromedio.appendChild(td2);
|
||||||
|
rowPromedio.appendChild(td3);
|
||||||
|
rowPromedio.appendChild(tdPromedio);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user