JavaScript es un lenguaje extremadamente popular hoy en día para el desarrollo web. Esto nos permite de una manera muy sencilla aplicar interactividad y dinamismo en nuestras páginas web. La mejor forma de empezar en programación es con proyectos pequeños y que funcionen, como juegos o acertijos.
En este tutorial, crearás un acertijo con javascript paso a paso usando html, css y javascript. Además de la lógica de programación, también practicarás trabajar con eventos, validaciones y manipulación del DOM. Este es un ejercicio sencillo para estudiantes y principiantes en desarrollo web, te enseñamos a crear una adivinanza con JavaScript.
Crear la estructura HTML
El primer paso consiste en crear la estructura principal de nuestra aplicación web utilizando HTML.
Aquí definiremos:
- El título de la adivinanza.
- El campo donde el usuario escribirá la respuesta.
- Los botones de comprobación e intento.
- El mensaje de resultado.
También añadiremos los enlaces correspondientes a los archivos CSS y JavaScript para conectar todos los elementos del proyecto.
<!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" id="respuesta">
<button id="comprobar">comprobar</button>
<button id="intentar" disabled>volver a intentar</button>
</div>
<p class="mensaje"></p>
</div>
</section>
</body>
</html>
Añadir estilos CSS
Una vez creada la estructura HTML, el siguiente paso consiste en aplicar estilos CSS para mejorar la apariencia visual del proyecto. Podemos personalizar colores, tamaños, márgenes y alineaciones según nuestras preferencias.
En este ejemplo utilizaremos un diseño sencillo y limpio para centrar la atención en el funcionamiento de la adivinanza.
*{
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;
h2, p, div{
padding: 10px;
text-align: center;
}
}
}Con estas reglas CSS conseguimos:
- Centrar el contenido.
- Añadir separación entre elementos.
- Aplicar un fondo llamativo.
- Mejorar la visualización del ejercicio.
El diseño puede personalizarse fácilmente cambiando colores, tipografías o tamaños.
Programar la lógica con JavaScript
Ahora llega la parte más importante del proyecto: la programación de la lógica utilizando JavaScript.
Con este archivo conseguiremos:
- Detectar cuándo el usuario pulsa un botón.
- Validar respuestas.
- Mostrar mensajes dinámicos.
- Controlar los intentos.
- Reiniciar la adivinanza.
Todo esto se realiza utilizando eventos y manipulación del DOM.
document.querySelector("#comprobar").addEventListener("click", comprobar);
function comprobar() {
let respuesta = document.querySelector("#respuesta").value;
let intentos = 0;
let boton = document.querySelector("#intentar");
if (!respuesta) {
alert('faltan datos');
return;
} else {
if (respuesta == "hola") {
document.querySelector(".mensaje").innerText = "respuesta correcta";
return;
} 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 = "";
}
} else {
document.querySelector(".mensaje").innerText =
"no tienes mas intentos";
document.querySelector("#comprobar").disabled = true;
}
}
}
}El código JavaScript se encarga de controlar todo el funcionamiento de la aplicación. Algunas funciones importantes son:
addEventListener()→ Detecta clics en botones.querySelector()→ Permite seleccionar elementos HTML.innerText→ Modifica mensajes dinámicamente.disabled→ Activa o desactiva botones.
Este tipo de ejercicios ayuda mucho a entender la lógica básica de programación.
Posibles mejoras para el proyecto
Una vez funcionando la adivinanza básica, puedes añadir nuevas funcionalidades para hacer el proyecto más completo:
- Sistema de puntuación.
- Temporizador.
- Varias preguntas.
- Diseño responsive.
- Sonidos y animaciones.
- Guardado de resultados.
Este tipo de mejoras son ideales para seguir practicando JavaScript y desarrollo web.
Aprender JavaScript creando proyectos reales
Crear pequeños proyectos como una adivinanza es una excelente forma de aprender JavaScript de manera práctica. Además de mejorar la lógica de programación, también permite comprender cómo interactúan HTML, CSS y JavaScript en una aplicación web real.
Con ejercicios sencillos como este podrás avanzar poco a poco hacia proyectos más completos y profesionales.
¿Quieres aprender más desarrollo web?
En Data System compartimos tutoriales, proyectos y consejos relacionados con programación, desarrollo web y tecnología.
© Copyright 2026. Todos los derechos reservados, hecho por Data System