1.CREAR HTML
Creamos un html siguiendo al siguiente estructura basica:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>adivinanza</title>
<link rel="stylesheet" href="adivinanza.css">
<script src="adivinanza.js" defer></script>
</head>
<body>
<section>
<div class="general">
<h2>Adivinanza</h2>
<p>hola</p>
<div>
<input type="text" name="" id="respuesta">
<button id="comprobar">comprobar</button>
<button id="intentar" disabled>volver a intentar</button>
</div>
<p class="mensaje"></p>
</div>
</section>
</body>
</html>Debemos añadir las etiquetas correspondientes a la unión con los archivos de extensión .js y .css.
Ademas pondremos el botón de reintento desactivado hasta que no sea necesario.
2.ESTILOS CSS
Podemos aplicas los estilos a nuestra gusto, aunque aquí ejemplificamos una configuración básica.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
.general{
width: 600px;
padding: 10px;
margin: auto;
margin-top: 30px;
background-color: rgb(203, 132, 0);
border-radius: 10px;
border-width: 85px;
border-color: black;
h2, p, div{
padding: 10px;
text-align: center;
}
}
}3.ARCHIVO JS
Creamos la función para comprobar las 3 variables que necesitamos:
document.querySelector("#comprobar").addEventListener("click", comprobar);
function comprobar() {
let respuesta = document.querySelector("#respuesta").value;
let intentos = 0;
let boton = document.querySelector("#intentar");Comprobamos que todos los datos estén completos y el mensaje que vamos a mostart en caso de que la respuesta sea correcta,
if (!respuesta) {
alert('faltan datos');
return;
}else{
if (respuesta == "hola") {
document.querySelector(".mensaje").innerText = "respuesta correcta";
return;Creamos la condición para retarnos un intento en cada fallo:
}else{
if (intentos > 0) {
intentos--;
document.querySelector(".mensaje").innerText = "respuesta incorrecta, tienes " + intentos + " intentos";
boton.disabled = false;
document.querySelector("#intentar").addEventListener("click", intentar);
function intentar() {
document.querySelector("#respuesta").value = "";
}
}Por último, creamos la condición para una vez que se hayan agotados todos los intentos.
}else{
document.querySelector(".mensaje").innerText = "no tienes mas intentos";
document.querySelector("#comprobar").disabled = true;
}
