diff --git a/index.html b/index.html index 976445f3..4cc6fe6f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-

Hola!

+

Holaaaa!

Escribamos un poco de código el día de hoy!

diff --git a/tareas/clase-5/css.css b/tareas/clase-5/css.css new file mode 100644 index 00000000..5084c813 --- /dev/null +++ b/tareas/clase-5/css.css @@ -0,0 +1,3 @@ +.oculto { + display:none +} diff --git a/tareas/clase-5/index.html b/tareas/clase-5/index.html index 00bd40b8..66f298a7 100644 --- a/tareas/clase-5/index.html +++ b/tareas/clase-5/index.html @@ -5,9 +5,34 @@ - Clase 5 + + Probando git hub desktop +
+ + + + +
+ +
+ + + + + + + +
+ +
+

+

Nombre:

+

Segundo Nombre:

+

Edad:

+
- \ No newline at end of file + + diff --git a/tareas/clase-5/index3.html b/tareas/clase-5/index3.html new file mode 100644 index 00000000..4cb9c1c6 --- /dev/null +++ b/tareas/clase-5/index3.html @@ -0,0 +1,28 @@ + + + + + + + + Document + + +
+ + + + +
+ +
+ +
+

El tiempo total es

+
+
+ + + + + \ No newline at end of file diff --git a/tareas/clase-5/index4.html b/tareas/clase-5/index4.html new file mode 100644 index 00000000..46487bd1 --- /dev/null +++ b/tareas/clase-5/index4.html @@ -0,0 +1,12 @@ + + + + + + + Document + + +
    1 2 3 4 5 6 7 8 9
+ + diff --git a/tareas/clase-5/tarea-clase-5.js b/tareas/clase-5/tarea-clase-5.js index ecece12f..317a0cd6 100644 --- a/tareas/clase-5/tarea-clase-5.js +++ b/tareas/clase-5/tarea-clase-5.js @@ -1,58 +1,41 @@ -/* -Cosas a tener en cuenta: -1. Los no tienen .innerText, en vez de eso, usan .value. https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input +document.querySelector("#calcular-salario-mensual").onclick = function(){ + const $salarioAnual = Number(document.querySelector("#salario-anual").value) + const salarioMensual = calcularSalarioMensual($salarioAnual) + document.querySelector("#salario-mensual").value = salarioMensual + mostrarSalarioMensual() -2. Los demás elementos usan .innerText para acceder y modificar al texto que aparece dentro. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement -También pueden usar .textContent, las diferencias no son importantes por ahora. + return false + } -3. Para evitar que el formulario
se “mande” y por ende recargue la página, -al event handler “onclick”, agréguentle un return false; al final de la función. + function calcularSalarioMensual(salarioanual){ + mesesEnUnAnio = 12 + return salarioanual / mesesEnUnAnio + } -Ejemplo: -const $botonCalcular = document.querySelector("#boton-calcular"); + function mostrarSalarioMensual(){ + document.querySelector("#salario-mensual").className = "" + } -$botonCalcular.onclick = function() - // código que se ejecuta cuando le hagan click a este elemento... - return false; + + document.querySelector("#enviar").onclick = function(event){ + + + const nombre = document.querySelector("#nombre") + const segundoNombre = document.querySelector("#segundo-nombre") + const edad = document.querySelector ("#edad") + + document.querySelector("#mostrarNombre").textContent = nombre.value + document.querySelector("#mostrarSegundoNombre").textContent = segundoNombre.value + document.querySelector("#mostrarEdad").textContent = edad.value + document.querySelector("#saludar-usuario").textContent = ("Bienvenido " + nombre.value) + + + + mostrarElemento("#placeholder") + return false } -*/ - -//TAREA: completar tareas/clase-5/index.html para que incluya tarea-clase-5.js -//TAREA: crear un formulario donde un usuario pueda ingresar su salario anual. -//cuando el usuario haga click en el botón "calcular", mostrar el salario mensual -// en una caja de texto deshabilitada. --> - -//TAREA: En otro archivo html (no Index) y otro archivo js (no tarea-clase-5.js), -// creá un formulario que capture el primer nombre, segundo nombre, apellido/s y edad del usuario -// también vamos a crear un

que diga Bienvenido! -// vas a crear un botón de acción que una vez que lo apretás, va a -// mostrar toda la información junta en un campo de texto -// Y va a cambiar el

