Random user generator (JavaScript and REST API)

Random user generator (JavaScript and REST API)
23/09/2019 Ernestas Konopliovas
Short description

This small demo generates user with random details and shows the result in a lovely UI. Nothing special here, but can be very useful when trying to fill database (or whatever) with readable user details for testing.

Back-end:
JavaScript

Front-end:
HTML + CSS

Demonstration

Demonstration page is here

Interesting code pieces

Getting new user:

var apiURL = 'https://randomuser.me/api/?inc=name,email,dob,phone,location,login,picture&noinfo&nat=gb';
 
var name;
var email;
var bday;
var address;
var phone;
var password;
var pictureURL;
 
//Function called on "New" button click
function getNewUser() {
    fetch(apiURL)  //fetching API url
        .then(res => res.json())
        .then((out) => {
        var user = out.results[0];
 
        //Setting up the user values
        name = user.name.first + ' ' + user.name.last; 
        email = user.email;
        var tempBday = user.dob.date;  
        bday = tempBday.substring(0,tempBday.indexOf('T')).replace(/\-/g,'\/');
        address = user.location.street;
        phone = user.phone;
        password = user.login.password;
        pictureURL = user.picture.large;
 
        //Logging new user info into console
        console.log('New generated user:')
        console.log(name);
        console.log(email);
        console.log(bday);
        console.log(address);
        console.log(phone);
        console.log(password);
        console.log(pictureURL);
        console.log(' ');
 
        //Updating GUI values
        setPrimaryData(iconsArray);
        document.querySelector('#profilePicture').src = pictureURL;
        })
        .catch(err => { throw err });  //catching fetch errors
 
}

Comments (0)

Leave a reply

Your email address will not be published. Required fields are marked *

*