diff --git a/.gitignore b/.gitignore index e69de29b..688d285c 100644 --- a/.gitignore +++ b/.gitignore @@ -0,0 +1,2 @@ + +tareas/clase-6/tarea 2/pseudocódigo.txt diff --git a/tareas/clase-1/index.html b/tareas/clase-1/index.html index 29a6327b..e1b00603 100644 --- a/tareas/clase-1/index.html +++ b/tareas/clase-1/index.html @@ -7,6 +7,28 @@ - +
+
+ + +
+ +
+ + +
+ + + +
+ + + + + - + + \ No newline at end of file diff --git a/tareas/clase-1/tarea-clase-1.js b/tareas/clase-1/tarea-clase-1.js index 0ce39143..80876e4c 100644 --- a/tareas/clase-1/tarea-clase-1.js +++ b/tareas/clase-1/tarea-clase-1.js @@ -3,19 +3,31 @@ // Preguntarle estos datos al usuario y guardarlos en 2 variables // Ejecutar la función con estos datos // Impriman el resultado en la consola + +document.querySelector('#calcular-edad').onclick = function (){ + const anioActual = Number(document.querySelector('#actual').value); + const anioNacimiento = Number(document.querySelector('#nacimiento').value); + console.log('Tenés ' + calcularEdad(anioActual, anioNacimiento) + ' años'); +}; + + function calcularEdad(anioActual, anioNacimiento) { return anioActual - anioNacimiento; } -const anioActual = Number(prompt("Cuál es el año actual?")); -const anioNacimiento = Number(prompt("En qué año naciste?")); -console.log('Tenés ' + calcularEdad(anioActual, anioNacimiento) + ' años'); + + + + + + // Preguntar el salario anual y calcular el salario mensual // Preguntar el salario mensual y calcular el anual // diario... semanal, por hora. etc. +/* function calcularSalarioAnual(salarioMensual) { const cantidadMesesEnUnAnio = 12; return salarioMensual * cantidadMesesEnUnAnio; @@ -44,6 +56,8 @@ console.log('Tu salario mensual es ' + calcularSalarioMensual(salarioAnual)); console.log('Tu salario semanal es ' + calcularSalarioSemanal(salarioAnual)); console.log('Tu salario diario es ' + calcularSalarioDiario(salarioAnual)); +*/ + /// SCOPE // Variable hoisting -> izar diff --git a/tareas/clase-6/funciones.js b/tareas/clase-6/funciones.js new file mode 100644 index 00000000..b4a791f6 --- /dev/null +++ b/tareas/clase-6/funciones.js @@ -0,0 +1,58 @@ +function crearUsuario(cantidadIntegrantes) { + + for (let i = 0; i < cantidadIntegrantes; i++) { + + const $integrantes = document.querySelector('#integrantes'); + $integrantes.className = ".integrante"; + + const $label = document.createElement('label'); + const textoLabel = (document.createTextNode('Edad del integrante # ' + (i + 1))); + $label.appendChild(textoLabel); + + const $input = document.createElement('input'); //Creo el tag input + $input.type = "number"; + $input.min = "0"; + $input.max = "100"; + $input.className = "edades"; + + $integrantes.appendChild($label); + $integrantes.appendChild($input); //Al elemento "$integrantes" le agrego el elemento hijo "$input" + + + } + +} + + +function calcularMayorEdad(edades) { + let maxEdad = 0; + for (let i = 0; i < edades.length; i++) { + if (edades[i].value > maxEdad) { //Mayor Edades + maxEdad = Number(edades[i].value); + } + } + return maxEdad; +} + +function calcularMenorEdad(edades) { + let minEdad = 200; + + for (let i = 0; i < edades.length; i++) { + if (edades[i].value < minEdad) { //Menor Edades + minEdad = Number(edades[i].value); + } + } + return minEdad; +} + +function calcularPromEdad(edades) { + let sum = 0; + + for (let i = 0; i < edades.length; i++) { + sum += Number(edades[i].value); + } + + return (sum / edades.length); + +} + diff --git a/tareas/clase-6/index.html b/tareas/clase-6/index.html index e69de29b..b792bddd 100644 --- a/tareas/clase-6/index.html +++ b/tareas/clase-6/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + Tarea 6 + + +
+ + + + + + +
+ +
+ + + + + +
+

