$(document).ready(
function
() {
$(
"#btn"
).click(
function
() {
$(
"#btn"
).prop(
"disabled"
,
true
);
$(
"#btn"
).text(
"Loading..."
);
getPerson();
});
function
getPerson() {
$.get(url)
.done(
function
(data) {
const person = data.results[0];
showData(person);
})
.fail(
function
() {
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);
}
});