r-argentina-programa · Lean-Lopez · Dec 27, 2021 · Dec 27, 2021 · Dec 27, 2021 · Dec 27, 2021
diff --git a/tareas/clase-5/index.html b/tareas/clase-5/index.html
@@ -8,6 +8,17 @@
     <title>Clase 5</title>
 </head>
 <body>
+    <h1>Calculadora de salarios Mensuales</h1>
+
+    <form>
+        <label>Ingrese su salario anual:</label>
+        <input type="number" id="salario-anual">
+        <button id="calcular-salario-mensual">Calcular</button>
+        <label>Salario mensual:</label>
+        <input type="text" disabled id="salario-mensual"/>
+        <button type ="reset" id="resetear">Resetear</button>
 
+    </form>
+    <script src="tarea-clase-5.js"></script>
 </body>
 </html>
diff --git a/tareas/clase-5/main.css b/tareas/clase-5/main.css
@@ -0,0 +1,39 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    align-items: center;
+    background: #EFEFEF;
+    display: flex;
+    flex-direction: column;
+    font-family: Avenir, 'Source Sans Pro', sans-serif;
+    justify-content: center;
+}
+
+body * {
+    box-sizing: border-box;
+}
+
+header {
+    box-sizing: border-box;
+    flex: 0 1 auto;
+    text-align: center;
+}
+
+h1 {
+    font-family: Didot, 'GFS Didot', serif;
+    font-size: 5rem;
+    margin: 0 3.5rem;
+}
+
+
+#resultado {
+    background-color: #EFE;
+    font-size: 2em;
+}
diff --git a/tareas/clase-5/tarea-clase-5.js b/tareas/clase-5/tarea-clase-5.js
@@ -56,3 +56,19 @@ Ejemplo form:
 // 2. obtener el número más pequeño y mostrarlo en un <em> 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 <em> 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 <em> pre-creado con el texto "El número más frecuente es..."
+
+
+document.querySelector("#calcular-salario-mensual").onclick = function(){
+
+  const salarioAnualUsuario = Number(document.querySelector("#salario-anual").value);
+  const salarioMensual = calcularSalarioMensual(salarioAnualUsuario);
+
+  document.querySelector("#salario-mensual").value = salarioMensual;
+  return false;
+}
+
+function calcularSalarioMensual(salarioAnual){
+  const mesesEnUnAnio = 12;
+  return salarioAnual / mesesEnUnAnio;
+}
+
diff --git a/tareas/clase-5/tarea2-index.html b/tareas/clase-5/tarea2-index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Tarea 2 Clase 5</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+</head>
+<body>
+    <h1 id="#titulo">Bienvenido</h1>
+    <form id="entrada-bar">
+        <input type="text" id="nombre-usuario" placeholder="Ingresá tus nombres"/>
+        <input type="text" id="apellido-usuario" placeholder="Ingresá tus apellidos"/>
+        <input type="number" id="edad-usuario" placeholder="Ingresá tu edad"/>
+        <button type="button" id="ingreso-usuario">Ingresar</button>
+    </form>
+
+    <div id="resultado" style="display: none"></div>
+
+    <script src='tarea2.js'></script>
+</body>
+</html>
diff --git a/tareas/clase-5/tarea2.js b/tareas/clase-5/tarea2.js
@@ -0,0 +1,30 @@
+const $saludoUsuario = document.querySelector("#ingreso-usuario");
+
+$saludoUsuario.onclick = function() {
+
+    const $titulo = document.querySelector("h1");
+    const nombreUsuario = document.querySelector("#nombre-usuario").value;
+    const apellidoUsuario = document.querySelector("#apellido-usuario").value;
+    const edadUsuario = Number(document.querySelector("#edad-usuario").value);
+
+    if(puedeEntrar(edadUsuario)){
+        $titulo.textContent = `Bienvenido al bar ${nombreUsuario}`;
+    }else{
+        $titulo.textContent = `No podes ingresar al bar ${nombreUsuario}`;
+    }
+
+    const $textoResultado = document.querySelector("#resultado");
+    $textoResultado.textContent = `Datos del usuario: ${nombreUsuario} ${apellidoUsuario} edad = ${edadUsuario}`;
+    $textoResultado.style.display = "block";
+
+    return false;
+}
+
+function puedeEntrar(edadUsuario) {
+    edadMinimaParaIngresar = 18;
+    if(edadMinimaParaIngresar > edadUsuario){
+        return false;
+    }else{
+        return true;
+    }
+}