Create a Random User Generator using jQuery
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.
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.w3wiki.net/wp-content/uploads/20230816223829/BeginnergforBeginner-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 : 100 vh; } .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.2 s; } .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.3 s; 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); } }); |
Output:
Contact Us