En este tutorial vamos a crear una pequeña aplicación con Vanilla JavaScript, sin utilizar librerías de JavaScript, para consumir una API y mostrar información en el HTML.
La idea del proyecto es sencilla: el usuario escribe una dirección IP en un campo de texto, pulsa un botón y la aplicación consulta una API para mostrar información relacionada con esa IP.
Qué vamos a construir
Vamos a crear una aplicación que tenga:
- Un campo de texto para escribir una IP.
- Un botón para lanzar la búsqueda.
- Una zona de resultados para mostrar la información devuelta por la API.
- Un pequeño estado de carga mientras se realiza la petición.
Todo se hará con HTML, CSS y JavaScript puro.
Usar un editor online
Para este proyecto se puede utilizar un editor online como Codi.link, CodePen u otra herramienta similar.
Este tipo de editores permite escribir HTML, CSS y JavaScript en el navegador y ver una previsualización del resultado en tiempo real.
Por ejemplo, podemos comenzar escribiendo un título simple en HTML:
<h1>Esta es mi app</h1>Elegir una API para obtener información de una IP
Para obtener información de una IP necesitamos una API que reciba una dirección IP y devuelva datos como país, proveedor, zona horaria u otra información disponible.
En este ejemplo se trabaja con una API de geolocalización de IP disponible en una plataforma como RapidAPI.
La API ofrece un endpoint al que se le pasa la IP y devuelve la información en formato JSON.
Preparar las opciones de la petición
Normalmente, al consumir una API desde RapidAPI, necesitamos una URL y unas opciones con cabeceras.
La estructura puede verse de esta forma:
const OPTIONS = { method: "GET", headers: { "X-RapidAPI-Key": "TU_API_KEY", "X-RapidAPI-Host": "api-host.example.com" } };En proyectos reales no es recomendable exponer claves privadas de API directamente en el frontend, porque cualquier persona podría verlas desde el navegador.
Crear una función para consultar la API
Podemos crear una función llamada fetchIpInfo que reciba una IP como parámetro.
Dentro de esa función usamos fetch() para hacer la petición.
const OPTIONS = { method: "GET", headers: { "X-RapidAPI-Key": "TU_API_KEY", "X-RapidAPI-Host": "api-host.example.com" } }; function fetchIpInfo(ip) { return fetch(`https://api.example.com/ip/${ip}`, OPTIONS) .then(response => response.json()) .catch(error => console.error(error)); }fetch() devuelve una promesa, por eso necesitamos resolver la respuesta y convertirla a JSON usando response.json().
Crear la estructura HTML
Ahora podemos crear la estructura principal de la aplicación.
<main class="container"> <form id="form"> <label> IP del usuario <input type="text" id="input" placeholder="Introduce aquí la IP" required > </label> <small>Ejemplo: 8.8.8.8</small> <button type="submit" id="submit"> Buscar información de esta IP </button> </form> <pre id="results"></pre> </main>El formulario contiene un input para escribir la IP y un botón para ejecutar la búsqueda.
El elemento pre se utilizará para mostrar el resultado de la API con formato legible.
Usar una librería CSS ligera
Para evitar dedicar demasiado tiempo al diseño, se puede usar una librería CSS ligera como Pico.css.
Esto permite obtener un diseño limpio rápidamente, sin escribir demasiados estilos.
Solo habría que enlazar la hoja de estilos en el HTML.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" >Seleccionar elementos del DOM
Desde JavaScript necesitamos seleccionar el formulario, el input, el botón y la zona de resultados.
const form = document.querySelector("#form"); const input = document.querySelector("#input"); const submit = document.querySelector("#submit"); const results = document.querySelector("#results");También se puede crear una función auxiliar para no repetir tantas veces document.querySelector().
const $ = (selector) => document.querySelector(selector); const form = $("#form"); const input = $("#input"); const submit = $("#submit"); const results = $("#results");Esta función solo es una abreviación. No es jQuery.
Escuchar el evento submit del formulario
Para ejecutar la búsqueda cuando el usuario envía el formulario, escuchamos el evento submit.
form.addEventListener("submit", async (event) => { event.preventDefault(); });event.preventDefault() evita que el formulario recargue la página al enviarse.
Leer el valor del input
Dentro del evento podemos obtener el valor escrito por el usuario.
form.addEventListener("submit", async (event) => { event.preventDefault(); const ip = input.value; if (!ip) return; });Si no hay ningún valor, simplemente detenemos la ejecución con return.
Consultar la API usando await
Como la petición a la API es asíncrona, podemos usar await dentro de una función async.
form.addEventListener("submit", async (event) => { event.preventDefault(); const ip = input.value; if (!ip) return; const ipInfo = await fetchIpInfo(ip); });Con esto obtenemos la información de la IP y podemos mostrarla en pantalla.
Agregar estado de carga
Para mejorar la experiencia del usuario, podemos desactivar el botón mientras se realiza la petición.
submit.setAttribute("disabled", ""); submit.setAttribute("aria-busy", "true");Cuando la petición termine, quitamos esos atributos.
submit.removeAttribute("disabled"); submit.removeAttribute("aria-busy");Esto evita que el usuario pulse varias veces el botón mientras la búsqueda está en proceso.
Mostrar el resultado en HTML
La API devuelve información en formato JSON. Para mostrarla de forma legible, podemos usar JSON.stringify().
results.textContent = JSON.stringify(ipInfo, null, 2);El primer parámetro es el objeto que queremos convertir a texto.
El segundo parámetro puede ser null.
El tercer parámetro indica los espacios de indentación. En este caso usamos 2 para que el resultado sea más fácil de leer.
Código JavaScript completo
const OPTIONS = { method: "GET", headers: { "X-RapidAPI-Key": "TU_API_KEY", "X-RapidAPI-Host": "api-host.example.com" } }; function fetchIpInfo(ip) { return fetch(`https://api.example.com/ip/${ip}`, OPTIONS) .then(response => response.json()) .catch(error => console.error(error)); } const $ = (selector) => document.querySelector(selector); const form = $("#form"); const input = $("#input"); const submit = $("#submit"); const results = $("#results"); form.addEventListener("submit", async (event) => { event.preventDefault(); const ip = input.value; if (!ip) return; submit.setAttribute("disabled", ""); submit.setAttribute("aria-busy", "true"); const ipInfo = await fetchIpInfo(ip); submit.removeAttribute("disabled"); submit.removeAttribute("aria-busy"); if (ipInfo) { results.textContent = JSON.stringify(ipInfo, null, 2); } });Validar el campo de IP
El atributo required permite que el navegador valide si el campo está vacío antes de enviar el formulario.
<input type="text" id="input" placeholder="Introduce aquí la IP" required >También se podría añadir un patrón con pattern para validar mejor que el valor tenga formato de IP.
Desplegar la aplicación
Cuando la aplicación está lista, se puede descargar el proyecto desde el editor online y desplegarlo en un servicio como Netlify Drop.
El proceso consiste en descargar los archivos, entrar a Netlify Drop y arrastrar el proyecto para obtener una URL pública.
Conclusión
Con Vanilla JavaScript es posible crear una aplicación sencilla que consuma una API, procese la respuesta y muestre los datos en el HTML.
En este proyecto se utilizaron conceptos importantes como fetch(), promesas, async, await, eventos de formulario, preventDefault(), selección de elementos del DOM y JSON.stringify().
Este tipo de práctica ayuda a comprender cómo conectar una interfaz web con datos externos y cómo mostrar esos resultados de forma dinámica al usuario.
