feat(JS): solved ex block 01

This commit is contained in:
Rafa Muñoz
2025-02-24 14:06:10 +01:00
parent 5473730e80
commit 63fecbac6a
7 changed files with 186 additions and 0 deletions

View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function calcularPromedio() {
// Obtener los valores de los inputs y convertirlos a número
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let num3 = parseFloat(document.getElementById("num3").value);
// Guardar los números en un array y ordenarlos de mayor a menor
let numeros = [num1, num2, num3].sort((a, b) => b - a);
// Calcular el promedio de los dos mayores
let promedio = (numeros[0] + numeros[1]) / 2;
// Mostrar el resultado en el div
document.getElementById("resultado").innerText = "Promedio: " + promedio;
}
</script>
</head>
<body>
<input type="number" id="num1" placeholder="Número 1">
<input type="number" id="num2" placeholder="Número 2">
<input type="number" id="num3" placeholder="Número 3">
<button onclick="calcularPromedio()">Calcular Promedio</button>
<div id="resultado"></div>
</body>
</html>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function sumarValores() {
// Obtener los valores de los inputs y convertirlos a número
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
// Calcular la suma
let suma = num1 + num2;
// Mostrar el resultado en el párrafo
document.getElementById("resultado").innerText = "Suma: " + suma;
}
</script>
</head>
<body>
<input type="number" id="num1" placeholder="Número 1">
<input type="number" id="num2" placeholder="Número 2">
<button onclick="sumarValores()">Sumar</button>
<p id="resultado"></p>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
let contador = 0;
function actualizarContador() {
document.getElementById("contador").innerText = contador;
}
function incrementar() {
contador++;
actualizarContador();
}
function decrementar() {
contador--;
actualizarContador();
}
function resetear() {
contador = 0;
actualizarContador();
}
</script>
</head>
<body>
<h2>Contador: <span id="contador">0</span></h2>
<button onclick="incrementar()">Incrementar</button>
<button onclick="decrementar()">Decrementar</button>
<button onclick="resetear()">Resetear</button>
</body>
</html>

View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function verificarParImpar() {
// Obtener el valor del input y convertirlo a número
let numero = parseInt(document.getElementById("numero").value);
// Determinar si es par o impar
let mensaje = (numero % 2 === 0) ? "El número es PAR" : "El número es IMPAR";
// Cambiar el color de fondo según si es positivo o negativo
let colorFondo = (numero >= 0) ? "green" : "red";
// Mostrar el resultado y aplicar el color de fondo
let resultadoElemento = document.getElementById("resultado");
resultadoElemento.innerText = mensaje;
resultadoElemento.style.backgroundColor = colorFondo;
resultadoElemento.style.color = "white"; // Asegurar que el texto sea visible
}
</script>
</head>
<body>
<input type="number" id="numero" placeholder="Ingresa un número">
<button onclick="verificarParImpar()">Verificar</button>
<p id="resultado"></p>
</body>
</html>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function calcularPrecioFinal() {
// Pedir el precio original al usuario
let precio = parseFloat(prompt("Ingrese el precio del producto:"));
// Pedir el porcentaje de descuento
let descuento = parseFloat(prompt("Ingrese el porcentaje de descuento:"));
// Calcular el precio final con descuento
let precioConDescuento = precio - (precio * (descuento / 100));
// Mostrar el resultado en el span
document.getElementById("precioFinal").innerText = "Precio final: " + precioConDescuento.toFixed(2) + " €";
}
</script>
</head>
<body>
<button onclick="calcularPrecioFinal()">Calcular Precio Final</button>
<p><span id="precioFinal"></span></p>
</body>
</html>

View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function cambiarTamanio(factor) {
let parrafo = document.getElementById("texto");
let tamañoActual = window.getComputedStyle(parrafo).fontSize;
let nuevoTamaño = parseFloat(tamañoActual) + factor;
parrafo.style.fontSize = nuevoTamaño + "px";
}
</script>
</head>
<body>
<p id="texto" style="font-size: 16px;">Este es un texto con tamaño ajustable.</p>
<button onclick="cambiarTamanio(2)">Aumentar tamaño</button>
<button onclick="cambiarTamanio(-2)">Disminuir tamaño</button>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function mostrarValor() {
let input = document.getElementById("numero");
let valor = parseInt(input.value);
let parrafo = document.getElementById("resultado");
if (valor === 0) {
parrafo.style.display = "none"; // Oculta el <p> si el valor es 0
} else {
parrafo.style.display = "block"; // Asegura que se muestre si no es 0
parrafo.innerText = "Valor ingresado: " + valor;
}
}
</script>
</head>
<body>
<input type="number" id="numero" placeholder="Ingresa un número" onblur="mostrarValor()">
<p id="resultado" style="display: none;"></p>
</body>
</html>