La edad mayor es:

+

La edad menor es:

+

El promedio de edad es:

+
+ + + +
+ + + + diff --git a/tareas/clase-6/main.css b/tareas/clase-6/main.css new file mode 100644 index 00000000..a3e0306a --- /dev/null +++ b/tareas/clase-6/main.css @@ -0,0 +1,13 @@ +.oculto { + display: none; +} + +#calculador-edades{ + font-style: italic; + font-weight: bolder; + background-color: cadetblue; +} + +.edad{ + background-color: brown; +} diff --git a/tareas/clase-6/tarea 2/calculos-tarea-2.js b/tareas/clase-6/tarea 2/calculos-tarea-2.js new file mode 100644 index 00000000..ecb8e705 --- /dev/null +++ b/tareas/clase-6/tarea 2/calculos-tarea-2.js @@ -0,0 +1,49 @@ +function mayorSalarioAnual(){ + const sueldos = document.querySelectorAll('.miembros'); + let maxSalario = 0; + + for(let i = 0; i < sueldos.length; i++){ + if (Number(sueldos[i].value) != 0 && Number(sueldos[i].value) > maxSalario ){ + maxSalario = Number(sueldos[i].value); + } + } + + return maxSalario; + } + +function menorSalarioAnual(){ + const sueldos = document.querySelectorAll('.miembros'); + let minSalario = 1000000; + + for(let i = 0; i < sueldos.length; i++){ + if (Number(sueldos[i].value) != 0 && Number(sueldos[i].value) < minSalario ){ + minSalario = Number(sueldos[i].value); + } + } + + return minSalario; + } + +function salarioAnualPromedio(cantidadMiembros){ + const sueldos = document.querySelectorAll('.miembros'); + let salarioPromedio = 0; + let sumatoriaSalarios = 0; + + for (let i = 0; i < sueldos.length; i++) { + sumatoriaSalarios += Number(sueldos[i].value); + + } + + salarioPromedio = (sumatoriaSalarios / cantidadMiembros); + + return salarioPromedio; +} + +function salarioMensualPromedio(){ + const mesesDelAnio = 12; + let salarioPromedioMensual = 0; + + salarioPromedioMensual = (salarioAnualPromedio(cantidadMiembros) / mesesDelAnio); + + return salarioPromedioMensual; +} diff --git a/tareas/clase-6/tarea 2/index-tarea2.html b/tareas/clase-6/tarea 2/index-tarea2.html new file mode 100644 index 00000000..b414f6d0 --- /dev/null +++ b/tareas/clase-6/tarea 2/index-tarea2.html @@ -0,0 +1,73 @@ + + + + + + + + Tarea 2 - Clase 6 + + + + + +
Salario Familiar
+ +
+ + +
+ + + + + +
+ +
+ +

El mayor salario anual es: + + +

+

El menor salario anual es: + + +

+

El salario anual promedio es: + + +

+

El salario mensual promedio es: + + +

