Create a Random User Generator using jQuery

Last Updated : 01 Nov, 2023

With the use of the API and jQuery, we’ll create a random user generator app. A straightforward web application called “jQuery Random User Generator” makes use of jQuery and the RandomUser.me API to generate random user data and present it in a visually appealing way. Users of this project can click a button to get random user information, such as name, gender, location, phone number, email, and profile image.

jQuery-Random-User-Generator

Prerequisites

Approach

When the user clicks on the “Random Person” button, it automatically becomes inactive and displays the text “Loading…”. to provide feedback to the user about the ongoing process.
The ‘getPerson’ function sends an AJAX request to the RandomUser.me API to fetch random user data.
Upon receiving the data, the ‘.done’ callback processes the information. Subsequently, the ‘showData’ function gracefully updates the DOM elements by incorporating the new user’s details.
In case of an error, the ‘.fail’ callback displays an alert message to notify the user of the failure.
The code guarantees the reactivation of the “Random Person” button and restores its initial text state enabling users to click it again to fetch another random user.

Example: Below is the implementation of the project.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Random User Generator using jQuery</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="wrapper"> 
        <div class="img-area"> 
            <div class="inner-area"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"
                    id="photo" /> 
            </div> 
        </div> 
        <div id="name">John Doe</div> 
        <hr class="horizon" /> 
        <div class="info"> 
            <p>First Name : <span id="first">John</span></p> 
            <p>Last Name : <span id="last">Doe</span></p> 
            <p>Gender : <span id="gender">Male</span></p> 
            <p>Location : <span id="street">Earth</span></p> 
            <p>Phone : <span id="phone">333-333-2222</span></p> 
            <p>Email : <span id="email">test@gmail.com</span></p> 
        </div> 
  
        <button id="btn">Random Person</button> 
    </div> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"> 
    </script> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

body { 
    font-family: Arial, sans-serif; 
    background-color: #f2f2f2; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 
  
.wrapper { 
    background-color: #fff; 
    border-radius: 15px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    text-align: center; 
    padding: 20px; 
    width: 400px; 
    margin: 20px; 
    transition: transform 0.2s; 
} 
  
.wrapper:hover { 
    transform: scale(1.02); 
} 
  
.img-area { 
    margin: 20px 0; 
} 
  
#photo { 
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    box-shadow: 0px 1px 20px 1px grey; 
} 
  
#name { 
    font-size: 24px; 
    font-weight: bold; 
    margin: 20px 0; 
} 
  
.horizon { 
    margin: 20px 0; 
} 
  
.info { 
    text-align: center; 
} 
  
p { 
    margin: 0; 
    font-size: 18px; 
    padding: 10px; 
  
} 
  
button { 
    background-color: #007BFF; 
    color: #fff; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s; 
    margin-top: 20px; 
} 
  
button:hover { 
    background-color: #0056b3; 
} 
  
@media (max-width: 480px) { 
    .wrapper { 
        padding: 10px; 
    } 
  
    #photo { 
        width: 100px; 
        height: 100px; 
    } 
  
    #name { 
        font-size: 20px; 
    } 
  
    p { 
        font-size: 16px; 
    } 
  
    button { 
        padding: 8px 16px; 
        font-size: 14px; 
    } 
}

Javascript

$(document).ready(function () { 
    $("#btn").click(function () { 
        $("#btn").prop("disabled", true); 
        $("#btn").text("Loading..."); 
        getPerson(); 
    }); 
  
    function getPerson() { 
        const url = "https://.../api/"; 
  
        $.get(url) 
            .done(function (data) { 
                const person = data.results[0]; 
                showData(person); 
            }) 
            .fail(function () { 
                // Handle error here 
                alert("Failed to fetch data. Please try again."); 
            }) 
            .always(function () { 
  
                $("#btn").prop("disabled", false); 
                $("#btn").text("Random Person"); 
            }); 
    } 
  
    function showData(person) { 
        $("#name").text(`${person.name.first} ${person.name.last}`); 
        $("#first").text(person.name.first); 
        $("#last").text(person.name.last); 
        $("#street").text(person.location.street.name); 
        $("#phone").text(person.phone); 
        $("#email").text(person.email); 
        $("#gender").text(person.gender); 
  
        $("#photo").attr("src", person.picture.large); 
    } 
});