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

Tu app y una API real

Trae datos reales de internet con fetch y JSON.

Tu Carrera · 0 de 9 nivelesse hacen en orden

Paso 1 de 5

Hoy: datos reales de internet

Una API es un servicio de internet que te da datos. Los manda en JSON (un objeto con campos). Tu app va a pedir un dato con fetch y mostrarlo.

👉 Mira el `<script>`: el `fetch` a una API real y el `JSON` ya están hechos. Dale Siguiente.

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

🌐 En inglés

API = un servicio de internet que te da datosfetch = el comando JS que va a buscar esos datosJSON = el formato de la respuesta: objeto con campos

💡 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:#0b1020;color:#e8e8f0;min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px}
  .app{max-width:460px;width:100%;text-align:center}
  h1{font-size:28px;color:#8b5cf6}
  button{margin-top:12px;padding:12px 22px;border:0;border-radius:999px;background:#4dffd6;color:#07080f;font-weight:bold;font-size:15px;cursor:pointer}
  #out{margin-top:18px;padding:16px;border-radius:12px;background:#161a2e;min-height:48px;line-height:1.5}
</style>
</head>
<body>
<div class="app">
  <div style="font-size:60px"></div>
  <h1></h1>
  <p>Toca el botón y traigo un dato real de internet.</p>
  <button id="btn"></button>
  <div id="out">Aquí va a salir el dato real cuando esta web esté publicada. 👆</div>
</div>

<script>
  var out = document.getElementById("out");
  // El prefijo que TÚ escribes se muestra antes del dato de la API.
  var prefijo = "";
  document.getElementById("btn").onclick = async function () {
    out.textContent = "Buscando en internet... 🔎";
    try {
      // fetch() llama a una API REAL pública (sin clave).
      var r = await fetch("https://catfact.ninja/fact");
      // La respuesta viene en JSON: un objeto con campos.
      var d = await r.json();
      out.textContent = prefijo + " " + d.fact;
    } catch (e) {
      out.textContent = "No me pude conectar a internet.";
    }
  };
</script>
</body>
</html>

tu web en vivo · 13 etiquetas

← Nivel 6 Nivel 8: Tu proyecto libre publicable →