diff --git a/tareas/clase-5/datos-user.html b/tareas/clase-5/datos-user.html new file mode 100644 index 00000000..c0f624dd --- /dev/null +++ b/tareas/clase-5/datos-user.html @@ -0,0 +1,34 @@ + + + + + + Page Title + + + + + + +
+

Bienvenido!

+ +
+ +
+ + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/tareas/clase-5/datos-user.js b/tareas/clase-5/datos-user.js new file mode 100644 index 00000000..a8d10eb4 --- /dev/null +++ b/tareas/clase-5/datos-user.js @@ -0,0 +1,33 @@ +const botonIngresar = document.querySelector("#Ingresar") + +botonIngresar.onclick = function(){ + + const nombreUsuario = document.querySelector("#primer-nombre-usuario").value + const segundoNombreUsuario = document.querySelector("#segundo-nombre-usuario").value + const apellidoUsuario = document.querySelector("#apellido-usuario").value + const edadUsuario = document.querySelector("#edad-usuario").value + + + const nodoPagina = document.querySelector("form") + const nuevoParrafo = document.createElement("p") + const nuevoTexto = document.createTextNode(`${nombreUsuario} ${segundoNombreUsuario} ${apellidoUsuario} , ${edadUsuario}`) + nuevoParrafo.appendChild(nuevoTexto) + nodoPagina.appendChild(nuevoParrafo) + document.querySelector("h1").innerText = `Bienvenido, ${nombreUsuario}!` + + + return false; + +} + +const botonLimpiar = document.querySelector("#reset") +botonLimpiar.onclick = function(){ + limpiarPagina() +} + +function limpiarPagina(){ + let $p = document.querySelector("p") + let form = document.getElementById("datos-usuario") + document.querySelector("h1").innerText = "Bienvenido!" + form.removeChild($p) +} diff --git a/tareas/clase-5/lista.html b/tareas/clase-5/lista.html new file mode 100644 index 00000000..4d40bdfc --- /dev/null +++ b/tareas/clase-5/lista.html @@ -0,0 +1,42 @@ + + + + + + + + Listas + + + +
    +
  1. 1
    2. +
  2. 42
    3. +
  3. 96
    4. +
  4. 0
    5. +
  5. -32
    6. +
  6. 53
    7. +
  7. 11
    8. +
  8. 42
    9. + + + +
