<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>JS Game</title>
</head>
<body>
<div class="container">
<div class="container__contenido">
<div class="container__informaciones">
<div class="container__texto">
<h1 id="saludo"></h1>
<p class="texto__parrafo">1."¡Hola, mundo!"</p>
<p class="texto__parrafo">2."¡Hola, [nombre]!"</p>
<p class="texto__parrafo">3.El doble de un numero.</p>
<p class="texto__parrafo">4.Promedio, digite numeros separados por , max 5 Notas</p>
<p class ="texto__parrafo">5.Mayor, digita dos número para saber cual es el mayor</p>
<p class="texto__parrafo">6.Multiplicación por el mismo número.</p>
<p id="result" class="texto__parrafo" style="color: rgb(245, 245, 102);"></p>
</div>
<input id="valorUsuario" min="1" max="10" class="container__input" onfocus="this.value=''" >
<div class="chute container__botones">
<button onclick="nombre();" class="container__boton">Nombre</button>
<button onclick="numero();" class="container__boton">Numeros</button>
<button onclick="calculaPromedio();" class="container__boton">Promedio</button>
<button onclick="mayorQue();" class="container__boton">Mayor que</button>
<button onclick="multiplicacion();" class="container__boton">Multiplicación</button>
</div>
</div>
<img src="./img/ia.png" alt="Una persona mirando a la izquierda" class="container__imagen-persona" />
</div>
</div>
<script src="app.js"></script>
</body>
</html>
/**
* 1.Crear una función que muestre "¡Hola, mundo!" en la consola.
*/
let saludo = Ejercio1();
function Ejercio1(){
return console.log("¡Hola, mundo!");
}
/**
* 2.Crear una función que reciba un nombre como parámetro y muestre
* "¡Hola, [nombre]!" en la consola.
*/
function nombre(){
let nombre = document.getElementById('valorUsuario').value;
return console.log(`¡Hola,${nombre}!`);
}
/**
* 3.Crear una función que reciba un número como parámetro
* y devuelva el doble de ese número.
*/
function numero(){
let numero = parseInt(document.getElementById('valorUsuario').value);
numero = numero*2;
return document.getElementById('result').innerHTML=`El doble es ${numero}`;
}
/**
* 4.Crear una función que reciba tres números
* como parámetros y devuelva su promedio.
*/
function calculaPromedio(){
let numero = document.getElementById('valorUsuario').value;
/** split(separator) recibe numeros separados por un formato. */
let arrayNumeros = numero.split(",",5)
/** Es el concepto de map() cuando se llama a una matriz de datos */
let numeroEntero = arrayNumeros.map(Number);
console.log(numeroEntero);
//calcular promedio, .reduce() metodologiautlizada como acumador para reducir una
// matriz sumando los datos de dicha matriz, .length es parecida a count de excel
// cuenta la catidad de datos de una matriz.
let promedio= numeroEntero.reduce((a,b)=>a+b,0)/numeroEntero.length;
console.log(promedio);
// resultado
return document.getElementById('result').innerHTML=`El promedio es ${promedio}`;
}
/**
* 5.Crear una función que reciba dos números como
* parámetros y devuelva el mayor de ellos.
*/
function mayorQue(){
let numeros = document.getElementById('valorUsuario').value;
let arrayNum = numeros.split(",",2).map(Number);
console.log(arrayNum);
let a =arrayNum.shift();
let b =arrayNum.pop();
console.log(a);
console.log(b);
let num;
if(a>b){
num=document.getElementById('result').innerHTML=`El numero mayor es ${a}`;
}else{
num = document.getElementById('result').innerHTML=`El numero mayor es ${b}`;
};
return num;
}
/**
*6.Crear una función que reciba un número como parámetro y
*devuelva el resultado de multiplicar ese número por sí mismo.
*/
function multiplicacion(){
let numeroMultiplicado =parseInt(document.getElementById('valorUsuario').value);
numeroMultiplicado=numeroMultiplicado*numeroMultiplicado;
return document.getElementById('result').innerHTML=`La multiplicación por si mismo es ${numeroMultiplicado}`;
}
