primera subida

Alecapra96 · Jan 13, 2021 · c85e780 · c85e780
commit c85e780
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 0 deletions.
diff --git a/grupoFamiliar.css b/grupoFamiliar.css
@@ -0,0 +1,59 @@
+html{
+    background: #EFEFEF;  
+}
+#titulo{
+}
+
+footer{   
+    text-align: center;
+    font-family: Avenir, 'Source Sans Pro', sans-serif;
+    font-weight: 900;
+}
+.contenedor {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-family: Avenir, 'Source Sans Pro', sans-serif;
+    justify-content: center
+}
+#firstPart{
+    padding: 20px 8px;
+}
+#numberFamily{
+    box-sizing: border-box;
+    padding: 7px 0px;   
+}
+#numberFamily:hover{
+    border: 2px solid  #004e9c;
+    border-radius: 4px
+}
+#buttonNext{
+    background-color: #343A40;
+    border-radius: 4px;  
+    color: #fff;
+    cursor: pointer;
+    padding: 8px 16px;    
+}
+#buttonNext:hover{
+    background-color: #004e9c;
+}
+.firstAndSecondPart{
+    align-items: center;
+    display: flex;
+    flex-direction: row;    
+}
+#secondPart{
+    align-items: center;
+    display: flex;
+    flex-direction: column;  
+}
+#thirdPart{
+    padding: 8px 16px;
+}
+.inputsGenerados{
+    margin: 3px;
+    padding: 8px 16px;
+}
+#click-button-more{
+    padding: 8px 16px;
+}
diff --git a/grupoFamiliar.html b/grupoFamiliar.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=GFS+Didot">
+     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200">
+     <link rel="stylesheet" href="grupoFamiliar.css">
+
+
+    <title>Grupo Familiar</title>
+</head>
+<body>
+    <div class="contenedor">
+        <div id="header">
+            <header>
+                <h1 id="titulo">Ingrese la cantidad de integrantes de su familia</h1>
+            </header>
+        </div>
+        <div id="firstPart">
+        <form >
+            <input type="number" id="numberFamily" />
+            <input type="submit" value="Siguiente" id="buttonNext" class="button"/>
+        </form>
+        </div>
+        <div class="firstAndSecondPart">
+            <div id="secondPart"></div>
+            <div id="thirdPart"></div>
+        </div>
+        <div id="fourPart"></div>
+    </div>
+    <div id="footer">
+        <footer>Proyecto para /r argentina</footer>
+    </div>
+
+<script type="text/javascript" src="grupoFamiliar.js"></script>
+</body>
+
+</html>
diff --git a/grupoFamiliar.js b/grupoFamiliar.js
@@ -0,0 +1,75 @@
+let $buttonNext = document.getElementById("buttonNext");
+let $placeImputs=document.getElementById("secondPart");
+let $buttonNext2=document.getElementById("click-button-next");
+
+$buttonNext.addEventListener("click",ocultarInicio);
+$buttonNext.addEventListener("click",ShowsInputsCreated);
+
+createButtonMore();  // Aca invoco la funcion de crear los botones
+createButtonNext2(); // llamo la funcion de crear al boton que calcula el promedio
+
+$buttonNext2.addEventListener("click",CalcularPromedio); 
+
+function ShowsInputsCreated(){ //Muestra imputs de acuerdo al numero que escribio el cliente
+    event.preventDefault();  //Esto lo pongo para que no pase lo que paso en clase-5
+    document.querySelector("#titulo").innerText = "Promedio de edad de tus familiares"; // Cambio el titulo
+
+    let $numberFamily = document.querySelector("#numberFamily").value; // Selecciono el valor que introdujo el usuario del numero de familiares
+
+    if ($numberFamily != 0){ // Creo tantos imputs como $numberFamily tenga.
+
+        for(i=0;i<$numberFamily;i++){
+            createInput();
+        }   
+    }
+} 
+
+function CalcularPromedio(){
+    let verArray= [] ;
+    let $imputsGenerados = document.getElementsByClassName("inputsGenerados"); 
+    console.log($imputsGenerados.length);
+     for (i=0;i<$imputsGenerados.length;i++)
+     {
+        let verArray = $imputsGenerados[i];
+        $imputsGenerados.push(verArray.value);
+    }
+    console.log($imputsGenerados);
+
+}
+
+
+
+function ocultarInicio() { // Funcion para ocultar el imput y el button del principio
+    event.preventDefault();
+    document.getElementById("numberFamily").style.display = "none";
+    document.getElementById("buttonNext").style.display = "none";
+}
+
+function createInput(){
+    const $imputFamily = document.createElement('input');
+    $imputFamily.placeholder = "Ingresa la edad del miembro ";
+    $imputFamily.className = "inputsGenerados";
+    $imputFamily.type = "number";
+    $placeImputs.appendChild($imputFamily);
+}
+
+function createButtonMore(){ // Agrego un boton para sumar o restar integrantes
+    let $placeImputs1=document.getElementById("thirdPart");
+    const $buttonMore = document.createElement('BUTTON');
+    $buttonMore.id = "click-button-more";
+    $buttonMore.innerHTML = "+"; 
+    $placeImputs1.appendChild($buttonMore);
+    //hago que cuando se haga click en el boton que acabo de crear se sumen imput dependiendo del numeor que escribio en $numberFamily
+    $buttonMore.addEventListener("click",createInput);
+    return $buttonMore;
+}
+
+function createButtonNext2(){ // Agrego un boton para calcular lo que el usuario introdujo en los imputs generados con la funcion sumarImputs()
+
+    let $placeImputs1=document.getElementById("fourPart");
+    const $buttonMore = document.createElement('BUTTON');
+    $buttonMore.id = "click-button-next";
+    $buttonMore.innerHTML = "CALCULAR!"; 
+    $placeImputs1.appendChild($buttonMore);
+    return $buttonMore;
+}