+ + El promedio es... +
+ El numero mas grande es... +
+ El numero mas pequeño es... +
+ + + + + + + + + + diff --git a/tareas/clase-5/listas.js b/tareas/clase-5/listas.js new file mode 100644 index 00000000..d3e3c45c --- /dev/null +++ b/tareas/clase-5/listas.js @@ -0,0 +1,63 @@ +const listaNumeros = document.querySelectorAll("li") +const array = [] +for (i = 0; i < listaNumeros.length; i++){ + array.push(Number(listaNumeros[i].innerText)); + +} + +function sacarPromedio(array){ + let sumaNumeros = 0 + for(i = 0; i < array.length; i++){ + sumaNumeros += array[i] + } + return sumaNumeros / array.length +} + +const promedio = sacarPromedio(array) +document.querySelector("#promedio").textContent = `El promedio es ${promedio}` + +function sacarMenor(array){ + let numeroMenor = array[0] + for(i = 0; i < array.length; i++){ + if (numeroMenor > array[i]){ + numeroMenor = array[i] + } + } + return numeroMenor + +} + +const numeroMenor = sacarMenor(array) +document.querySelector("#mas-pequeño").innerText = "El numero mas pequeño es " + numeroMenor + + +function sacarMayor(array){ + let numeroMayor = array[0] + for(i = 0; i < array.length; i++){ + if (numeroMayor < array[i]){ + numeroMayor = array[i] + } + } + return numeroMayor + +} + +const numeroMayor = sacarMayor(array) +document.querySelector("#mas-grande").innerText = "El numero mas grande es " + numeroMayor + +function masFrecuente(array){ + const tempArray = array.sort(); + let duplicados = [] + for (i = 0; i < array.length; i++){ + if (tempArray[i] === tempArray[i+1]){ + duplicados.push(tempArray[i]); + } + } return Number(duplicados) +} + + +const $masFrecuente = masFrecuente(array) +document.querySelector("#mas-frecuente").innerText = "El numero mas frecuente es " + $masFrecuente + + + diff --git a/tareas/clase-5/tiempo-clases.css b/tareas/clase-5/tiempo-clases.css new file mode 100644 index 00000000..66cf32d5 --- /dev/null +++ b/tareas/clase-5/tiempo-clases.css @@ -0,0 +1,3 @@ +.oculto { + display: none; +} \ No newline at end of file diff --git a/tareas/clase-5/tiempo-clases.html b/tareas/clase-5/tiempo-clases.html new file mode 100644 index 00000000..72e1a50e --- /dev/null +++ b/tareas/clase-5/tiempo-clases.html @@ -0,0 +1,66 @@ + + + + + + Tiempo clases + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + + + + +
Tiempo total +
+ +
+ +
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/tareas/clase-5/tiempo-clases.js b/tareas/clase-5/tiempo-clases.js new file mode 100644 index 00000000..8d8fbd04 --- /dev/null +++ b/tareas/clase-5/tiempo-clases.js @@ -0,0 +1,58 @@ + +function calcularSegundos(){ + const totalSegundos = document.querySelectorAll(".segundos") + return acumularElementos(totalSegundos) +} + +function calcularMinutos(){ + const totalMinutos = document.querySelectorAll(".minutos") + return acumularElementos(totalMinutos) +} + +function calcularHoras(){ + const totalHoras = document.querySelectorAll(".horas") + return acumularElementos(totalHoras) +} + + +function acumularElementos(elementos){ + let sumaElementos = 0 + for (i = 0; i < elementos.length; i++){ + sumaElementos += Number(elementos[i].value) + } + return sumaElementos +} + +function mostrarTiempoTotal(){ + document.querySelector("div").className = " " +} + +const botonCalcular = document.querySelector("#calcular") + +botonCalcular.onclick = function(){ + + + + mostrarTiempoTotal() + + const sumaSegundos = calcularSegundos() + const sumaMinutos = calcularMinutos() + const sumaHoras = calcularHoras() + + const minutosEnterosDeSegundos = Math.floor(sumaSegundos/ 60) + const segundosDefinitivos = sumaSegundos % 60 + + const totalMinutos = sumaMinutos + minutosEnterosDeSegundos + const horasEnterasDeMinutos = Math.floor(totalMinutos / 60) + const minutosDefinitivos = totalMinutos % 60 + + const horasDefinitivas = horasEnterasDeMinutos + sumaHoras + + document.querySelector("#horas-totales").innerText = "Las horas totales son " + horasDefinitivas + document.querySelector("#minutos-totales").innerText = "Los minutos totales son " + minutosDefinitivos + document.querySelector("#segundos-totales").innerText = "Los segundos totales son " + segundosDefinitivos + + +} + + diff --git a/tareas/clase-6/calculos-mio.js b/tareas/clase-6/calculos-mio.js index 4423cae9..6aa8ecb3 100644 --- a/tareas/clase-6/calculos-mio.js +++ b/tareas/clase-6/calculos-mio.js @@ -28,3 +28,49 @@ function obtenerPromedio(numeros) { return (acumulador / numeros.length).toFixed(2); } + +function obtenerMayorSalario(array){ + let mayorSalario = array[0] + for (i = 0; i < array.length; i ++){ + if (array[i] > mayorSalario){ + mayorSalario = array[i] + } + } return mayorSalario; +} + +function obtenerMenorSalario(array){ + let menorSalario = array[0] + for (i = 0; i < array.length; i ++){ + if (array[i] < menorSalario){ + menorSalario = array[i] + } + } return menorSalario; +} + +function obtenerPromedioSalarios(array) { + let suma = 0; + for (let i = 0; i < array.length; i++) { + suma += array[i]; + } + + return (suma / array.length).toFixed(2); +} + + +function obtenerSalariosMensuales(array){ + let array2 = [] + + for (i = 0; i < array.length; i++){ + array2.push(Number(array[i] / 12)) + } + return array2 +} + +function obtenerPromedioSalariosMensuales(array2){ + let suma2 = 0; + for (let i = 0; i < array2.length; i++) { + suma2 += array2[i]; + } + + return (suma2 / array2.length).toFixed(2); +} diff --git a/tareas/clase-6/index-mio.html b/tareas/clase-6/index-mio.html index e04c7076..580b2ee3 100644 --- a/tareas/clase-6/index-mio.html +++ b/tareas/clase-6/index-mio.html @@ -6,14 +6,16 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + Tarea 6
+ - +
@@ -27,7 +29,24 @@

