EXTRAS
CALCULADORA PROTEGIDA POR UN PINT
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego y Calculadora</title>
<style>
/* Estilos generales simplificados en escala de grises */
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 30px 15px;
background-color: #ffffff;
color: #333333;
}
input {
width: 80%;
padding: 12px;
margin: 10px 0;
font-size: 16px;
border-radius: 6px;
border: 1px solid #cccccc;
background-color: #fafafa;
}
button {
width: 85%;
padding: 14px;
font-size: 18px;
background-color: #333333;
color: white;
border: none;
border-radius: 6px;
margin-top: 15px;
cursor: pointer;
}
button:hover {
background-color: #555555;
}
.resultados {
margin-top: 25px;
text-align: left;
display: inline-block;
font-size: 18px;
line-height: 1.6;
}
/* Contenedor de la calculadora oculto al inicio */
#seccion-calculadora {
display: none;
margin-top: 40px;
border-top: 2px solid #eeeeee;
padding-top: 20px;
}
.mensaje {
font-weight: bold;
margin-top: 15px;
font-size: 18px;
}
</style>
</head>
<body>
<!-- SECCIÓN 1: EL JUEGO DE ADIVINAR -->
<div id="seccion-juego">
<h1>Paso 1: Adivina el Número</h1>
<p>Ingresa el número correcto para desbloquear la calculadora.</p>
<input type="number" id="numAdivina" placeholder="Escribe un número">
<button onclick="verificarNumero()">Verificar</button>
<div id="mensajeJuego" class="mensaje"></div>
</div>
<!-- SECCIÓN 2: LA CALCULADORA (OCULTA POR DEFECTO) -->
<div id="seccion-calculadora">
<h1>Paso 2: Calculadora Básica</h1>
<input type="number" id="num1" placeholder="Ingresa el primer número">
<input type="number" id="num2" placeholder="Ingresa el segundo número">
<button onclick="calcular()">Calcular Operaciones</button>
<div class="resultados" id="salida"></div>
</div>
<script>
// Número programado fijo
const numeroSecreto = 5;
// Función para validar el juego
function verificarNumero() {
const entrada = parseInt(document.getElementById("numAdivina").value);
const mensaje = document.getElementById("mensajeJuego");
const calcSeccion = document.getElementById("seccion-calculadora");
if (isNaN(entrada)) {
mensaje.innerHTML = "Por favor, escribe un número.";
mensaje.style.color = "#333333";
return;
}
if (entrada === 5) {
mensaje.innerHTML = "¡Correcto! Acceso concedido.";
mensaje.style.color = "#333333";
// Muestra la calculadora quitando el bloqueo visual
calcSeccion.style.display = "block";
} else {
mensaje.innerHTML = "Incorrecto. Intenta de nuevo.";
mensaje.style.color = "#333333";
// Asegura que la calculadora siga oculta si fallan después
calcSeccion.style.display = "none";
}
}
// Función original de la calculadora
function calcular() {
const n1 = parseFloat(document.getElementById("num1").value);
const n2 = parseFloat(document.getElementById("num2").value);
const contenedor = document.getElementById("salida");
if (isNaN(n1) || isNaN(n2)) {
contenedor.innerHTML = "Por favor, ingresa ambos números.";
return;
}
const suma = n1 + n2;
const resta = n1 - n2;
const multiplicacion = n1 * n2;
let division;
if (n2 === 0) {
division = "No se puede dividir entre cero";
} else {
division = n1 / n2;
}
contenedor.innerHTML = `
<p>➕ <strong>Suma:</strong> ${suma}</p>
<p>➖ <strong>Resta:</strong> ${resta}</p>
<p>✖️ <strong>Multiplicación:</strong> ${multiplicacion}</p>
<p>➗ <strong>División:</strong> ${division}</p>
`;
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------
Lectura recreativa " El Centinela " Arthur C. Clarke"
------------------------------------------------------------------
------------------------------------------------------------------------
Comentarios
Publicar un comentario