Skip to content

Commit

Permalink
mejore codigo y cambie css
Browse files Browse the repository at this point in the history
  • Loading branch information
alecapra96 committed Jan 14, 2021
1 parent 1c01e53 commit 725dea1
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 72 deletions.
167 changes: 127 additions & 40 deletions grupoFamiliar.css
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,146 @@
html{
background: #EFEFEF;
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*{
font-family: 'Lato', sans-serif;

}
body{
background: cornsilk;
}
footer{
align-self: flex-end;
line-height: 3;
text-align: center;
width: 100%;
background-color: chocolate;
}
#titulo{
text-align: center;
}
.contenedor{
align-content: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#first-part{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
}
#sec-and-third{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
align-content: center;

footer{
text-align: center;
font-family: Avenir, 'Source Sans Pro', sans-serif;
font-weight: 900;
}
.contenedor {
align-items: center;
#second-part{
display: flex;
flex-direction: column;
font-family: Avenir, 'Source Sans Pro', sans-serif;
justify-content: center
margin: 8px;
}
#firstPart{
padding: 20px 8px;
#third-part{
display: flex;
flex-direction: column;
justify-content: center;
}
#numberFamily{
box-sizing: border-box;
padding: 7px 0px;
#four-part{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
}
#numberFamily:hover{
border: 2px solid #004e9c;
border-radius: 4px
#five-part{
display: flex;
flex-direction: row;
background-color: crimson;
width: 100%;
justify-content: center;
}
#buttonNext{
background-color: #343A40;
border-radius: 4px;
color: #fff;
#click-button-next{
display: none;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 10px;
width: 130px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#click-button-next span{
cursor: pointer;
padding: 8px 16px;
display: inline-block;
position: relative;
transition: 0.5s;
}
#buttonNext:hover{
background-color: #004e9c;
#click-button-more{
display: none;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 4px;
width: 40px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.firstAndSecondPart{
align-items: center;
display: flex;
flex-direction: row;
#click-button-more span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#secondPart{
align-items: center;
display: flex;
flex-direction: column;
#buttonNext{

border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 6px;
width: 104px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#thirdPart{
padding: 8px 16px;
#buttonNext span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.inputsGenerados{
margin: 3px;
padding: 8px 16px;
padding: 0;
height: 30px;
outline: none;
border: 1px solid #cdcdcd;
border-color: rgba(0, 0, 0, .15);
background-color: white;
font-size: 15px;
margin: 1.7px;
}
#numberFamily{
padding: 0;
height: 30px;
outline: none;
border: 1px solid #cdcdcd;
border-color: rgba(0, 0, 0, .15);
background-color: white;
font-size: 14px;
}
#labelResults{
font-size: 25px;
}
#titulo{
font-size: 49px;
}
#click-button-more{
padding: 8px 16px;
}
23 changes: 10 additions & 13 deletions grupoFamiliar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,25 @@
<title>Grupo Familiar</title>
</head>
<body>
<header>
<h1 id="titulo">Ingrese la cantidad de integrantes de su familia</h1>
</header>
<div class="contenedor">
<div id="header">
<header>
<h1 id="titulo">Ingrese la cantidad de integrantes de su familia</h1>
</header>
</div>
<div id="firstPart">

<div id="first-part">
<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 id="sec-and-third">
<div id="second-part"></div>
<div id="third-part"></div>
</div>
<div id="fourPart"></div>
<div id="four-part"></div>
<div id="five-part"></div>
</div>
<div id="footer">
<footer>Proyecto para /r argentina</footer>
</div>

<script type="text/javascript" src="grupoFamiliar.js"></script>
</body>

Expand Down
89 changes: 70 additions & 19 deletions grupoFamiliar.js
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,70 @@
let $buttonNext = document.getElementById("buttonNext");
let $placeImputs=document.getElementById("secondPart");
// let $buttonNext2=document.getElementById("click-button-next");
let $placeImputs=document.getElementById("second-part");
let $buttonMore;
let arrayGenerado = [] ;
let num=0;
let numeroMayor;
let numeroMenor;

$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

$buttonMore.addEventListener("click",CalcularPromedio);
$buttonMore.addEventListener("click",CalculateAges);



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



//ACA TENGO QUE HACER QUE DEJEN DE ESTAR OCULTOS LOS BOTONES DEL A FUNCION CREATEBUTTONMORE Y CREATEBUTTONNEXT2



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.
if ($numberFamily > 0 && $numberFamily <= 15){ // Creo tantos imputs como $numberFamily tenga.

for(i=0;i<$numberFamily;i++){
createInput();
}
}
else if ($numberFamily >15){
alert("Dudo que su padre tenga mas de 15 hijos");
location.reload()
}
else{
alert("Escriba mejor");
location.reload()
}
}

function CalcularPromedio(){
function CalculateAges(){
event.preventDefault();

let verArray= [] ;
let $imputsGenerados = Array.from(document.getElementsByClassName("inputsGenerados"));
if ($imputsGenerados != 0){ //POR QUE NO FUNCIONA ESTE IF?

for (let i=0;i<$imputsGenerados.length;i++)
{
verArray = $imputsGenerados[i];
arrayGenerado.push(verArray.value);
}
console.log(arrayGenerado);
CalcularMayor();



CalculateHigher();
CalculateLess();
calculateAverage()
showResults();
document.getElementById('labelResults').innerHTML = 'El numero mas grande es '+numeroMayor+", el numero menor es "+numeroMenor+ " y el promedio es "+num;
}
else{
alert("ingresa mejor los datos");
}
}
function CalcularMayor(){
let numeroMayor=Number(arrayGenerado[0]);

function CalculateHigher(){
numeroMayor=arrayGenerado[0];

for (let i=0;i<arrayGenerado.length;i++)
{
Expand All @@ -58,26 +75,52 @@ function CalcularMayor(){
}
}
console.log(numeroMayor);
return numeroMayor;
}

function CalculateLess(){
numeroMenor=arrayGenerado[0];

for (let i=0;i<arrayGenerado.length;i++)
{

if (Number(arrayGenerado[i]) < numeroMenor ) {
numeroMenor = arrayGenerado[i];

}
}
console.log(numeroMenor);
return numeroMenor;
}

function calculateAverage(){
for (let i=0;i<arrayGenerado.length;i++)
{
num += (Number(arrayGenerado[i]));
}
num = num / arrayGenerado.length;
console.log(num);
return num;
}

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";
document.getElementById("click-button-more").style.display = "flex";
document.getElementById("click-button-next").style.display = "flex";
}

function createInput(){
const $imputFamily = document.createElement('input');
$imputFamily.placeholder = "Ingresa la edad del miembro ";
$imputFamily.placeholder = "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");
let $placeImputs1=document.getElementById("third-part");
const $buttonMore = document.createElement('BUTTON');
$buttonMore.id = "click-button-more";
$buttonMore.innerHTML = "+";
Expand All @@ -89,10 +132,18 @@ function createButtonMore(){ // Agrego un boton para sumar o restar integrantes

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");
let $placeImputs1=document.getElementById("four-part");
$buttonMore = document.createElement('BUTTON');
$buttonMore.id = "click-button-next";
$buttonMore.innerHTML = "CALCULAR!";
$placeImputs1.appendChild($buttonMore);
return $buttonMore;
}
function showResults(){
let $placeImputs1=document.getElementById("five-part");
$label = document.createElement('LABEL');
$label.id = "labelResults";

$placeImputs1.appendChild($label);
return $label;
}

0 comments on commit 725dea1

Please sign in to comment.