¿Sos mayor de edad?

Weronika: Bueno... ya hicimos botones, inputs, textos... ¿y ahora qué aprendemos?

ChatGPT: Ahora viene uno de los conceptos más fundamentales de toda la programación: las decisiones. O sea, los condicionales.

Weronika: ¿Condicionales como en...?

ChatGPT: Como en la vida real. Tipo: *si tengo hambre, como; si no, espero*. La computadora hace lo mismo. Le damos una condición, y si se cumple, hace algo. Si no, hace otra cosa.

Weronika: Ok, y eso ¿cómo se ve en código?

ChatGPT: Se ve así: if (condición) { ... } else { ... }. Y lo vamos a probar con una página simple. Vos escribís tu edad y la página te dice si sos mayor o menor de edad.

Weronika: Dale. ¿Qué necesito?

<input type="number" id="edad" placeholder="Escribí tu edad">
<button id="verificar">Verificar</button>
<p id="resultado">...</p>

ChatGPT: Esa parte va en el HTML. Después necesitás la magia: el JavaScript.

const boton = document.getElementById("verificar");
const resultado = document.getElementById("resultado");

boton.addEventListener("click", () => {
  const edad = parseInt(document.getElementById("edad").value);
  
  if (isNaN(edad)) {
    resultado.textContent = "Poné un número válido.";
  } else if (edad >= 18) {
    resultado.textContent = "Sos mayor de edad.";
  } else {
    resultado.textContent = "Sos menor de edad.";
  }

  resultado.classList.remove("invisible");
});

Weronika: ¿Y qué es ese isNaN?

ChatGPT: Es una forma de decirle a JavaScript: "¿esto es un número o no?". Porque si la persona no escribe nada o pone letras, hay que manejar ese error con elegancia.

Weronika: Me copa. ¿Y el CSS?

body {
  background-color: #000;
  color: #00ff8c;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.contenedor {
  max-width: 1000px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  padding: 0.5rem;
  font-size: 1rem;
  margin: 1rem 0;
  width: 200px;
  text-align: center;
}

button {
  font-family: 'Courier New', Courier, monospace;
  background-color: #222;
  color: #00ff8c;
  border: 1px solid #00ff8c;
  padding: 1rem 2rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 1rem;
}

button:hover {
  background-color: #00ff8c;
  color: #000;
}

.respuesta {
  margin-top: 2rem;
  font-size: 1.1rem;
  transition: opacity 0.5s ease;
}

.invisible {
  opacity: 0;
}

Weronika: ¡Ya está andando! Increíble cómo con poquitas líneas ya tengo una web que decide cosas.

ChatGPT: Y eso es solo el principio. Los condicionales permiten que una página no solo muestre cosas, sino que reaccione al mundo.

Weronika: ¿Y si quiero más condiciones? Tipo: si tiene más de 100 años decirle algo distinto.

ChatGPT: Se puede agregar otra condición con un else if. Así:

if (edad > 100) {
  resultado.textContent = "¿Sos una leyenda?";
} else if (edad >= 18) {
  resultado.textContent = "Sos mayor de edad.";
} else {
  resultado.textContent = "Sos menor de edad.";
}

Weronika: JAJAJA eso me gusta. Quiero que la página tenga personalidad.

ChatGPT: Eso es lo hermoso de programar: podés meterle tu humor, tu forma de hablar, tus ideas. Y todo eso se traduce en decisiones lógicas.

Weronika: ¿Y esto también se usa en juegos?

ChatGPT: ¡Todo el tiempo! Un juego decide qué pasa cuando ganás, perdés, cuando te pegás, cuando agarrás una llave. Todo son condiciones.

Weronika: Entonces me estás diciendo que si entiendo esto, ya puedo hacer juegos simples.

ChatGPT: Exacto. Este es uno de los pilares. Vamos a usarlo en todo. Por eso este capítulo se llama "Si esto, entonces lo otro". Porque así es como piensa una computadora.