El promedio de edad es:

- + +
+ +
+ + + + + +
+

El mayor salario anual es:

+

El menor salario anual es:

+

El promedio de salario anual es:

+

El promedio de salario mensual es:

+ +
+ +
diff --git a/tareas/clase-6/index.html b/tareas/clase-6/index.html deleted file mode 100644 index e69de29b..00000000 diff --git a/tareas/clase-6/package-lock.json b/tareas/clase-6/package-lock.json new file mode 100644 index 00000000..5cbcede6 --- /dev/null +++ b/tareas/clase-6/package-lock.json @@ -0,0 +1,65 @@ +{ + "name": "introduccion-a-js-master", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "bootstrap": "^4.6.0" + } + }, + "node_modules/bootstrap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "jquery": "1.9.1 - 3", + "popper.js": "^1.16.1" + } + }, + "node_modules/jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==", + "peer": true + }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + } + }, + "dependencies": { + "bootstrap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", + "requires": {} + }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==", + "peer": true + }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "peer": true + } + } +} diff --git a/tareas/clase-6/package.json b/tareas/clase-6/package.json new file mode 100644 index 00000000..ac024b16 --- /dev/null +++ b/tareas/clase-6/package.json @@ -0,0 +1,14 @@ +{ + "name": "introduccion-a-js-master", + "version": "1.0.0", + "description": "index-mio.html", + "main": "index-mio.html", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "bootstrap": "^4.6.0" + } +} diff --git a/tareas/clase-6/tarea-clase-6-final.js b/tareas/clase-6/tarea-clase-6-final.js new file mode 100644 index 00000000..689916da --- /dev/null +++ b/tareas/clase-6/tarea-clase-6-final.js @@ -0,0 +1,110 @@ +/* +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. + +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). +*/ + +document.querySelector('#siguiente-paso').onclick = function(event) { + const $cantidadIntegrantes = document.querySelector('#cantidad-integrantes'); + const cantidadIntegrantes = Number($cantidadIntegrantes.value); + + borrarIntegrantesAnteriores(); + crearIntegrantes(cantidadIntegrantes); + + event.preventDefault(); +}; + +document.querySelector('#calcular').onclick = function(event) { + const numeros = obtenerEdadesIntegrantes(); + mostrarEdad('mayor', obtenerMayorNumero(numeros)); + mostrarEdad('menor', obtenerMenorNumero(numeros)); + mostrarEdad('promedio', obtenerPromedio(numeros)); + mostrarResultados(); + + event.preventDefault(); +}; + +document.querySelector('#resetear').onclick = resetear; + +function borrarIntegrantesAnteriores() { + const $integrantes = document.querySelectorAll('.integrante'); + for (let i = 0; i < $integrantes.length; i++) { + $integrantes[i].remove(); + } +} + +function crearIntegrantes(cantidadIntegrantes) { + + if (cantidadIntegrantes > 0) { + mostrarBotonCalculo(); + } else { + resetear(); + } + + for (let i = 0; i < cantidadIntegrantes; i++) { + crearIntegrante(i); + } +} + +function crearIntegrante(indice) { + const $div = document.createElement('div'); + $div.className = 'integrante'; + + const $label = document.createElement('label'); + $label.textContent = 'Edad del integrante #: ' + (indice + 1); + const $input = document.createElement('input'); + $input.type = 'number'; + + $div.appendChild($label); + $div.appendChild($input); + + const $integrantes = document.querySelector('#integrantes'); + $integrantes.appendChild($div); +} + +function resetear() { + borrarIntegrantesAnteriores(); + ocultarBotonCalculo(); + ocultarResultados(); +} + +function ocultarBotonCalculo() { + document.querySelector('#calcular').className = 'oculto'; +} + +function mostrarBotonCalculo() { + document.querySelector('#calcular').className = ''; +} + +function ocultarResultados() { + document.querySelector('#analisis').className = 'oculto'; +} + +function mostrarResultados() { + document.querySelector('#analisis').className = ''; +} + +function mostrarEdad(tipo, valor) { + document.querySelector(`#${tipo}-edad`).textContent = valor; +} + +function obtenerEdadesIntegrantes() { + const $integrantes = document.querySelectorAll('.integrante input'); + const edades = []; + for (let i = 0; i < $integrantes.length; i++) { + edades.push(Number($integrantes[i].value)); + } + return edades; +} + +/* +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). +*/ diff --git a/tareas/clase-6/tarea-clase-6-mio.js b/tareas/clase-6/tarea-clase-6-mio.js index 689916da..0f864e73 100644 --- a/tareas/clase-6/tarea-clase-6-mio.js +++ b/tareas/clase-6/tarea-clase-6-mio.js @@ -8,6 +8,7 @@ Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuev borrando los inputs ya creados (investigar cómo en MDN). */ + document.querySelector('#siguiente-paso').onclick = function(event) { const $cantidadIntegrantes = document.querySelector('#cantidad-integrantes'); const cantidadIntegrantes = Number($cantidadIntegrantes.value); @@ -15,8 +16,10 @@ document.querySelector('#siguiente-paso').onclick = function(event) { borrarIntegrantesAnteriores(); crearIntegrantes(cantidadIntegrantes); + mostrarBotonCrearSalarios() + event.preventDefault(); -}; +} document.querySelector('#calcular').onclick = function(event) { const numeros = obtenerEdadesIntegrantes(); @@ -70,6 +73,12 @@ function resetear() { borrarIntegrantesAnteriores(); ocultarBotonCalculo(); ocultarResultados(); + borrarSalariosAnteriores(); + ocultarBotonSalarios(); + ocultarAnalisisSalarios(); + ocultarBotonCrearSalario(); + ocultarBotonQuitarSalarios(); + } function ocultarBotonCalculo() { @@ -77,7 +86,7 @@ function ocultarBotonCalculo() { } function mostrarBotonCalculo() { - document.querySelector('#calcular').className = ''; + document.querySelector('#calcular').className = 'btn btn-primary'; } function ocultarResultados() { @@ -108,3 +117,119 @@ Al hacer click en "calcular", mostrar en un elemento pre-existente el mayor sala Punto bonus: si hay inputs vacíos, ignorarlos en el cálculo (no contarlos como 0). */ + + +const $botonCrearSalario = document.querySelector("#crear-salario") +$botonCrearSalario.onclick = function(event){ + const $cantidadSalarios = document.querySelector('#cantidad-integrantes'); + const cantidadSalarios = Number($cantidadSalarios.value); + crearSalarios(cantidadSalarios); + mostrarBotonSalarios(); + mostrarBotonQuitarSalarios() + + event.preventDefault(); + + +} + +const $botonQuitarSalario = document.querySelector("#quitar-salario") +$botonQuitarSalario.onclick = function(event){ + borrarSalariosAnteriores(); + + event.preventDefault(); +} + +const $botonCalcularSalarios = document.querySelector("#calcular-salarios") +$botonCalcularSalarios.onclick = function(event){ + const array = obtenerSalariosIntegrantes(); + mostrarAnalisisSalarios(); + mostrarSalario( `mayor`, obtenerMayorSalario(array)); + mostrarSalario(`menor`, obtenerMenorSalario(array)); + mostrarSalario(`promedio`, obtenerPromedioSalarios(array)); + mostrarSalario(`promedio-mensual`, obtenerPromedioSalariosMensuales(obtenerSalariosMensuales(array))); + + event.preventDefault(); +} + + +function crearSalario(indice){ + const div = document.createElement("div") + div.className = "salario"; + + const label = document.createElement("label") + label.textContent = "Salario del integrante #: " + (indice + 1); + + const input = document.createElement("input") + input.type = "number"; + + div.appendChild(label); + div.appendChild(input); + + const $salarios = document.querySelector("#salarios"); + $salarios.appendChild(div) ; + + +} + +function crearSalarios(cantidadIntegrantes){ + for (let i = 0; i < cantidadIntegrantes; i++) { + crearSalario(i); +} +} + +function borrarSalariosAnteriores(){ + const asalariados = document.querySelectorAll(".salario") + for (i = 0; i < asalariados.length; i++ ){ + asalariados[i].remove() + } +} + +function mostrarBotonSalarios(){ + document.querySelector("#calcular-salarios").className = "btn btn-primary" +} + +function ocultarBotonSalarios(){ + document.querySelector("#calcular-salarios").className = "oculto" +} + +function mostrarBotonQuitarSalarios(){ + document.querySelector("#quitar-salario").className ="btn btn-danger"; +} + +function ocultarBotonQuitarSalarios(){ + document.querySelector("#quitar-salario").className ="oculto"; +} + +function mostrarBotonCrearSalarios(){ + document.querySelector("#crear-salario").className ="btn btn-primary"; +} + +function ocultarBotonCrearSalario(){ + document.querySelector("#crear-salario").className ="oculto"; +} + +function mostrarAnalisisSalarios(){ + document.querySelector("#analisis-salarios").className = ""; + +} + +function ocultarAnalisisSalarios(){ + document.querySelector("#analisis-salarios").className = "oculto"; +} + +function mostrarSalario(tipo, valor){ + document.querySelector(`#${tipo}-salario`).textContent = valor; +} + +function obtenerSalariosIntegrantes(){ + const $$salarios = document.querySelectorAll(".salario input") + let arraySalarios = [] + for (i = 0; i < $$salarios.length; i++){ + if ($$salarios[i].value !== ""){ + arraySalarios.push(Number($$salarios[i].value)) + } + } return arraySalarios + + + +} diff --git a/tareas/clase-6/tarea-clase-6.js b/tareas/clase-6/tarea-clase-6.js index dc058824..9c215d19 100644 --- a/tareas/clase-6/tarea-clase-6.js +++ b/tareas/clase-6/tarea-clase-6.js @@ -7,6 +7,100 @@ Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuev */ + +function crearIntegrantes(cantidadIntegrantes) { + + if (cantidadIntegrantes > 0) { + mostrarBotonCalcular(); + } else { + resetear() + } + + + for (let i = 0; i < cantidadIntegrantes; i++) { + crearIntegrante(i); + } +} + +function crearIntegrante(indice) { + const $div = document.createElement('div'); + $div.className = 'integrante'; + + const $label = document.createElement('label'); + $label.textContent = 'Edad del integrante #: ' + (indice + 1); + const $input = document.createElement('input'); + $input.type = 'number'; + + $div.appendChild($label); + $div.appendChild($input); + + const $integrantes = document.querySelector('#integrantes'); + $integrantes.appendChild($div); +} + + +function mostrarLabelsInputs(){ + document.querySelector(".oculto").className = ""; +} + +function mostrarBotonCalcular(){ + document.querySelector(".oculto").className = ""; +} + +function borrarLabelsInputsYBotones(){ + document.querySelector("").className = "oculto"; +} + +function mostrarBotonLimpiar(){ + document.querySelector("#limpiar").className = ""; + + +} + +function obtenerEdadesIntegrantes(){ + const $integrantes = document.querySelectorAll(".integrantes input") + let edades = [] + for (let i = 0; i < $integrantes.length; i++) { + edades.push($integrantes[i].value); + } + return edades; + +} + +function mostrarEdad(tipo, valor) { + document.querySelector(`#${tipo}-edad`).textContent = valor; + } + +let $botonSiguiente = document.querySelector("#siguiente-paso") +$botonSiguiente.onclick = function(event){ + const $cantidadIntegrantes = document.querySelector('#cantidad-integrantes'); + const cantidadIntegrantes = Number($cantidadIntegrantes.value) + + crearIntegrantes(cantidadIntegrantes); + mostrarBotonLimpiar(); + + event.preventDefault() + +} + + +let $botonCalcular = document.querySelector("#calcular") +$botonCalcular.onclick = function(event){ + +let arr = obtenerEdadesIntegrantes() +mostrarEdad("mayor", mayorEdad(arr)) +mostrarEdad("menor", menorEdad(arr)) +mostrarEdad("promedio", promedio(arr)) + +event.preventDefault() +} + +let $botonLimpiar = document.querySelector("#limpiar") +$botonLimpiar.onclick = function(event){ + borrarLabelsInputsYBotones(); + event.preventDefault() + +} /* 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.