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

Tu proyecto libre publicable

Ensamblas todo en tu app libre, lista para compartir.

Tu Carrera · 0 de 9 nivelesse hacen en orden

Paso 1 de 5

Tu proyecto final — eres tú quien manda

No hay nada nuevo: aquí JUNTAS todo (HTML de N1, botón de N2, array de N6, azar). Es TU proyecto para publicar y mostrar.

👉 Lee el código y reconoce las piezas que ya dominas. Dale Siguiente.

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

🌐 En inglés

random = al azar (Math.random elige sin orden)function = un bloque de código con nombre que se ejecuta al llamarlodeploy = publicar tu web en internet 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}
    .t{max-width:460px}
    h1{font-size:40px;margin:.2em 0;color:}
    p{font-size:17px;line-height:1.6;opacity:.92}
    button{font-size:17px;padding:11px 22px;margin-top:14px;border:0;border-radius:999px;cursor:pointer;background:;color:#07080f;font-weight:bold}
    #out{font-size:21px;margin-top:18px;min-height:28px;font-weight:700}
  </style>
</head>
<body>
  <div class="t">
    <div style="font-size:74px"></div>
    <h1></h1>
    <p>Esto lo construí yo. Toca el botón.</p>
    <button onclick="sorpresa()"></button>
    <div id="out"></div>
    <p style="opacity:.5;font-size:13px">Hecho por mi - Academia IA Kids</p>
  </div>

  <script>
    // Array con TUS 4 mensajes (lo viste en N6).
    var mensajes = ["¡Eres genial!", "Hoy va a ser un gran día", "Atrévete a crear algo nuevo", "Tú programaste esto :)"];
    var _v=0;
    function sorpresa(){
      // Math.random elige una posicion al azar del array.
      var i = Math.floor(Math.random() * mensajes.length);
      document.getElementById("out").textContent = mensajes[i];
      _v++;
      try{parent.postMessage({aik:"meta",valor:_v},"*")}catch(e){}
    }
  </script>
</body>
</html>

tu web en vivo · 14 etiquetas

← Nivel 7 Nivel 9: Tu mini-quiz interactivo →