Carrera Creador IA · Nivel 5 de 9 · 9-15 añosPRO

Tu primera app completa

Junta HTML + JS + lógica en una app tuya con un if.

Tu Carrera · 0 de 9 nivelesse hacen en orden

Paso 1 de 6

Tu proyecto, de principio a fin

Esto es TODO junto: el <html> de N1, el <button onclick> de N2 y un if de N3. Ya no te enseño nada nuevo: hoy ENSAMBLAS tu propia app.

👉 Lee el código entero una vez. Reconoce las piezas que ya construiste antes. Cuando lo veas claro, dale Siguiente.

📖 Este paso es solo leer — toca “Siguiente”.

🌐 En inglés

function = un bloque de código con nombre que se ejecutabuild = construir/ensamblar tu app juntando piezaspublish = poner tu app online para que otros la usen

💡 Esto que vas a escribir tú, también se lo puedes pedir a una IA. Aquí aprendes cómo funciona el código por dentro — y en “De idea a app” aprendes a pedírselo bien a la IA.

tu código · index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body{font-family:system-ui,sans-serif;background:;color:#e8e8f0;min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
    .tarjeta{max-width:420px}
    h1{font-size:38px;margin:.2em 0;color:}
    p{font-size:17px;line-height:1.6;opacity:.92}
    input{font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid #4443;width:70%}
    button{font-size:17px;padding:11px 20px;margin-top:14px;border:0;border-radius:12px;cursor:pointer;background:;color:#06210f;font-weight:700}
    #resultado{font-size:22px;margin-top:18px;min-height:30px;font-weight:700}
  </style>
</head>
<body>
  <div class="tarjeta">
    <div style="font-size:64px"></div>
    <h1></h1>
    <p>Escribe tu nombre y dale al botón: yo decido tu reto.</p>
    <input id="nombre" placeholder="Tu nombre">
    <br>
    <button onclick="decidir()"></button>
    <div id="resultado"></div>
    <p style="opacity:.5;font-size:13px">Hecho por mi - Academia IA Kids</p>
  </div>

  <script>
    var _v=0;
    function decidir(){
      _v++;
      try{parent.postMessage({aik:"meta",valor:_v},"*")}catch(e){}
      var nombre = document.getElementById("nombre").value;
      var largo = nombre.length;
      var reto;
      // Lógica con if (lo viste en N3): decide segun el largo del nombre
      if (largo === 0) {
        reto = "Primero escribe tu nombre arriba";
      } else if (largo <= ) {
        reto = nombre + ", tu reto es: dibuja un robot en 1 minuto";
      } else {
        reto = nombre + ", tu reto es: invéntate el nombre de tu próxima app";
      }
      document.getElementById("resultado").textContent = reto;
    }
  </script>
</body>
</html>

tu web en vivo · 16 etiquetas

← Nivel 4 Nivel 6: Listas y bucles (JS de verdad) →