# How to Create a Random User Generator Using the randomuser.me API

> Build a random user generator with vanilla JavaScript. Fetch user data from the randomuser.me API and dynamically display profiles on your webpage.

- Repository: [Jisan Mia/dom-projects](https://github.com/jisan-mia/dom-projects)
- Tags: tutorial
- Published: 2026-03-04

---

**You can create a random user generator by fetching data from `https://randomuser.me/api/` and injecting the returned profile fields into DOM elements using vanilla JavaScript.**

This guide demonstrates how to build a client-side random user generator using the public randomuser.me API, based on the implementation found in the `jisan-mia/dom-projects` repository. The project requires no build step or external dependencies—just plain HTML, CSS, and JavaScript to fetch and display random user profiles.

## Fetching Data from the randomuser.me API

In [`script.js`](https://github.com/jisan-mia/dom-projects/blob/main/script.js), the application defines a constant `url` pointing to `https://randomuser.me/api/` and implements an `apiFetch()` function that retrieves random profile data using the native **Fetch API**.

```javascript
const url = "https://randomuser.me/api/";

function apiFetch() {
  fetch(url)
    .then(res => res.json())
    .then(data => showDataOnUi(data));
}

```

This approach returns a JSON object containing an array of user results. The script extracts `data.results[0]` to access the first random user profile for display.

## Parsing and Displaying User Information

The `showDataOnUi` function in [`script.js`](https://github.com/jisan-mia/dom-projects/blob/main/script.js) processes the API response and maps specific fields to DOM elements using `document.getElementById` with `innerText` or `innerHTML`.

**Key mappings implemented:**
- **Full name**: Combined from `name.first` and `name.last` into `userName`
- **Email**: Assigned to `userEmail`
- **Phone**: Assigned to `userPhone`
- **Location**: Formatted as `city, country` into `location`
- **Avatar**: Large profile picture URL assigned to `image`

```javascript
function showDataOnUi(data) {
  const user = data.results[0];
  
  document.getElementById("user-name").innerText = `${user.name.first} ${user.name.last}`;
  document.getElementById("user-email").innerText = user.email;
  document.getElementById("user-phone").innerText = user.phone;
  document.getElementById("location").innerText = `${user.location.city}, ${user.location.country}`;
  document.getElementById("image").src = user.picture.large;
}

```

## Building the Card Interface

The [`index.html`](https://github.com/jisan-mia/dom-projects/blob/main/index.html) file defines the markup structure with placeholder elements that the JavaScript populates dynamically. The layout includes a card container with specific IDs corresponding to the data fields extracted in [`script.js`](https://github.com/jisan-mia/dom-projects/blob/main/script.js).

**Core HTML elements:**
- `<h3 id="user-name">` for the full name display
- `<h3 id="user-email">` for the email address
- Elements for phone, location, and the avatar image (`id="image"`)
- A "Generate New user" link or button that triggers `genrateNewUser()`

The `genrateNewUser()` function calls `apiFetch()` again to retrieve and display a fresh random profile, enabling users to cycle through different identities without reloading the page.

## Implementing Interactive View Switching

The repository includes helper functions in [`script.js`](https://github.com/jisan-mia/dom-projects/blob/main/script.js) that toggle the visibility of different information sections when users click icons beneath the card.

**View control functions:**
- `displayCurrentInfo()`
- `showUserName()`
- `showUserEmail()`
- `showUserPhone()`
- `showUserLocation()`

These functions manage which user detail is currently visible, allowing the interface to switch between displaying the name, email, phone number, or location without fetching new data from the API.

## Styling the User Card

The [`style.css`](https://github.com/jisan-mia/dom-projects/blob/main/style.css) file provides the visual presentation layer, including the card layout, watermark positioning, and icon area styling. While the stylesheet does not affect the data flow from randomuser.me, it ensures the generator displays cleanly within any static site container.

## Summary

- **Fetch from `https://randomuser.me/api/`** using the native Fetch API without authentication requirements
- **Access `data.results[0]`** to retrieve the first random user object from the API response array
- **Map fields to DOM elements** by targeting IDs with `document.getElementById` and setting `innerText` or `innerHTML`
- **Trigger `genrateNewUser()`** to allow users to refresh the profile with a new random identity on demand
- **Implement view toggles** using helper functions like `showUserName()` and `showUserEmail()` to create an interactive card interface
- **Deploy as static files** since the implementation in `jisan-mia/dom-projects` requires no build tools or server-side processing

## Frequently Asked Questions

### Do I need an API key to use randomuser.me?

No. The randomuser.me API is completely free and requires no authentication or API keys. You can make requests directly from client-side JavaScript to `https://randomuser.me/api/` without registering for credentials, making it ideal for frontend demos and prototyping.

### What data does the randomuser.me API return?

The API returns comprehensive profile objects including `name` (first and last), `email`, `phone`, `location` (city, country, street coordinates), `picture` (thumbnail, medium, and large URLs), plus additional fields like `login`, `dob`, and `registered` timestamps. The [`script.js`](https://github.com/jisan-mia/dom-projects/blob/main/script.js) implementation specifically extracts the large avatar image, full name, email, phone, and city/country location.

### How do I generate multiple users at once?

Append the `results` query parameter to the URL (e.g., `https://randomuser.me/api/?results=5`). The API will return an array of profiles in `data.results` instead of a single user. You would then iterate through this array to populate multiple cards or a list view rather than accessing only the first index.

### How should I handle fetch errors when calling the API?

Wrap your fetch logic in a `try...catch` block or append a `.catch()` handler to the promise chain to handle network failures. Always verify that `data.results` exists and contains at least one element before accessing `data.results[0]` to prevent runtime errors if the API returns an unexpected structure or if the request fails entirely.