para decir "Bienvenido, nombreDeUsuario"! - -/* -Ejemplo form: - - - - - - -
Hola
-* -* */ - -//TAREA: En otro archivo distinto, -// Por cada clase de r/argentina programa existente, vamos a pedir: -// horas, minutos y segundos de cada video. Ej. Si un video dura -// 2 horas, 38 minutos y 20 segundos, vamos a rellenar 3 campos de texto con -// cada dato. -// al apretar el botón "Calcular tiempo total", debe mostrar en un -// pre-creado el tiempo total de los videos. - -//TAREA: En otro archivo distinto, -// Crear una lista de
    y
  1. que contengan sólo números. -// Convertir esos números a un array y: -// 1. calcular el promedio y mostrarlo en un pre-creado con el texto "El promedio es..." -// 2. obtener el número más pequeño y mostrarlo en un pre-creado con el texto "El número más pequeño es..." -// 3. obtener el número más grande y mostrarlo en un pre-creado con el texto "El número más grande es..." -// 4. obtener el número que más se repite y mostrarlo en un pre-creado con el texto "El número más frecuente es..." + +function mostrarElemento(elemento){ + document.querySelector(elemento).className = "" +} + diff --git a/tareas/clase-5/tarea3-clase-5.js b/tareas/clase-5/tarea3-clase-5.js new file mode 100644 index 00000000..4c985a49 --- /dev/null +++ b/tareas/clase-5/tarea3-clase-5.js @@ -0,0 +1,114 @@ +document.querySelector("#siguiente-paso").onclick = function() { + cantidadClases = Number(document.querySelector("#cantidad-clases").value) + + borrarInputsAnteriores() + crearInputsClases(cantidadClases) + + return false +} + + +document.querySelector("#calcular").onclick = function() { + let horasParcial = Number(obtenerHoras()) + let minutosParcial = Number(obtenerMinutos()) + let segundosParcial = Number(obtenerSegundos()) + const horasTotal = horasParcial + Math.floor(minutosParcial / 60) + Math.floor(segundosParcial / 3600) + const minutosTotal = minutosParcial % 60 + const segundosTotal = segundosParcial % 60 + + mostrarResultados(horasTotal, minutosTotal, segundosTotal) + mostrarElemento("#resultado") + return false +} + + + +function crearInputsClases(cantidadClases) { + + if (cantidadClases > 0) { + mostrarElemento("#calcular") + } + + for (let i = 0; i < cantidadClases; i++) { + crearInput(i) + } +} + + +function crearInput(indice) { + const $div = document.createElement("div") + $div.className = "clases" + + const $label = document.createElement("label") + $label.textContent = "Ingrese horas clase" + (indice + 1) + const $inputHoras = document.createElement("input") + $inputHoras.className = "input-hora" + const $inputMinutos = document.createElement("input") + $inputMinutos.className = "input-minutos" + const $inputSegundos = document.createElement("input") + $inputSegundos.className = "input-segundos" + + $div.appendChild($label) + $div.appendChild($inputHoras) + $div.appendChild($inputMinutos) + $div.appendChild($inputSegundos) + + const $placeholder = document.querySelector("#placeholder") + $placeholder.appendChild($div) + + +} + +function borrarInputsAnteriores() { + const $inputAnteriores = document.querySelectorAll(".clases") + for (let i = 0; i < $inputAnteriores.length; i++) { + $inputAnteriores[i].remove() + } +} + + +function obtenerHoras() { + const $inputsHora = document.querySelectorAll(".input-hora") + let horasParcial = 0 + for (let i = 0; i < $inputsHora.length; i++) { + + horasParcial += Number($inputsHora[i].value) + } + + return horasParcial + +} + +function obtenerMinutos() { + const $inputMinutos = document.querySelectorAll(".input-minutos") + let minutosParcial = 0 + + for (let i = 0; i < $inputMinutos.length; i++) { + minutosParcial += Number($inputMinutos[i].value) + } + return minutosParcial +} + +function obtenerSegundos() { + const $inputSegundos = document.querySelectorAll(".input-segundos") + let segundosParcial = 0 + + for (let i = 0; i < $inputSegundos.length; i++) { + segundosParcial += Number($inputSegundos[i].value) + } + return segundosParcial +} + + + +function mostrarElemento(elemento) { + document.querySelector(`${elemento}`).className = "" +} + + + +function mostrarResultados(horas, minutos, segundos) { + const $resultado = document.querySelector("#resultado-final") + $resultado.textContent = ( horas + " Horas " + minutos + " Minutos " + segundos + " segundos ") + +} \ No newline at end of file