Skip to content
Guía JavaScript

Promesas

Hoy les traigo un ejercicio para que practiquen promesas, manipulación del DOM y un poco de eventos dinámicos. 😎 Vamos a consumir datos de una API de prueba y a mostrar la información de forma interactiva. ¿Listos? ¡Manos a la obra! 🛠️

Desafío 💡

Vamos a crear una lista dinámica de usuarios obtenida desde la API de JSONPlaceholder. No solo vamos a mostrar los nombres, ¡también implementaremos una búsqueda en tiempo real para filtrar los usuarios según lo que escriban! 🔤

Requisitos 📋

  1. Consumir la API Usa fetch para obtener los datos de la URL:
https://jsonplaceholder.typicode.com/users

Cuando la información llegue correctamente, muestra los nombres y correos electrónicos de los usuarios en una lista.

  1. Mostrar en el DOM Crea un contenedor en tu HTML donde puedas mostrar los usuarios. Cada usuario debe incluir:
  • Nombre 🧑‍💻
  • Email 📧
  1. Búsqueda en tiempo real Añade un campo de texto encima de la lista donde los usuarios puedan escribir un nombre o correo.
  • Mientras escriben, actualiza la lista para mostrar solo los usuarios que coincidan con el texto ingresado.
  • Si no hay coincidencias, muestra un mensaje como: “No se encontraron usuarios.”
  1. Manejo de errores Si hay un problema al obtener los datos de la API, muestra un mensaje de error amigable para el usuario (¡sin alert! 😅).

Pista inicial 👇

Aquí te dejo un punto de partida para que vayas rápido:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Usuarios</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
  <h1>📋 Lista de Usuarios</h1>
  <div class="search-container">
    <input
      type="text"
      id="search"
      placeholder="Escribe un nombre o correo..."
      aria-label="Buscar usuarios"
    />
  </div>
  <ul id="userList"></ul>
  <div id="errorMessage" class="hidden">❌ Error al cargar los usuarios. Intenta nuevamente.</div>
  <div id="noResultsMessage" class="hidden">🔍 No se encontraron usuarios.</div>
</div>
</body>
</html>