+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + + + diff --git a/tareas/clase-6/tarea 2/main-tarea2.css b/tareas/clase-6/tarea 2/main-tarea2.css new file mode 100644 index 00000000..66cf32d5 --- /dev/null +++ b/tareas/clase-6/tarea 2/main-tarea2.css @@ -0,0 +1,3 @@ +.oculto { + display: none; +} \ No newline at end of file diff --git a/tareas/clase-6/tarea 2/tarea-2-clase-6.js b/tareas/clase-6/tarea 2/tarea-2-clase-6.js new file mode 100644 index 00000000..ec33450a --- /dev/null +++ b/tareas/clase-6/tarea 2/tarea-2-clase-6.js @@ -0,0 +1,129 @@ +/* +TAREA: +Crear una interfaz que permita: +- agregar ó quitar (botones agregar y quitar) inputs + labels + para completar el salario anual de cada integrante de la familia que trabaje. + +- Al hacer click en "calcular", mostrar en un elemento pre-existente + * el mayor salario anual, + * menor salario anual, + * salario anual promedio y + * salario mensual promedio. + +Punto bonus: +- si hay inputs vacíos, ignorarlos en el cálculo (no contarlos como 0). +*/ + +let cantidadMiembros = 0; +document.querySelector('#agregar').onclick = function(){ + agregarMiembro(); + cantidadMiembros += 1; +} + +document.querySelector('#calcular').onclick = function(){ + event.preventDefault(); + + mostrarSalario("mayor",mayorSalarioAnual()); + mostrarSalario("menor",menorSalarioAnual()); + mostrarSalario("anual-promedio",salarioAnualPromedio(cantidadMiembros)); + mostrarSalario("mensual-promedio",salarioMensualPromedio()); + mostrarResultados(); + + +} + + +document.querySelector('#quitar').onclick = function(){ + quitarMiembro(); +} + +document.querySelector('#reset').onclick = function(){ + resetear(cantidadMiembros); +} + +function agregarMiembro(){ + crearEtiqueta('label','Ingrese su salario anual: ',""); + crearEtiqueta('input',"",'number') + mostrarBotonCalculo(); +} + +function crearEtiqueta(tag,texto,tipo){ + const $div = document.createElement('div'); + const $contenedorMiembros = document.querySelector('#agrega-miembros'); + + //Crea etiqueta y texto o tipo de la misma + const $etiqueta = document.createElement(tag); + + if (tipo === "number") { + $etiqueta.type = "number"; + $etiqueta.className = "miembros"; + $etiqueta.placeholder = "Ejemplo $250000"; + } else { + const $texto = document.createTextNode(texto); + $etiqueta.appendChild($texto); + } + + + + //Agrega la etiqueta nueva al nodoPadre + $div.appendChild($etiqueta); + $contenedorMiembros.appendChild($div); + +} + +function quitarMiembro(){ + borrarEtiqueta('label'); + borrarEtiqueta('input'); +} + +function borrarEtiqueta(tag){ + const etiqueta = document.querySelector(tag); + + etiqueta.remove(); + +} + +function mostrarResultados(){ + document.querySelector('#calculos').className = ""; +} + +function ocultarResultados(){ + document.querySelector('#calculos').className = "oculto"; +} + +function resetear(valor){ + for(let i = 0; i < valor; i++){ + quitarMiembro(); + } + ocultarResultados(); + ocultarBotonCalculo(); +} + + +function mostrarSalario(tipo,valor){ + document.querySelector(`#${tipo}-salario`).textContent = valor; +} + +function mostrarSalarioPromedio(tipo1,tipo2,valor){ + document.querySelector(`#${tipo1-tipo2}-salario`).textContent = valor; +} + +function mostrarBotonCalculo() { + document.querySelector('#calcular').className = ''; +} + +function ocultarBotonCalculo() { + document.querySelector('#calcular').className = 'oculto'; +} + +/* + + +function mostrarSalarioAnualPromedio(){ + document.querySelector('#salario-anual-promedio').textContent = salarioAnualPromedio(cantidadMiembros); +} + +function mostrarSalarioMensualPromedio(){ + document.querySelector('#salario-mensual-promedio').textContent = salarioMensualPromedio(); +} +*/ \ No newline at end of file diff --git a/tareas/clase-6/tarea-clase-6.js b/tareas/clase-6/tarea-clase-6.js index dc058824..4e482e2d 100644 --- a/tareas/clase-6/tarea-clase-6.js +++ b/tareas/clase-6/tarea-clase-6.js @@ -1,16 +1,144 @@ /* TAREA: Empezar preguntando cuánta gente hay en el grupo familiar. -Crear tantos inputs+labels como gente haya para completar la edad de cada integrante. -Al hacer click en "calcular", mostrar en un elemento pre-existente la mayor edad, la menor edad y el promedio del grupo familiar. +Crear tantos inputs+labels como gente haya para completar la Edades de cada integrante. +Al hacer click en "calcular", mostrar en un elemento pre-existente la mayor edad, la menor edad y +el promedio del grupo familiar. + Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuevamente, borrando los inputs ya creados (investigar cómo en MDN). */ +// CREAR USUARIO +document.querySelector('#siguiente-paso').onclick = function (event) { + + const cantidadIntegrantes = Number(document.querySelector('#cantidad-integrantes').value); + + if (cantidadIntegrantes > 0){ + //resetearResultados(); + mostrarBotonCalcular(); + crearUsuario(cantidadIntegrantes); + } + +} + + +//EDADES MÁXIMA, MÍNIMA Y PROMEDIO GENERAL +document.querySelector('#calcular').onclick = function () { + + const calculos = document.querySelectorAll('#analisis > p');//Trae todo el 'div' análisis. + const edades = document.querySelectorAll(".edades");//Trae las edades de los ingresantes + + mostrarMayor(calculos,calcularMayorEdad); + mostrarMenor(calculos,calcularMenorEdad); + mostrarPromedio(calculos,calcularPromEdad); + mostrarMayor("mayor",calcularMayorEdad(edades)); + mostrarMenor("menor",calcularMenorEdad(edades)); + mostrarPromedio("promedio",calcularPromEdad(edades)); + mostrarResultados(); + + + + //calculos es un NodeList con los párrafos + function mostrarMayor(texto,valor) { + document.querySelector(`#${texto}-edad`).textContent = valor; + } + + function mostrarMenor(texto,valor){ + document.querySelector(`#${texto}-edad`).textContent = valor; + } + + function mostrarPromedio(texto,valor){ + document.querySelector(`#${texto}-edad`).textContent = valor; + } + + event.preventDefault(); + +} + + + +document.querySelector('#resetear').onclick = resetear; + + + +function resetear(){ + resetearResultados(); + limpiarLabels(); + limpiarInputs(); + ocultarBotonCalcular(); + limpiarResultados(); + +} + +function resetearResultados(){ + const integrantes = document.querySelectorAll('.integrante'); + //console.log(integrantes); + + for(let i = 0; i < integrantes.length; i++){ + integrantes[i].remove(); + } +} + +function limpiarLabels(){ + const labels = document.querySelectorAll('#integrantes > label'); + for(let i = 0; i < labels.length; i++){ + labels[i].remove(); + } + +} + +function limpiarInputs(){ + const inputs = document.querySelectorAll('#integrantes > input'); + for(let i = 0; i < inputs.length; i++){ + inputs[i].remove(); + } +} + +function mostrarBotonCalcular(){ + document.querySelector('#calcular').className = ""; +} + +function ocultarBotonCalcular(){ + document.querySelector('#calcular').className = "oculto"; +} + +function mostrarResultados() { + document.querySelector('#analisis').className = ''; +} + +function limpiarResultados(){ + document.querySelector('#analisis').className = 'oculto'; + +} + + + + + +function crearTag(tag,texto,nodoPadre){ + + const $nodoPadre = document.querySelector(nodoPadre) + const $elemento = document.createElement(tag); + const nodoTexto = document.createTextNode(texto); + + $elemento.appendChild(nodoTexto); + $nodoPadre.appendChild($elemento); + + return $nodoPadre; +} /* TAREA: -Crear una interfaz que permita agregar ó quitar (botones agregar y quitar) inputs+labels para completar el salario anual de cada integrante de la familia que trabaje. -Al hacer click en "calcular", mostrar en un elemento pre-existente el mayor salario anual, menor salario anual, salario anual promedio y salario mensual promedio. +Crear una interfaz que permita: +- agregar ó quitar (botones agregar y quitar) inputs + labels + para completar el salario anual de cada integrante de la familia que trabaje. + +- Al hacer click en "calcular", mostrar en un elemento pre-existente + * el mayor salario anual, + * menor salario anual, + * salario anual promedio y + * salario mensual promedio. -Punto bonus: si hay inputs vacíos, ignorarlos en el cálculo (no contarlos como 0). +Punto bonus: +- si hay inputs vacíos, ignorarlos en el cálculo (no contarlos como 0). */