r-argentina-programa · francopineda · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021
diff --git a/tareas/clase-5/calculo-videos.html b/tareas/clase-5/calculo-videos.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Tiempo de clases</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+
+<body>
+    <h1>Calculador de tiempo de clase r/argentina programa</h1>
+
+    <form onsubmit="return false">
+        <h4>Clase 1</h4>
+        <div id="video1">
+            <input type="number" placeholder="Ingrese horas de video" class="horas">
+            <input type="number" placeholder="Ingrese minutos de video" class="minutos">
+            <input type="number" placeholder="Ingrese segundos de video" class="segundos">
+        </div>
+
+        <h4>Clase 2</h4>
+        <div id="video 2">
+            <input type="number" placeholder="Ingrese horas de video" class="horas">
+            <input type="number" placeholder="Ingrese minutos de video" class="minutos">
+            <input type="number" placeholder="Ingrese segundos de video" class="segundos">
+        </div>
+
+        <h4>Clase 3</h4>
+        <div id="video 3">
+            <input type="number" placeholder="Ingrese horas de video" class="horas">
+            <input type="number" placeholder="Ingrese minutos de video" class="minutos">
+            <input type="number" placeholder="Ingrese segundos de video" class="segundos">
+        </div>
+
+        <h4>Clase 4</h4>
+        <div id="video 4">
+            <input type="number" placeholder="Ingrese horas de video" class="horas">
+            <input type="number" placeholder="Ingrese minutos de video" class="minutos">
+            <input type="number" placeholder="Ingrese segundos de video" class="segundos">
+        </div>
+
+        <h4>Clase 5</h4>
+        <div id="video 5">
+            <input type="number" placeholder="Ingrese horas de video" class="horas">
+            <input type="number" placeholder="Ingrese minutos de video" class="minutos">
+            <input type="number" placeholder="Ingrese segundos de video" class="segundos">
+        </div>
+
+        <h4>Clase 6</h4>
+        <div id="video 6">
+            <input type="number" placeholder="Ingrese horas de video" class="horas">
+            <input type="number" placeholder="Ingrese minutos de video" class="minutos">
+            <input type="number" placeholder="Ingrese segundos de video" class="segundos">
+        </div>
+
+        <input type="submit" value="Calcular tiempo total de clases" id="boton-calcular">
+    </form>
+
+
+    <strong id="resultado"></strong>
+
+
+    <script src="calculo-videos.js"></script>
+</body>
+
+</html>
diff --git a/tareas/clase-5/calculo-videos.js b/tareas/clase-5/calculo-videos.js
@@ -0,0 +1,29 @@
+const $botonCalcular = document.querySelector("#boton-calcular");
+const $horasPorClase = document.querySelectorAll(".horas");
+const $minutosPorClase = document.querySelectorAll(".minutos");
+const $segundosPorClase = document.querySelectorAll(".segundos");
+const $textoResultadoTotal = document.querySelector("#resultado");
+
+
+
+$botonCalcular.onclick = function () {
+    let horasTotalesDeClase = 0;
+    let minutosTotalesDeClase = 0;
+    let segundosTotalesDeClase = 0;
+
+
+
+    for (let i = 0; i < $horasPorClase.length; i++) {
+        horasTotalesDeClase += Number($horasPorClase[i].value);
+    }
+
+    for (let i = 0; i < $minutosPorClase.length; i++) {
+        minutosTotalesDeClase += Number($minutosPorClase[i].value);
+    }
+
+    for (let i = 0; i < $segundosPorClase.length; i++) {
+        segundosTotalesDeClase += Number($segundosPorClase[i].value);
+    }
+
+    $textoResultadoTotal.textContent = `El tiempo total de clase es de ${horasTotalesDeClase} horas, ${minutosTotalesDeClase} minutos y ${segundosTotalesDeClase} segundos.`;
+}
diff --git a/tareas/clase-5/calculos-lista.html b/tareas/clase-5/calculos-lista.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Tarea 4 - clase 5</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+
+<body>
+    <ol>
+        <li><input type="number" placeholder="Ingrese un número"  class="numeros"></li>
+        <li><input type="number" placeholder="Ingrese un número"  class="numeros"></li>
+        <li><input type="number" placeholder="Ingrese un número"  class="numeros"></li>
+        <li><input type="number" placeholder="Ingrese un número"  class="numeros"></li>
+        <input type="submit" value="Calcular" id="boton-calcular">
+    </ol>
+    <ul>
+        <li><em id="promedio">El promedio es...</em></li>
+        <li><em id="numero-pequenio">El número más pequeño es...</em></li>
+        <li><em id="numero-grande">El número más grande es...</em></li>
+        <li><em id="numero-frecuente">El número más frecuente es...</em></li>
+        <input type="button" value="Limpiar" id="boton-limpiar">
+    </ul>
+    <script src='calculos-lista.js'></script>
+</body>
+
+</html>
diff --git a/tareas/clase-5/calculos-lista.js b/tareas/clase-5/calculos-lista.js
@@ -0,0 +1,89 @@
+const $botonCalcular = document.querySelector("#boton-calcular");
+const $botonLimpiar = document.querySelector("#boton-limpiar");
+
+
+function nodeListToArray(nodeList) {
+    const arrayNumeros = [];
+
+    for (let i = 0; i < nodeList.length; i++) {
+        arrayNumeros.push(Number((nodeList[i].value)))
+    }
+
+    return arrayNumeros;
+}
+
+
+function calcularPromedio(array) {
+    let totalSuma = 0;
+
+    for (let i = 0; i < array.length; i++) {
+        totalSuma += array[i];
+    };
+
+    return totalSuma / array.length;
+};
+
+
+function calcularMayorNumero(array) {
+    let mayorNumero = array[0];
+
+    for (let i = 0; i < array.length; i++) {
+        if (array[i] > mayorNumero) {
+            mayorNumero = array[i];
+        };
+    };
+
+    return mayorNumero;
+};
+
+
+function calcularMenorNumero(array) {
+    let menorNumero = array[0];
+
+    for (let i = 0; i < array.length; i++) {
+        if (array[i] < menorNumero) {
+            menorNumero = array[i];
+        };
+    };
+
+    return menorNumero;
+};
+
+
+function calcularNumeroMasFrecuente(array) {
+    let numeroMasFrecuente;
+
+    for (let i = 0; i < array.length; i++) {
+        for (let j = i + 1; j < array.length; j++) {
+            if (array[i] === array[j]) {
+                numeroMasFrecuente = array[i];
+            };
+        };
+    };
+
+    return numeroMasFrecuente;
+}
+
+
+$botonCalcular.onclick = function () {
+    const $numeros = document.querySelectorAll(".numeros");
+
+    let numerosACalcular = nodeListToArray($numeros);
+
+    console.log(numerosACalcular);
+
+    document.querySelector("#promedio").textContent = `El promedio es ${calcularPromedio(numerosACalcular)}`;
+    document.querySelector("#numero-pequenio").textContent = `El número más pequeño es ${calcularMenorNumero(numerosACalcular)}`;
+    document.querySelector("#numero-grande").textContent = `El número más grande es ${calcularMayorNumero(numerosACalcular)}`;
+    document.querySelector("#numero-frecuente").textContent = `El número más frecuente es ${calcularNumeroMasFrecuente(numerosACalcular)}`;
+
+    return false;
+};
+
+
+$botonLimpiar.onclick = function () {
+    document.querySelector("#promedio").textContent = "El promedio es...";
+    document.querySelector("#numero-pequenio").textContent = "El número más pequeño es...";
+    document.querySelector("#numero-grande").textContent = "El numero más grande es...";
+    document.querySelector("#numero-frecuente").textContent = "El número más frecuente es...";
+}
diff --git a/tareas/clase-5/formulario-datos-usuario.html b/tareas/clase-5/formulario-datos-usuario.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Datos del usuario</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+
+<body>
+    <h1>Bienvenido!</h1>
+
+    <form id="entrada-bar" onsubmit="return false;">
+        <input type="text" placeholder="Ingresá tu nombre" id="nombre-usuario" />
+        <input type="number" placeholder="Ingresá tu edad" id="edad-usuario" />
+        <input type="submit" value="Ingresar" id="ingresar" />
+    </form>
+
+    <div id="resultado">Hola</div>
+
+    <script
+        src="formulario_datos_usuario.js"></script>
+</body>
+
+</html>
diff --git a/tareas/clase-5/formulario_datos_usuario.js b/tareas/clase-5/formulario_datos_usuario.js
@@ -0,0 +1,13 @@
+const $nombreUsuario = document.querySelector('#nombre-usuario');
+const $edadUsuario = document.querySelector('#edad-usuario');
+const $botonIngresar = document.querySelector('#ingresar');
+const $resultado = document.querySelector('#resultado');
+
+$botonIngresar.onclick = function(){
+    const nombreUsuario = $nombreUsuario.value;
+    const edadUsuario = $edadUsuario.value;
+
+    $resultado.textContent = nombreUsuario + ' , ' + edadUsuario + ' años.';
+
+    document.querySelector('h1').textContent = `Bienvenido, ${nombreUsuario}`;
+}
diff --git a/tareas/clase-6/calculos-tarea-6 b/tareas/clase-6/calculos-tarea-6
@@ -0,0 +1,33 @@
+function calcularPromedio (array){
+    let sumaTotal = 0;
+
+    for(let i=0; i< array.length; i++){
+        sumaTotal += array[i];
+    }
+
+    return sumaTotal / array.length;
+}
+
+function calcularMenorNumero (array){
+    let menorNumero = array[i]
+
+    for (let i=0; i<array.length; i++){
+        if(array[i] < menorNumero){
+            menorNumero = array[i];
+        };
+    }
+
+    return menorNumero;
+}
+
+function calcularMayorNumero(array){
+    let mayorNumero = array[i];
+
+    for (let i=0; i<array.length; i++){
+        if(array[i] > mayorNumero){
+            mayorNumero = array[i];
+        };
+    };
+
+    return mayorNumero;
+}
diff --git a/tareas/clase-6/index.html b/tareas/clase-6/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Tarea clase 6</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel="stylesheet" href="tarea-clase-6.css">
+</head>
+
+<body>
+    <form id="calculador-edades">
+        <label for="cantidad-integrantes">Ingrese la cantidad de integrantes</label>
+        <input type="number" id="cantidad-integrantes">
+        <button type="submit" id="siguiente-paso">Siguiente</button>
+
+
+    <div id="integrantes">
+
+    </div>
+
+    <button type="button" id="calcular" class="oculto">Calcular</button>
+
+    <div id="analisis" class="oculto">
+        <p>La edad mayor es: <strong id="mayor-edad"></strong></p>
+        <p>La edad menor es: <strong id="menor-edad"></strong></p>
+        <p>El promedio es: <strong id="promedio-edad"></strong></p>
+    </div>
+
+    <button type="reset" id="resetear">Resetear</button>
+    </form>
+
+    <script type="text/javascript" src="calculos-tarea-6.js"></script>
+    <script type="text/javascript" src='tarea-clase-6.js'></script>
+</body>
+
+</html>
diff --git a/tareas/clase-6/tarea-clase-6.css b/tareas/clase-6/tarea-clase-6.css
@@ -0,0 +1,3 @@
+.oculto {
+    display: none;
+}